/* 厨神备餐助手 · kitchen.each.cz
   蔬菜色板与纸卡系统来自小程序 DESIGN.md；深色是同色相提亮一档。 */

:root {
  --tomato: #D93B2A;
  --tomato-deep: #B7301F;
  --tomato-dark: #C43325;
  --on-tomato: #FFFFFF;
  --pumpkin: #F2C838;
  --pumpkin-deep: #E8B02E;
  --pumpkin-light: #F7DE9A;
  --zucchini: #84B24A;
  --zucchini-mid: #9CC468;
  --zucchini-deep: #6B9339;
  --zucchini-light: #C6DE9E;

  --ground: #F4F1ED;
  --ground-deep: #EFE9E2;
  --card: #FFFDFB;
  --inset: #F3EFE9;
  --cloth: #FAF6F1;
  --plate: #F5EFE7;
  --plate-rim: #E6DDD1;
  --well: #FCF8F2;
  --well-deep: #EFE6DA;
  --bezel: #3A322D;

  --ink: #2F2825;
  --ink-2: #4A423B;
  --ink-3: #6B6259;
  --line: rgba(106, 96, 88, .18);
  --line-soft: rgba(106, 96, 88, .12);

  --shadow-card: 0 22px 38px -26px rgba(47, 40, 37, .55);
  --shadow-plate: 0 22px 34px -22px rgba(47, 40, 37, .45);
  --focus: #B7301F;

  /* 桌布织纹：极细的两向线，读成棉麻，而不是条纹 */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --tomato: #E98F85;
    --tomato-deep: #F0A79E;
    --tomato-dark: #E16D62;
    --on-tomato: #121212;
    --pumpkin: #F4D25E;
    --zucchini: #A8CA7E;
    --zucchini-mid: #B8D693;
    --zucchini-deep: #8FB266;
    --zucchini-light: #C9DFA6;

    --ground: #121212;
    --ground-deep: #171717;
    --card: #1C1C1C;
    --inset: #242424;
    --cloth: #1A1A1A;
    --plate: #2A2724;
    --plate-rim: #34302C;
    --well: #211F1D;
    --well-deep: #2B2724;
    --bezel: #0B0B0B;

    --ink: #F3ECE2;
    --ink-2: #D6C9BA;
    --ink-3: #B5A795;
    --line: rgba(243, 236, 226, .18);
    --line-soft: rgba(243, 236, 226, .1);

    --shadow-card: 0 26px 44px -30px rgba(0, 0, 0, .9);
    --shadow-plate: 0 22px 34px -20px rgba(0, 0, 0, .85);
    --focus: #F0A79E;

    --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--tomato); color: var(--on-tomato); }

html { caret-color: var(--tomato); scrollbar-color: var(--line) transparent; }
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 3px solid var(--ground);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--card);
  color: var(--ink);
  z-index: 20;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vw, 34px) clamp(20px, 6vw, 88px) 0;
  max-width: 1560px;
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 13px; }

.mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tomato);
  color: var(--on-tomato);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-name { font-size: 20px; font-weight: 760; letter-spacing: .01em; }

.brand-note {
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: .08em;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 6vw, 88px) 0;
  display: grid;
  grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.hero-copy { padding-bottom: clamp(40px, 6vw, 76px); }

h1 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1.06;
  font-weight: 850;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.nowrap { white-space: nowrap; }

.lede {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 30em;
}

.schedule { margin-top: clamp(26px, 3vw, 38px); max-width: 560px; }

.schedule-head {
  margin: 0;
  padding: 12px 0 10px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: .14em;
  color: var(--ink);
}

.rows { margin: 0; padding: 0; list-style: none; }

.rows li {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16.5px;
}

.rows .t {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.rows .d { color: var(--ink); }
.rows .n { font-size: 14.5px; color: var(--ink-3); text-align: right; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--tomato);
  color: var(--on-tomato);
  font-size: 17.5px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 16px 30px -20px rgba(156, 40, 24, .85);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s cubic-bezier(.16, 1, .3, 1);
}
.cta::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--pumpkin);
  flex: none;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 22px 34px -20px rgba(156, 40, 24, .9); }
.cta:active { transform: translateY(0); }

/* ---------- the table ---------- */

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 6px calc(-1 * clamp(20px, 6vw, 88px)) 0 0;
  border-radius: 12px 0 0 12px;
  background-image: var(--weave), linear-gradient(150deg, var(--cloth), var(--ground-deep));
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 34px 60px -46px rgba(47, 40, 37, .6);
  overflow: hidden;
}

.table-grid {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 12px) clamp(12px, 1.8vw, 28px);
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 30px);
}

.place {
  margin: 0;
  width: 100%;
  max-width: 188px;
}

.place:nth-child(1) { justify-self: start; margin-top: 0; }
.place:nth-child(2) { justify-self: end; margin-top: clamp(22px, 3.2vw, 42px); }
.place:nth-child(3) { justify-self: start; margin-top: clamp(4px, .8vw, 12px); }
.place:nth-child(4) { justify-self: end; margin-top: clamp(26px, 3.6vw, 52px); }

