* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff9ea;
  color: #202a20;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  line-height: 1.45;
}

h1, h2, h3, h4, p, blockquote { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

/* SVG铺满容器 */
svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG 符号库隐藏*/
.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

button, input { font: inherit; }

/* 03 站点头部 */
.site-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 0 4.5%;
  background: #ffd137;
  position: relative;
  z-index: 5;
}


.site-header::after {
  content: "";
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  bottom: 0;
  border-bottom: 2px solid #202a20;
  pointer-events: none;
}

/* 品牌字标 */
.wordmark {
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 35px;
  line-height: 1;
}

.wordmark span { color: #f2492d; }

/* 主导航 */
.nav-list {
  display: flex;
  list-style: none;
  gap: 35px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.nav-list a { padding-bottom: 5px; }

/* ---------- 04 Hero 首屏 ---------- */
.hero {
  position: relative;
  min-height: 720px;
  background: #ffd137;
  overflow: hidden;
  padding: 24px 4.5% 0;
  display: flex;
  flex-direction: column;
}

/* 顶部信息条与底部信息条 */
.hero-topline,
.hero-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* 左侧文案区 */
.hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 70px;
  max-width: 780px;
}

/* 小标签：Hero 引言与各区块眉题 */
.eyebrow {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* 大标题统一风格 */
.hero h1,
.section-heading h2,
.story-intro h2 {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.82;
}

/* Hero 主标题：中文二字级超大字 */
.hero h1 {
  font-size: clamp(96px, 15vw, 230px);
  margin: 20px 0 32px;
}

.hero h1 em {
  color: #f2492d;
  font-style: normal;
}

.hero-copy p {
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.3;
  max-width: 400px;
}

/* 按钮 */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 42px;
  margin-top: 26px;
  background: #202a20;
  color: white;
  padding: 15px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  
}

/* 封面图片 */
.hero-stage {
  position: absolute;
  right: 1%;
  bottom: 31px;
  width: min(56vw, 820px);
  height: 620px;
  pointer-events: none;
}
.hero-bowl-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* 底部信息条 */
.hero-footer {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 17px 0;
}

/* 横幅 */
.manifesto {
  background: #f2492d;
  color: white;
  min-height: 155px;
  padding: 30px 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.manifesto p {
  font-size: clamp(21px, 2.3vw, 37px);
  font-weight: 800;
  text-align: center;
  max-width: 1050px;
  line-height: 1.13;
}

.manifesto strong { color: #ffd137; }

.manifesto-icon {
  font-size: 64px;
  line-height: 1;
  color: #ffd137;
}

/*碗里有什么 */
.layers-section {
  background: #fff9ea;
  padding: 100px 0 0;
}

/* 区块标题行 */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding: 0 6% 75px;
}

.section-heading h2,
.story-intro h2 {
  font-size: clamp(68px, 9vw, 150px);
  margin-top: 24px;
}

.section-heading h2 em,
.story-intro h2 em {
  font-style: normal;
  color: #f2492d;
}

.section-heading > p {
  max-width: 295px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* 层次列表：七行食材 */
.layers-list { border-top: 2px solid #202a20; }

.layer { border-bottom: 2px solid #202a20; }

/* 每层主行：编号 + 插画 + 名称 */
.layer-main {
  display: grid;
  grid-template-columns: 15% 55% 30%;
  align-items: center;
  min-height: 155px;
  padding: 0 6%;
  
}

.layer-number {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  align-self: start;
  padding-top: 30px;
}

.layer-art {
  width: 440px;
  max-width: 100%;
  height: 150px;
  object-fit: contain;
  object-position: center;
  
}

/* 奇数行 / 偶数行插画轻微倾斜，增加节奏感 */
.layer:nth-child(odd) .layer-art  { transform: rotate(-4deg); }
.layer:nth-child(even) .layer-art { transform: rotate(5deg); }

.layer-name {
  font-size: clamp(23px, 3.1vw, 50px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  justify-self: end;
  text-align: right;
}

.layer-name span {
  font-weight: 400;
  color: #f2492d;
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 5px;
}

/* 原料介绍文字始终显示 */
.layer-detail {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

.detail-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 15% 1fr 10%;
  align-items: center;
  gap: 22px;
  margin: 0 6%;
}

.detail-inner .tag {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.detail-inner p {
  font-size: clamp(16px, 2vw, 27px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 900px;
  padding: 25px 0;
}

.detail-line { display: none; }

/* 各食材层展开卡背景色（原 --accent 具体化） */
.layer-scallion .layer-detail { background: #64c447; }
.layer-chili    .layer-detail { background: #f2492d; }
.layer-fungus   .layer-detail { background: #4b3023; }
.layer-pork     .layer-detail { background: #d68056; }
.layer-noodles  .layer-detail { background: #f4e7b9; }
.layer-broth    .layer-detail { background: #ef9d31; }
.layer-bowl     .layer-detail { background: #f1eee1; }

/* 层次区结尾 */
.layers-outro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 6% 85px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.layers-outro strong {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.layers-outro a {
  border-bottom: 2px solid #f2492d;
  padding-bottom: 4px;
}

/* ---------- 07 自选一碗：码子吧台 + 预览碗 ---------- */
.builder-section {
  background: #133b2b;
  color: white;
  padding: 100px 0 110px;
}

.builder-heading { padding-bottom: 60px; }

.builder-heading .eyebrow { color: #ffd137; }

.builder-heading h2 em { color: #ffd137; }

/* 双栏布局：左侧码子吧台，右侧预览碗 */
.builder {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 24px;
  margin: 0 6%;
}

/* 隐藏的勾选框：驱动整块交互，键盘仍可聚焦 */
.ingredient-check {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

/* 面板标题行 */
.panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 0 0 17px;
  border-bottom: 2px solid currentColor;
}

/* 码子卡片网格 */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 17px;
}

/* 码子卡片 */
.choice {
  margin: 0;
  background: #fff8e9;
  color: #202a20;
  border: 3px solid transparent;
  padding: 10px;
  min-height: 195px;
  
  display: flex;
  flex-direction: column;
  
}

.choice-count {
  font-weight: 900;
  font-size: 11px;
}

.choice-art {
  height: 94px;
  object-fit: contain;
  order: 1;
  align-self: center;
}

.choice-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  order: 2;
}

/* 静态装饰符号：保留原来的卡片外观 */
.choice-mark {
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

.choice-sub {
  font-size: 11px;
  order: 3;
}

/* 静态排版：保留原来的“重新开始”样式 */
.reset-button {
  background: none;
  color: #ffd137;
  border: 0;
  border-bottom: 2px solid #ffd137;
  padding: 7px 0;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 140px;
  font-size: 12px;
  font-weight: 900;
  
}

/* 预览碗面板 */
.preview-panel {
  min-width: 0;
  background: #ffd137;
  color: #202a20;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.preview-stage {
  position: relative;
  flex: 1;
  min-height: 385px;
  overflow: hidden;
}

/* 碗后的太阳 */

.preview-art {
  position: absolute;
  bottom: 9%;
  left: 5%;
  width: 90%;
  height: 300px;
}

/* 预览碗底部说明 */
.preview-caption {
  border-top: 2px solid #202a20;
  padding-top: 15px;
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
}

.preview-caption h3 {
  font-size: clamp(27px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-weight: 900;
}

/* 已选食材名称列表 */
.selection-summary {
  font-size: 12px;
  max-width: 170px;
  text-align: right;
  font-weight: 800;
}

.preview-panel .panel-label { padding-bottom: 13px; }

/* ---------- 08 清晨的仪式 ---------- */
.story-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 8%;
  padding: 105px 6%;
  background: #f3eee2;
}

.story-intro h2 {
  font-size: clamp(65px, 7vw, 120px);
}

.story-intro blockquote {
  margin-top: 45px;
  font-size: 23px;
  font-weight: 800;
  max-width: 260px;
  line-height: 1.2;
  border-left: 6px solid #f2492d;
  padding-left: 20px;
}

.story-body h3 {
  font-size: 22px;
  letter-spacing: -0.04em;
}

/* 嗦粉三步 */
.steps {
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
}

.steps li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  border-top: 2px solid #202a20;
  padding: 19px 0;
  font-size: 14px;
}

.steps strong { font-size: 12px; }

/* 词汇卡 */
.glossary {
  background: #329a4c;
  padding: 25px;
  color: white;
}

.glossary h4 { font-size: 18px; }

.glossary dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  margin: 19px 0 0;
  font-size: 13px;
}

.glossary dt {
  font-weight: 900;
  color: #ffd137;
}

.glossary dd { margin: 0; }

/* ---------- 09 页脚 ---------- */
.site-footer {
  background: #f2492d;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 36px 6%;
}

.site-footer .wordmark span { color: #ffd137; }

.site-footer p,
.site-footer > a:last-child {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* ---------- 10 响应式适配 ---------- */

/* 中等屏幕：1080px 以下 */
@media (max-width: 1080px) {
  .hero-stage {
    right: -4%;
    width: 70vw;
  }

  .hero-copy { padding-top: 85px; }

  .hero h1 { font-size: clamp(84px, 15vw, 170px); }

  .choice { min-height: 170px; }
  .choice-art { height: 72px; }
  .choice-name { font-size: 15px; }

  /* 自选区改为单栏：吧台在上，预览碗在下 */
  .builder { grid-template-columns: 1fr; }

  .preview-stage { min-height: 430px; }

  .preview-art {
    width: min(610px, 90%);
    left: 50%;
    transform: translateX(-50%);
  }

  .preview-sun {
    width: 45%;
    left: 27%;
  }

  .preview-panel { min-height: 550px; }

  .layer-main { grid-template-columns: 14% 50% 36%; }
}

/* 小屏幕：650px 以下（手机） */
@media (max-width: 650px) {
  .site-header::after { left: 5%; right: 5%; }
  .site-header {
    height: 66px;
    padding: 0 5%;
  }

  .wordmark { font-size: 28px; }

  .nav-list {
    gap: 13px;
    font-size: 10px;
  }

  /* 手机端收起第三个导航项，避免拥挤 */
  .nav-list li:nth-child(3) { display: none; }

  .hero {
    min-height: 760px;
    padding: 20px 5% 0;
  }

  /* 手机端精简信息条 */
  .hero-topline span:last-child,
  .hero-footer span { display: none; }

  .hero-copy { padding-top: 50px; }

  .hero h1 {
    font-size: clamp(76px, 20vw, 130px);
    margin-bottom: 20px;
  }

  .hero-copy p {
    font-size: 17px;
    max-width: 255px;
  }
  .hero-stage {
    width: 100%;
    right: 0;
    bottom: 32px;
    height: 350px;
  }
  .hero-footer { justify-content: flex-end; }

  .manifesto {
    min-height: 135px;
    gap: 9px;
  }

  .manifesto p { font-size: 21px; }
  .manifesto-icon { font-size: 28px; }

  .layers-section,
  .builder-section { padding-top: 70px; }

  .section-heading {
    padding: 0 5% 45px;
    align-items: start;
    flex-direction: column;
    gap: 18px;
  }

  .section-heading h2 { font-size: clamp(64px, 14vw, 95px); }
  .section-heading > p { font-size: 13px; }

  .layer-main {
    padding: 0 5%;
    grid-template-columns: 45px 1fr 120px;
    min-height: 115px;
  }

  .layer-number {
    font-size: 10px;
    padding-top: 20px;
  }

  .layer-art { height: 110px; }
  .layer-name { font-size: 18px; }

  .detail-inner {
    margin: 0 5%;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .detail-inner .tag { padding-top: 16px; }

  .detail-inner p {
    font-size: 16px;
    padding: 10px 0 17px;
  }

  .layers-outro {
    padding: 25px 5% 60px;
    flex-wrap: wrap;
    font-size: 10px;
  }

  .layers-outro strong { font-size: 17px; }
  .layers-outro span { display: none; }

  .builder { margin: 0 5%; }

  .choice-grid { gap: 8px; }

  .choice {
    padding: 6px;
    min-height: 142px;
    border-width: 2px;
  }

  .choice-art { height: 62px; }
  .choice-name { font-size: 12px; }
  .choice-mark { font-size: 17px; }
  .choice-sub { font-size: 9px; }
  .choice-count { font-size: 9px; }
  .panel-label { font-size: 9px; }

  .preview-panel {
    min-height: 420px;
    padding: 15px;
  }

  .preview-stage { min-height: 300px; }

  .preview-art {
    height: 240px;
    bottom: 0;
  }

  .preview-caption h3 { font-size: 27px; }

  /* 仪式区改为单栏 */
  .story-section {
    grid-template-columns: 1fr;
    padding: 70px 5%;
    gap: 40px;
  }

  .story-intro h2 { font-size: 65px; }

  .story-intro blockquote {
    margin-top: 26px;
    font-size: 20px;
  }

  .steps li {
    grid-template-columns: 110px 1fr;
    gap: 12px;
  }

  .site-footer {
    padding: 30px 5%;
    flex-wrap: wrap;
  }

  .site-footer p {
    order: 3;
    width: 100%;
  }
}


.builder { grid-template-columns: 1fr; gap: 28px; }
.preview-panel { order: 1; }
.choice-panel { order: 2; }
.preview-stage { min-height: 455px; display: grid; place-items: center; }

.preview-art { position: relative; inset: auto; width: min(100%,490px); height: auto; margin: 6px auto; }
.bowl-composite { display: block; width: 100%; height: auto; }

.bowl-topping { opacity: 1; }
.choice-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.choice { --tile: #fff3cc; --tile-ink: #202a20; position: relative; min-height: 235px; padding: 16px; background: var(--tile); color: var(--tile-ink); border: 3px solid transparent;  }
.choice-count { font-size: 14px; }
.choice-art { display: block; width: 100%; height: 148px; margin: auto 0; object-fit: contain; order: 1; }
.choice-name { order: 2; font-size: 21px; }
.choice-sub { order: 3; }
.choice-noodles { grid-column: 1/-1; min-height: 155px; }
.choice-noodles .choice-art { max-width: 260px; height: 90px; }
.choice-noodles .choice-name { max-width: 260px; }
.choice-beef { --tile: #f3cad7; }
.choice-egg { --tile: #f0442c; --tile-ink: #fff3cc; }
.choice-scallion { --tile: #e8efcf; }
.choice-garlic { --tile: #334ae1; --tile-ink: #fff3cc; }
.choice-chili { --tile: #f2c52b; }
.choice-green-pepper { --tile: #cfe0d0; }
.choice-fungus { --tile: #e5ad8f; }
.choice-pork { --tile: #f6dfc0; }
@media (max-width:850px) { .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .preview-stage { min-height: 375px; } }
@media (max-width:480px) { .choice { min-height: 170px; padding: 11px; } .choice-art { height: 95px; } .choice-noodles { min-height: 130px; } .choice-name { font-size: 15px; } .preview-stage { min-height: 300px; } .preview-art { width: min(100%,340px); height: auto; } }

/* 九个码子 */
.builder {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(18px, 2.5vw, 36px);
}
.choice-panel {
  order: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.preview-panel {
  order: 2;
  min-width: 0;
  height: 100%;
}
.choice-grid {
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 1vw, 15px);
}
.choice,
.choice-noodles {
  grid-column: auto;
  min-height: 180px;
  padding: clamp(8px, 1vw, 14px);
}
.choice-art,
.choice-noodles .choice-art {
  width: 100%;
  max-width: none;
  height: clamp(74px, 8vw, 115px);
  margin: auto 0;
}
.choice-noodles .choice-name { max-width: none; }
.preview-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}
.preview-art { width: min(100%, 540px); }
@media (max-width: 800px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .preview-panel { order: 1; height: auto; }
  .choice-panel { order: 2; }
  .preview-stage { min-height: 350px; }
  .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .choice-grid { gap: 7px; }
  .choice,
  .choice-noodles { min-height: 143px; padding: 7px; }
  .choice-art,
  .choice-noodles .choice-art { height: 65px; }
  .choice-name { font-size: 13px; }
  .choice-count { font-size: 11px; }
  .choice-sub { font-size: 9px; }
  .preview-stage { min-height: 300px; }
  .preview-art { width: min(100%, 340px); }
}