.plate,
.bowl {
  position: relative;
  width: 100%;
  max-width: 212px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--card) 0%, var(--card) 38%, var(--plate) 68%, var(--plate-rim) 100%);
  box-shadow: var(--shadow-plate), 0 0 0 1px var(--line);
}

.well {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, var(--well), var(--well-deep));
  box-shadow: inset 0 2px 4px rgba(47, 40, 37, .18), 0 1px 0 var(--card);
}

.dish { position: absolute; inset: 0; }
.dish > span { position: absolute; display: block; }

/* 番茄牛腩 */
.sauce {
  left: 24%; top: 31%; width: 54%; height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--tomato-dark), #8E2114);
}
.cube { width: 15%; height: 13%; border-radius: 18%; background: var(--tomato-deep); }
.c1 { left: 31%; top: 36%; }
.c2 { left: 47%; top: 45%; background: #9C2818; }
.c3 { left: 38%; top: 51%; background: var(--tomato-dark); }
.wedge { width: 9%; height: 9%; border-radius: 50%; background: var(--tomato); }
.w1 { left: 27%; top: 47%; }
.w2 { left: 58%; top: 37%; }
.leaf { width: 5%; height: 3%; border-radius: 40%; background: var(--zucchini-deep); }
.l1 { left: 43%; top: 34%; transform: rotate(-18deg); }
.l2 { left: 54%; top: 57%; transform: rotate(12deg); background: var(--zucchini); }

/* 南瓜蒸排骨 */
.pumpkin { width: 19%; height: 14%; background: var(--pumpkin); border-radius: 62% 14% 62% 14%; }
.k1 { left: 25%; top: 34%; transform: rotate(-18deg); }
.k2 { left: 41%; top: 30%; background: var(--pumpkin-deep); transform: rotate(8deg); }
.k3 { left: 54%; top: 41%; background: var(--pumpkin-light); transform: rotate(-6deg); }
.k4 { left: 33%; top: 51%; background: var(--pumpkin-deep); transform: rotate(16deg); }
.bone { width: 13%; height: 10%; border-radius: 22%; background: #E3D3B4; }
.b1 { left: 29%; top: 44%; }
.b2 { left: 56%; top: 55%; background: #DCC9A6; }
.l3 { width: 4%; height: 3%; border-radius: 40%; background: var(--zucchini-deep); left: 47%; top: 63%; }

/* 蒜蓉西葫芦 */
.slice {
  width: 17%; height: 17%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--zucchini-light) 0 36%, var(--zucchini) 37% 100%);
}
.s1 { left: 27%; top: 33%; }
.s2 { left: 41%; top: 29%; background: radial-gradient(circle, var(--zucchini-light) 0 36%, var(--zucchini-mid) 37% 100%); }
.s3 { left: 55%; top: 36%; }
.s4 { left: 33%; top: 49%; background: radial-gradient(circle, var(--zucchini-light) 0 36%, var(--zucchini-mid) 37% 100%); }
.s5 { left: 48%; top: 52%; background: radial-gradient(circle, var(--zucchini-light) 0 34%, var(--zucchini-deep) 35% 100%); }
.garlic { width: 3.4%; height: 3.4%; border-radius: 30%; background: var(--pumpkin-light); }
.g1 { left: 63%; top: 27%; }
.g2 { left: 40%; top: 22%; }

/* 紫菜蛋花汤 */
.broth {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #F3DFA9, #E3C780 68%, #D2B266);
  box-shadow: inset 0 2px 5px rgba(120, 90, 40, .25);
}
.ribbon { width: 20%; height: 8%; border-radius: 50%; background: var(--pumpkin-light); }
.r1 { left: 30%; top: 40%; transform: rotate(-12deg); }
.r2 { left: 48%; top: 50%; transform: rotate(9deg); background: #FDF3D8; }
.r3 { left: 38%; top: 56%; transform: rotate(-4deg); }
.weed { width: 13%; height: 9%; border-radius: 45% 55% 60% 40%; background: #3E5A2B; }
.d1 { left: 52%; top: 36%; }
.d2 { left: 33%; top: 47%; background: #4E6B26; }

/* 时间票 */
.ticket {
  display: inline-block;
  margin: 14px 0 0;
  padding: 11px 15px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.ticket b { display: block; font-size: 15.5px; font-weight: 750; letter-spacing: .01em; }
.ticket span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ticket i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tomato);
  display: block;
  flex: none;
}
.place:nth-child(2) .ticket,
.place:nth-child(4) .ticket { margin-left: 0; }

.edge {
  margin: 0;
  padding: 12px clamp(14px, 1.8vw, 30px) 13px;
  border-top: 1px solid var(--line);
  background: var(--ground-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.edge-next { font-weight: 500; letter-spacing: .04em; color: var(--ink-3); }

/* ---------- bands ---------- */

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 118px) clamp(20px, 6vw, 88px);
}

.band + .band { border-top: 1px solid var(--line-soft); }

.band-flip .band-copy { order: 2; }
.band-flip figure { order: 1; justify-self: start; }

h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.18;
  font-weight: 820;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.band-copy p {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 32em;
}

.facts {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 34em;
}

.facts li {
  position: relative;
  padding: 11px 0 11px 1.6em;
  border-top: 1px solid var(--line-soft);
  font-size: 16px;
  color: var(--ink-2);
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pumpkin-deep);
}

/* screenshots: 装进桌上的布面，一屏一张时间票 */

.shot {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}

.mount {
  position: relative;
  width: 100%;
  padding: clamp(16px, 2vw, 30px) clamp(14px, 1.8vw, 26px);
  border-radius: 12px 12px 0 0;
  background-image: var(--weave), linear-gradient(150deg, var(--cloth), var(--ground-deep));
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 30px 54px -42px rgba(47, 40, 37, .55);
}

.phones {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  align-items: flex-start;
  justify-content: center;
}

.band-ticket {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px clamp(14px, 1.8vw, 26px) 12px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  background: var(--ground-deep);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: 13px;
  color: var(--ink-3);
}
.band-ticket b { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--ink); }
.band-ticket span { display: flex; align-items: center; gap: 7px; margin-left: auto; font-variant-numeric: tabular-nums; }
.band-ticket i { width: 6px; height: 6px; border-radius: 999px; background: var(--tomato); display: block; flex: none; }

.phone {
  width: clamp(196px, 21.5vw, 312px);
  aspect-ratio: 589 / 1280;
  padding: 6px;
  border-radius: 26px;
  background: var(--bezel);
  box-shadow: 0 34px 60px -40px rgba(47, 40, 37, .8), inset 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
  flex: none;
}

.phone img {
  display: block;
  background: var(--inset);
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  object-position: top;
}

.shot-two .phone { width: clamp(150px, 15.4vw, 232px); }
.phone-back { margin-top: clamp(18px, 3vw, 42px); }

/* ---------- enter ---------- */

.enter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 88px);
  border-top: 1px solid var(--line);
}

.enter-copy p { margin: clamp(14px, 1.8vw, 20px) 0 0; color: var(--ink-2); font-size: 17.5px; max-width: 26em; }
.enter-alt { font-size: 16px !important; color: var(--ink-3) !important; }
.enter-alt b { color: var(--ink); font-weight: 750; }

.enter-code { text-align: center; }

.code-slot {
  position: relative;
  padding: 12px;
  width: 220px;
  height: 220px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.code-slot img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }

.code-empty { display: none; margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
.code-empty span { font-size: 13px; color: var(--ink-3); }
.code-slot.empty { border-style: dashed; }
.code-slot.empty img { display: none; }
.code-slot.empty .code-empty { display: block; }

.code-note {
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-3);
}

/* ---------- foot ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  max-width: 1560px;
  margin: 0 auto;
  padding: 22px clamp(20px, 6vw, 88px) 34px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--ink-3);
}
.foot p { margin: 0; }

/* ---------- motion ---------- */

.js .place,
.js .band figure,
.js .enter-code {
  opacity: 0;
  transform: translateY(16px);
}

.js .place.in,
.js .band figure.in .phone,
.js .enter-code.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.js .band figure.in .phone { transition-delay: .06s; }
.js .band figure { opacity: 1; transform: none; }
.js .band figure .phone { opacity: 0; transform: translateY(16px); }
.js .band figure.in .phone { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .place,
  .js .band figure,
  .js .band figure .phone,
  .js .enter-code {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cta { transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  .scene { margin: 8px calc(-1 * clamp(20px, 6vw, 88px)) 40px 0; }
  .edge { padding-right: calc(clamp(14px, 1.8vw, 30px) + clamp(20px, 6vw, 88px)); }
  .table-grid { max-width: 680px; }
  .band { grid-template-columns: 1fr; }
  .band-flip .band-copy { order: 1; }
  .band-flip figure { order: 2; justify-self: start; }
  .shot { justify-content: flex-start; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .table-grid { gap: 12px 14px; }
  .place:nth-child(2) { margin-top: 20px; }
  .place:nth-child(3) { margin-top: 0; }
  .place:nth-child(4) { margin-top: 28px; }
  .ticket { padding: 9px 11px 10px; }
  .ticket b { font-size: 13px; }
  .ticket span { font-size: 11.5px; gap: 5px; }
  .rows li { grid-template-columns: 4.6em minmax(0, 1fr); }
  .rows .n { grid-column: 2; text-align: left; font-size: 13.5px; }
  .mount { width: 100%; }
  .phone { width: 74%; max-width: 300px; }
  .shot-two .phone { width: 47%; }
  .enter { grid-template-columns: 1fr; }
  .enter-code { justify-self: start; text-align: left; }
  .code-note { text-align: left; }
}