/* PAPA BEAR'S D 版 · 杂志编辑风 + 全量内容 + 品牌图标 + 图片密集
   基因来自 C 版（细线分组、留白、出血、字号分级），补回 A 版全部内容点与图标系统 */

:root {
  /* 中英混排栈：英文数字用衬线（杂志味），中文接黑体，
     不让它 fallback 到 serif 变成宋体 */
  --f-mix: "Times New Roman", Georgia, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-en: "Times New Roman", Georgia, serif;   /* 纯英文/纯数字专用 */
  --sand: #efdcc0;
  --sand-deep: #e5cba3;
  --sand-pale: #f8f1e5;
  --paper: #fbf7f0;
  --brown: #7d5f36;
  --gold: #b08b4f;                 /* 装饰用：线、边框、大字，不用于小号正文 */
  --gold-ink: #765d35;             /* 小号金字专用：对 sand 4.63:1 / paper 5.81:1，过 WCAG AA */
  --gold-mid: #997945;             /* ≥24px 大字用：对 sand 3.03:1 / paper 3.80:1 */
  --red: #c8202b;
  --orange: #d1741a;
  --yellow: #b8931e;
  --ink: #201a13;
  --ink-mid: #6d6152;
  --rule: rgba(32, 26, 19, 0.16);
  --gut: clamp(20px, 5vw, 96px);

  /* 间距刻度：所有垂直间距从这里取值，不各写各的。
     层级要拉开——同一档内严格一致，相邻档之间约 1.5~2 倍。 */
  --s-tight: 5px;    /* 标题与紧随其后的附属小字 */
  --s-label: 9px;    /* 小标题 → 说明文字（组内最紧的一层） */
  --s-para: 18px;    /* 正文段落之间 */
  --s-block: 30px;   /* 标题组 → 正文组 */
  --s-group: 46px;   /* 小组之间 */
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px; line-height: 1.85; -webkit-font-smoothing: antialiased;
}
/* height:auto 必须有：img 的 width/height 属性会当表现层提示映射成 CSS height，
   凡是 CSS 没显式设高的图会被钉成原生像素高（酱料图曾被钉成 1686px 撑爆分页）。
   表现层提示优先级为 0，任何带类名的 height 规则都盖得住它，所以不影响定高的图。 */
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1.1em; }

/* ===== 品牌图标 =====
   原 12 格雪碧图每格内的图形位置和尺寸都不一致（偏移最大达格子 13%），
   已切成独立文件并按长边归一化居中，见 assets/generated/icons/。
   染成棕金：原图绿色不在品牌色系内。 */
.ic {
  display: block; flex: none;
  width: clamp(38px, 3.4vw, 54px); height: clamp(38px, 3.4vw, 54px);
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
  filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.78) contrast(1.15);
}
.ic-heart { background-image: url("assets/generated/icons/heart.webp"); }
.ic-dumpling { background-image: url("assets/generated/icons/dumpling.webp"); }
.ic-medal { background-image: url("assets/generated/icons/medal.webp"); }
.ic-people { background-image: url("assets/generated/icons/people.webp"); }
.ic-kitchen { background-image: url("assets/generated/icons/kitchen.webp"); }
.ic-ingredients { background-image: url("assets/generated/icons/ingredients.webp"); }
.ic-box { background-image: url("assets/generated/icons/box.webp"); }
.ic-bowl { background-image: url("assets/generated/icons/bowl.webp"); }
.ic-noodles { background-image: url("assets/generated/icons/noodles.webp"); }
.ic-sign { background-image: url("assets/generated/icons/sign.webp"); }
.ic-table { background-image: url("assets/generated/icons/table.webp"); }
.ic-bag { background-image: url("assets/generated/icons/bag.webp"); }
/* 反白场景（深底/红底）用亮色图标 */
.on-dark .ic {
  filter: grayscale(1) sepia(1) saturate(1.4) hue-rotate(-6deg) brightness(2.1) contrast(.9);
}

/* ===== 通用排版件 ===== */
.folio {
  font-family: var(--f-mix);
  font-size: 12px; letter-spacing: 0.34em; color: var(--gold); text-transform: uppercase;
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 clamp(18px, 3vw, 38px);
}
.folio b { font-weight: 400; color: var(--ink); letter-spacing: 0.2em; }
.folio::before {
  content: ""; width: clamp(28px, 5vw, 70px); height: 1px;
  background: var(--gold); flex: none; transform: translateY(-4px);
}
.display {
  font-size: clamp(27px, 3.6vw, 54px);
  font-weight: 900; line-height: 1.14; letter-spacing: -0.02em; margin: 0;
}
.display-serif { font-family: var(--f-mix); font-weight: 700; letter-spacing: -0.01em; }
.lede { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.9; color: var(--ink-mid); }
section { padding: clamp(56px, 8vw, 118px) 0; }
.shell { width: min(1280px, calc(100% - var(--gut) * 2)); margin: 0 auto; }

/* ===== 报头 ===== */
.masthead {
  display: flex; align-items: center; gap: 18px;
  padding: 16px var(--gut) 13px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,247,240,.94); backdrop-filter: blur(10px);
}
.masthead > img { height: 30px; width: auto; }
.masthead .issue { font-family: var(--f-mix); font-size: 12px; letter-spacing: 0.2em; color: var(--gold); }
.masthead nav { margin-left: auto; display: flex; gap: clamp(10px, 1.7vw, 26px); }
.masthead nav a {
  color: var(--ink); text-decoration: none; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--f-mix);
}
.masthead nav a:hover { color: var(--red); }
/* 回集团首页：品牌页原本是死胡同，只有页脚有出口，BOB 反馈「找不到入口」 */
.masthead nav a.home {
  color: var(--brown); position: relative; padding-right: 14px; margin-right: 4px;
}
.masthead nav a.home::after {
  content: "↗"; position: absolute; right: 0; top: -1px; font-size: 10px; opacity: .7;
}
.masthead nav a.home::before {
  content: ""; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--rule);
}
@media (max-width: 620px) { .masthead nav a.home::before { display: none; } }
@media print { .masthead nav a.home { display: none; } }
/* 语言切换 */
.masthead .lang {
  margin-left: 14px; flex: none; text-decoration: none;
  border: 1px solid var(--gold); border-radius: 999px;
  padding: 5px 14px; font-size: 12px; letter-spacing: 0.1em;
  color: var(--brown); font-family: var(--f-mix);
}
.masthead .lang:hover { background: var(--gold); color: #fff; }

/* 英文页：马来文并列会变成两串拉丁字母难分辨，改作次级小字另起一行 */
html[lang="en"] .cover-type .kicker em,
html[lang="en"] .cover-type .strap em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: .82em; letter-spacing: 0.14em; color: rgba(255,255,255,.56);
}
html[lang="en"] .cover-type .kicker em::before,
html[lang="en"] .cover-type .strap em::before { content: none; }

/* ===== 1 封面 ===== */
.cover { position: relative; padding: 0; }
/* 顶部对齐：门头招牌必须完整露出（首屏红线），同时把画面底部的地面切掉 */
.cover-bg { width: 100%; height: min(92vh, 1020px, 71vw); object-fit: cover; object-position: center 10%; }
/* 首屏是 4:3 竖构图实拍（门头在顶、白熊和明档店员在下半），原来 min(82vh,700px) 的横条只能露出门头和一片空天花板；
   92vh/1020px 才能把门头到白熊整段收进来；71vw 是不横向裁的上限（图宽高比 1.404，框高超过 0.712×框宽就会左右切掉门头），
   平板 828 宽时正是它在起作用。
   纵向用 10% 不用 top：内容带（门头顶 5.6% → 现包窗口店员底 74.3%）占 68.7%，
   1920 宽时纵向只能看到 72.6%，贴顶对齐会把店员切掉；往下挪 10% 两头都留得住。
   纵向不溢出的视口上这个值不产生任何位移。 */
.cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,15,9,.34) 0%, rgba(20,15,9,0) 30%,
    rgba(20,15,9,.30) 56%, rgba(20,15,9,.72) 82%, rgba(20,15,9,.88) 100%);
}
.cover-type {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(26px, 4.4vw, 58px);
  z-index: 2; color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-block) 24px;
}
.cover-type h1 {
  margin: 0; font-family: var(--f-en);
  font-size: clamp(40px, 8.6vw, 126px); font-weight: 700; line-height: .92; letter-spacing: -0.015em;
}
/* 首屏三段式：眉题回答"你是谁"，品牌名，副题回答"卖什么" */
.cover-type .kicker {
  margin: 0 0 var(--s-tight); font-size: clamp(12.5px, 1.3vw, 16px); letter-spacing: 0.1em;
  text-transform: uppercase; font-family: var(--f-mix); color: rgba(255,255,255,.76);
}
.cover-type .strap {
  margin: var(--s-tight) 0 0; font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.18em;
  text-transform: uppercase; font-family: var(--f-mix); color: rgba(255,255,255,.9);
}
.cover-type .strap em { font-style: normal; }
.cover-type .strap em::before { content: " · "; }
.cover-type .price { text-align: right; font-family: var(--f-mix); }
.cover-type .price b { display: block; font-size: clamp(28px, 4.2vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.cover-type .price span { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-top: 6px; }

/* ===== 2 三条锚点（图标 + 细线三栏） ===== */
.anchors { padding: 0; border-bottom: 1px solid var(--rule); background: var(--sand-pale); }
.anchors .shell { display: grid; grid-template-columns: repeat(3, 1fr); }
/* 分隔线放在左侧并留出内边距，避免竖线贴住下一栏的图标 */
.anchors article {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-label) 16px; align-items: start;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 38px);
  border-left: 1px solid var(--rule);
}
.anchors article:first-child { border-left: 0; padding-left: 0; }
.anchors h3 { margin: 0 0 var(--s-label); font-size: 16px; font-weight: 800; }
.anchors p { margin: 0; font-size: 13.5px; color: var(--ink-mid); line-height: 1.65; }

/* ===== 3 开篇：引言 + 正文 + 三张产品图 ===== */
.opener-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
  gap: var(--s-group) clamp(24px, 5vw, 88px); align-items: start;
}
.opener blockquote {
  margin: 0; font-family: var(--f-mix); font-weight: 800;
  font-size: clamp(24px, 3.2vw, 44px); line-height: 1.32; letter-spacing: -0.01em;
}
.opener .body { max-width: 54ch; }
.badge {
  display: inline-block; margin-top: 22px; padding-top: 16px;
  border-top: 2px solid var(--gold);
}
.badge-kicker {
  display: block; font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--ink-mid); margin-bottom: 6px;
}
.badge strong {
  display: block; font-family: var(--f-mix);
  font-size: clamp(19px, 2.1vw, 27px); font-weight: 700; letter-spacing: 0.06em; color: var(--brown);
}
.badge em { display: block; font-style: normal; font-size: 12.5px; color: var(--gold-ink); letter-spacing: 0.08em; margin-top: 3px; }
/* 图注：压在图底部的浅色小字，杂志图说风格 */
.cap-fig { margin: 0; position: relative; }
.cap-fig img { width: 100%; height: 100%; object-fit: cover; }
.cap-fig figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 30px 16px 12px; color: #fff;
  font-family: var(--f-mix); font-size: 12px; letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(20,15,9,0), rgba(20,15,9,.74));
}
/* 开篇左栏：引言下接竖幅图，填掉长栏空白 */
.opener-quote-fig { margin-top: clamp(26px, 3.4vw, 44px); }
.opener-quote-fig img { aspect-ratio: 3 / 4; }
.opener-wide { margin-top: clamp(24px, 3vw, 40px); }
/* IP 插画按原比例整幅出，不能像照片那样 cover 裁——裁了会切到熊 */
.opener-wide img { aspect-ratio: 27 / 20; object-fit: contain; }
/* 插画左下是浅米色，压在上面的白字看不清；字幕改到图外、用深色 */
.opener-ip figcaption {
  position: static; padding: 12px 0 0; background: none;
  color: var(--gold); letter-spacing: 0.1em; font-size: 12.7px;
}

/* ===== 4 承诺：宣言图文 + 悬挂序号清单 ===== */
/* 这张店内全景里白熊在画面 20%–31% 处，靠左。窄版位时 object-fit:cover 居中裁
   会把熊整个切掉——熊是这一段的主体，必须始终在框内。定位到 24% 让裁切窗口
   围着熊走；实测覆盖桌面/平板/手机/A4印刷四档都留得住。 */
#creed .manifesto figure img { object-position: 24% center; }
.creed { background: var(--sand-pale); }
.manifesto {
  display: grid; grid-template-columns: 0.78fr 1fr; gap: var(--s-group) clamp(24px, 4vw, 66px);
  align-items: center; margin-bottom: clamp(34px, 4.6vw, 66px);
}
.manifesto figure { margin: 0; }
.manifesto figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.manifesto .say {
  font-family: var(--f-mix); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 var(--s-tight);
}
.manifesto h2 { margin-bottom: var(--s-block); }
.manifesto .lede { margin-bottom: 0; }
.creed-item {
  display: grid; grid-template-columns: auto clamp(64px, 7vw, 120px) minmax(0,1fr) minmax(0,1.4fr);
  gap: var(--s-label) clamp(14px, 2.4vw, 40px); padding: clamp(20px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--rule); align-items: center;
}
.creed-item:last-child { border-bottom: 1px solid var(--rule); }
.creed-item .n {
  font-family: var(--f-mix); font-size: clamp(30px, 4vw, 62px);
  color: var(--gold-mid); line-height: .9; letter-spacing: -0.02em;
}
.creed-item h3 { margin: 0; font-size: clamp(18px, 1.9vw, 25px); font-weight: 800; line-height: 1.3; }
.creed-item p { margin: 0; color: var(--ink-mid); font-size: 14px; }

/* ===== 5 好肉好面：超大字 + 出血图 + 文化墙 + 四条 ===== */
.tenet { background: var(--sand); padding-left: var(--gut); }
.tenet-top { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: var(--s-group) clamp(24px, 4vw, 66px); }
.tenet-type h2 {
  margin: 0; font-size: clamp(42px, 6.2vw, 90px); font-weight: 900;
  line-height: 1.0; letter-spacing: -0.035em; color: var(--brown);
}
.tenet-type .malay {
  margin: var(--s-tight) 0 0; font-family: var(--f-mix);
  font-size: clamp(13px, 1.35vw, 18px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink);
}
.tenet-type .note { margin: var(--s-block) 0 0; max-width: 40ch; color: #6a5433; }
.tenet-type .note + .note { margin-top: var(--s-para); }
.tenet-figure img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.tenet-notes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: clamp(28px, 3.4vw, 46px) var(--gut) 0 0;
  border-top: 1px solid rgba(125,95,54,.3);
}
/* 同上：线在左侧 + 左内边距，图标不被竖线贴住 */
.tenet-notes > div {
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.1vw, 32px) 0 clamp(18px, 2.1vw, 32px);
  border-left: 1px solid rgba(125,95,54,.3);
}
.tenet-notes > div:first-child { border-left: 0; padding-left: 0; }
.tenet-notes .ic { margin-bottom: 12px; }
.tenet-notes span {
  display: block; font-family: var(--f-mix); font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px;
}
.tenet-notes h4 { margin: 0 0 var(--s-label); font-size: 15.5px; font-weight: 800; line-height: 1.45; }
.tenet-notes p { margin: 0; font-size: 13px; color: #6a5433; line-height: 1.7; }

/* ===== 6 明档：出血大图压字 + 双图并置 ===== */
.kitchen { padding: 0; }
.kitchen-hero { position: relative; }
.kitchen-hero > img { width: 100%; height: min(72vh, 620px); object-fit: cover; }
.kitchen-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,15,9,.82) 0%, rgba(20,15,9,.52) 52%, rgba(20,15,9,.12) 82%);
}
.kitchen-type {
  position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%);
  z-index: 2; color: #fff; max-width: min(600px, 64vw);
}
.kitchen-type .folio { color: rgba(255,255,255,.72); }
.kitchen-type .folio b { color: #fff; }
.kitchen-type .folio::before { background: rgba(255,255,255,.55); }
.kitchen-type h2 { color: #fff; margin-bottom: 8px; }
.kitchen-type .bm {
  font-family: var(--f-mix); font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.86); margin: 0 0 18px;
}
.kitchen-type ol { margin: 0; padding: 0; list-style: none; }
.kitchen-type li {
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.24);
  display: grid; grid-template-columns: auto 40px 1fr; gap: var(--s-tight) 12px; align-items: center;
}
.kitchen-type li > b {
  font-family: var(--f-mix); font-weight: 400;
  color: rgba(255,255,255,.66); font-size: 15px; letter-spacing: 0.1em;
}
.kitchen-type li strong { font-weight: 800; }
.kitchen-type li em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: rgba(255,255,255,1); line-height: 1.6; }
.kitchen-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.kitchen-pair figure { margin: 0; position: relative; }
.kitchen-pair img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kitchen-pair figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 12px; color: #fff;
  font-family: var(--f-mix); font-size: 12px; letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(20,15,9,0), rgba(20,15,9,.76));
}

/* ===== 7 菜单：导语大图 + 细线价目 + 招牌三图 ===== */
.bill-intro {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-group) clamp(24px, 4vw, 62px);
  align-items: end; margin-bottom: clamp(30px, 4vw, 54px);
}
.bill-intro figure { margin: 0; }
.bill-intro img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.howto {
  border-top: 2px solid var(--ink); padding-top: 18px;
}
.howto b { display: block; font-size: 16px; margin-bottom: 6px; }
.howto .rule {
  font-family: var(--f-mix); font-size: 13px;
  letter-spacing: 0.08em; color: var(--brown); margin: 0 0 10px;
}
.howto p { margin: 0; font-size: 14px; color: var(--ink-mid); }
.bill-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 5vw, 88px); }
.dish {
  display: block;
  padding: clamp(14px, 1.6vw, 21px) 0; border-top: 1px solid var(--rule);
}

.dish .name { font-size: clamp(15.5px, 1.45vw, 18px); font-weight: 800; }
.dish .name i {
  font-style: normal; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-left: 9px; vertical-align: 2px; font-family: var(--f-mix);
}
.dish .name i.hot { color: var(--red); }
.dish .name i.sig { color: var(--orange); }
.dish .name i.kid { color: var(--yellow); }
.dish .desc { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-mid); line-height: 1.7; max-width: 46ch; }
.dish .name .unit {
  font-style: normal; font-family: var(--f-mix); font-size: .78em;
  font-weight: 400; letter-spacing: 0.04em; color: var(--ink-mid);
}
.dish .rm {
  font-family: var(--f-mix); font-size: clamp(16.5px, 1.6vw, 21px);
  font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}
/* 菜单分类小标题：跨双栏，粗字加顶线 */
.bill-cat {
  grid-column: 1 / -1;
  margin-top: var(--s-block);
  padding: 10px 0 4px;
  border-top: 2px solid var(--ink);
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em;
}
.bill-cols > .bill-cat:first-child { margin-top: 0; }
.dish .rm small {
  font-size: .62em; font-weight: 400; letter-spacing: 0.04em;
  color: var(--ink-mid); margin-left: 2px;
}
.bill-foot {
  margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(18px, 2.6vw, 40px);
  font-family: var(--f-mix); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown);
}
.bill-foot .ic { width: 28px; height: 28px; }
/* ===== 8 价格跨页 ===== */
.figure-spread { background: var(--ink); color: var(--sand-pale); text-align: center; }
.figure-spread .folio { justify-content: center; color: rgba(239,220,192,.6); }
.figure-spread .folio b { color: var(--sand-pale); }
.figure-spread .folio::before { background: rgba(239,220,192,.45); }
.figure-spread .n {
  font-family: var(--f-en); font-size: clamp(80px, 18vw, 270px);
  font-weight: 400; line-height: .82; letter-spacing: -0.05em; margin: 0;
}
.figure-spread .n sup { font-size: .26em; vertical-align: .72em; letter-spacing: 0; margin-right: .06em; }
.figure-spread .cap {
  margin: 20px 0 0; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: 0.14em;
  text-transform: uppercase; font-family: var(--f-mix); color: rgba(239,220,192,.72);
}
.figure-spread .strip {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 3.4vw, 46px);
}
.figure-spread .strip div { display: grid; justify-items: center; gap: var(--s-tight); }
.figure-spread .strip span { font-size: 12.5px; letter-spacing: 0.1em; color: rgba(239,220,192,.8); }

/* ===== 9 酱料：品牌红 + 拼盘图 + 编号清单 ===== */
.sauce { background: var(--red); color: #fff; }
.sauce .folio { color: rgba(255,255,255,.7); }
.sauce .folio b { color: #fff; }
.sauce .folio::before { background: rgba(255,255,255,.55); }
.sauce h2 { color: #fff; margin: 0 0 6px; }
.sauce .bm { margin: 0 0 clamp(26px, 3.4vw, 46px); color: rgba(255,255,255,.8); font-size: 15px; }
.sauce-layout { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--s-group) clamp(24px, 4vw, 70px); align-items: start; }
.sauce-layout figure { margin: 0; }
.sauce-layout img { width: 100%; object-fit: cover; }
.sauce-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 46px); }
.sauce-list > div {
  display: grid; grid-template-columns: 38px 1fr; gap: var(--s-tight) 12px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.26);
}
.sauce-list b { font-family: var(--f-mix); font-weight: 400; color: rgba(255,255,255,.62); letter-spacing: 0.1em; }
.sauce-list strong { display: block; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.sauce-list em { display: block; font-style: normal; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.6; }

/* ===== 10 外带：图文分栏 + 图标清单 ===== */
.takeaway { background: var(--sand-pale); padding: 0; }
.takeaway-grid { display: grid; grid-template-columns: 1fr 1.12fr; align-items: center; gap: var(--s-group) clamp(24px, 4vw, 74px); padding-right: var(--gut); }
.takeaway-grid > figure { margin: 0; align-self: stretch; }
.takeaway-grid > figure img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.takeaway-type { padding: clamp(52px, 7vw, 104px) 0; }
.takeaway-type h2 { margin: 0 0 clamp(22px, 2.8vw, 38px); }
.takeaway-list > div {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-label) 16px; align-items: start;
  padding: 15px 0; border-top: 1px solid var(--rule);
}
.takeaway-list h3 { margin: 0 0 var(--s-label); font-size: 17px; font-weight: 800; }
.takeaway-list p { margin: 0; font-size: 14px; color: var(--ink-mid); }

/* ===== 11 门店空间：出血 + 双图 ===== */
.space { padding: 0; }
.space-hero { position: relative; }
.space-hero > img { width: 100%; height: min(56vh, 460px); object-fit: cover; }
.space-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,15,9,.76) 0%, rgba(20,15,9,.26) 58%, rgba(20,15,9,.06) 100%);
}
.space-type {
  position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%);
  z-index: 2; color: #fff; max-width: min(470px, 66vw);
}
.space-type h2 { color: #fff; margin: 0 0 10px; }
.space-type p { margin: 0; color: rgba(255,255,255,.86); }
.space-full img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ===== 页脚 ===== */
/* 刊尾：深墨底收束全页，与价格跨页呼应 */
.colophon {
  background: var(--ink); color: var(--sand-pale);
  padding: clamp(48px, 6.4vw, 96px) 0 clamp(28px, 3vw, 42px);
  border-top: 4px solid var(--gold);
}
.colophon-top {
  display: grid; grid-template-columns: 0.85fr 1.9fr;
  gap: var(--s-group) clamp(28px, 4.6vw, 78px); align-items: start;
}
/* 定高 + width:auto 会被全局 img{max-width:100%} 反过来卡住宽度：容器一窄，
   宽被截到容器宽而高不变，logo 就横向压扁（A4 印刷版实测压扁 22%，熊头变椭圆）。
   加 object-fit 兜底：容器不够宽时等比缩小，绝不拉伸。 */
.colophon-brand img {
  height: clamp(52px, 5vw, 74px); width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.colophon-brand .tagline {
  margin: 18px 0 0; font-size: 15px; font-weight: 700; color: var(--sand-pale);
}
.colophon-brand .tagline em {
  display: block; font-style: normal; margin-top: 5px;
  font-family: var(--f-mix); font-size: 12px;
  letter-spacing: 0.14em; color: var(--gold);
}
.colophon-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-group) clamp(18px, 2.4vw, 40px);
}
.colophon-cols h4 {
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(239,220,192,.24);
  font-family: var(--f-mix); font-weight: 400;
  font-size: 12px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase;
}
.colophon-cols p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.85; color: rgba(248,241,229,.84); }
.colophon-cols p.bm {
  font-family: var(--f-mix); font-size: 12px;
  letter-spacing: 0.1em; color: rgba(239,220,192,.66); margin-bottom: 0;
}
.colophon-cols ul { margin: 0; padding: 0; list-style: none; }
.colophon-cols li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-tight) 12px; align-items: center;
  padding: 7px 0; font-size: 13.5px; color: rgba(248,241,229,.84);
}
.colophon-cols li .ic { width: 30px; height: 30px; }
.colophon-rule {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px;
  margin-top: clamp(34px, 4.4vw, 62px); padding-top: 20px;
  border-top: 1px solid rgba(239,220,192,.24);
}
.colophon-rule strong {
  font-family: var(--f-en); font-weight: 700;
  font-size: clamp(18px, 2.2vw, 28px); letter-spacing: 0.08em; color: var(--sand-pale);
}
.colophon-rule span { font-size: 12.5px; letter-spacing: 0.08em; color: var(--gold); }
/* 回母站的导航链接，推到这一行的右端；印刷版没有点击行为，隐藏 */
.colophon-rule .parent-site {
  margin-left: auto; font-family: var(--f-mix); font-size: 12.5px;
  letter-spacing: 0.1em; color: rgba(239,220,192,.62); text-decoration: none;
  border-bottom: 1px solid rgba(239,220,192,.28); padding-bottom: 2px;
}
.colophon-rule .parent-site:hover { color: var(--sand-pale); border-bottom-color: var(--gold); }
@media (max-width: 620px) { .colophon-rule .parent-site { margin-left: 0; } }
@media print { .colophon-rule .parent-site { display: none; } }
.colophon-legal {
  margin: 14px 0 0; font-size: 11.5px; letter-spacing: 0.06em;
  color: rgba(239,220,192,.42);
}

/* ===== 响应式 ===== */
@media (max-width: 980px) {
  /* 窄屏隐藏锚点导航，但回集团入口留着：手机上原本只有页脚有出口，等于没有 */
  .masthead nav { display: contents; }
  .masthead nav a { display: none; }
  .masthead nav a.home { display: inline-block; margin-left: auto; font-size: 11px; padding-right: 12px; }
  /* 报头四件（Logo、门店名、回集团、语言）在 390 宽一行排不下，允许换行 */
  .masthead { flex-wrap: wrap; row-gap: 8px; gap: 12px; }
  .masthead .issue { font-size: 11px; letter-spacing: 0.14em; }
  .masthead nav a.home::before { display: none; }
  .cover-type { grid-template-columns: 1fr; align-items: start; }
  .cover-type .price { text-align: left; }
  .anchors .shell { grid-template-columns: 1fr; }
  .anchors article { border-left: 0; border-top: 1px solid var(--rule); padding: clamp(20px,4vw,28px) 0; }
  /* 只去掉顶边线，保留顶部内边距——否则第一条会紧贴封面图底边 */
  .anchors article:first-child { border-top: 0; }
  .opener-grid { grid-template-columns: 1fr; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto figure img { aspect-ratio: 16 / 10; }
  /* 窄屏描述换到第二行：标题贴行底，抵消图标撑高造成的多余 7px，
     让"标题→描述"和全站其他同类关系一样是 9px */
  .creed-item { grid-template-columns: auto clamp(48px, 9vw, 70px) 1fr; }
  .creed-item h3 { align-self: end; }
  .creed-item p { grid-column: 3; }
  .tenet { padding-right: var(--gut); }
  .tenet-top { grid-template-columns: 1fr; }
  .tenet-figure img { min-height: 250px; }
  .tenet-notes { margin-right: 0; }
  .tenet-notes { grid-template-columns: 1fr 1fr; }
  .tenet-notes > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .bill-intro, .bill-cols, .sauce-layout, .sauce-list { grid-template-columns: 1fr; }
  .takeaway-grid { grid-template-columns: 1fr; padding-right: 0; }
  .takeaway-type { padding: clamp(44px, 8vw, 78px) var(--gut); }
  .takeaway-grid > figure img { min-height: 300px; }
  .kitchen-pair { grid-template-columns: 1fr; }
  .colophon-top { grid-template-columns: 1fr; }
  .colophon-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  /* 窄屏用完整原片，横向只放得下约 56%；往左偏一点，把门头 logo 整个圈进来 */
  /* 窄屏首屏必须同时容下门头（原图横向 19.5–74.5%）和左边现包窗口里的店员（11.5–16.5%），
     即横向至少要覆盖 10%–76% = 图宽的 66%。横向可见比例 = 框宽高比 ÷ 图宽高比(1.404)，
     反算出框高 ≤ 108vw；取 105vw 留余量。70vh 单独用不行——视口一矮框就变高、
     取景反而变窄，390×644 时只剩 61.6%，店员正好被切掉。 */
  .cover-bg { height: min(70vh, 480px, 105vw); object-position: 30% 10%; }
  /* 英文价格说明比中文长得多，窄屏收紧字距并允许折行 */
  .cover-type .price span { letter-spacing: 0.06em; }
  /* 窄屏马来文单独成行，否则 "…SETIAP HARI" 死贴右边缘 */
  .cover-type .strap em { display: block; margin-top: 3px; }
  .cover-type .strap em::before { content: none; }
  .kitchen-hero > img { height: min(78vh, 540px); }
  .kitchen-type { right: var(--gut); max-width: none; }
  /* 窄屏文字整块压在图的中亮区，横向渐变兜不住，改成整幅压暗 */
  .kitchen-hero::after { background: linear-gradient(180deg, rgba(20,15,9,.42) 0%, rgba(20,15,9,.80) 58%, rgba(20,15,9,.88) 100%); }
  .opener-quote-fig img { aspect-ratio: 16 / 10; }
  .tenet-notes { grid-template-columns: 1fr; }
  .tenet-notes > div { border-left: 0; border-top: 1px solid rgba(125,95,54,.3); padding: 18px 0 0; }
  /* 同上：只去重复的边线，内边距要留，否则内容贴住容器顶边线 */
  .tenet-notes > div:first-child { border-top: 0; }
  .creed-item { grid-template-columns: auto 1fr; gap: var(--s-label) 12px; }
  .creed-item .n { grid-column: 2; font-size: 26px; }
  .creed-item p { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .colophon-cols { grid-template-columns: 1fr; gap: var(--s-group); }
}
/* ── 招牌水饺图带（bill 区顶部，真实产品图） ───────────────── */
.dish-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 水饺 4 款（2026-08-14 版），一款一格 */
  gap: clamp(12px, 1.6vw, 26px);
  margin: var(--s-group) 0 var(--s-block);
  padding-bottom: 4px;
}
.dish-strip figure {
  margin: 0;
  text-align: center;
}
.dish-strip .shot {
  background: var(--sand-pale);
  border-radius: 3px;
  padding: 14px 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
}
.dish-strip img {
  width: 100%;
  height: auto;
  display: block;
}
.dish-strip figcaption {
  margin-top: 10px;
  line-height: 1.35;
}
.dish-strip .dn {
  display: block;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 800;
  color: var(--ink);
}
.dish-strip .dp {
  display: block;
  margin-top: 3px;
  font-family: var(--f-en);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--brown);
}
.dish-strip .dn i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  margin-left: 4px;
}
@media (max-width: 900px) {
  .dish-strip { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
}
@media (max-width: 560px) {
  .dish-strip { grid-template-columns: repeat(2, 1fr); }
  .dish-strip .shot { min-height: 96px; }
}

/* 页脚合作联系人：口径与 narrowgateglobal.com 一致，Marc 为主 */
.colophon-contact strong {
  display: block; font-size: 14.5px; font-weight: 800; color: var(--sand-pale);
  letter-spacing: 0.01em;
}
.colophon-contact strong i {
  font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--gold); margin-left: 6px; vertical-align: 1px;
}
.colophon-contact .role {
  margin: 2px 0 5px; font-size: 12.5px; line-height: 1.5;
  color: rgba(248,241,229,.62);
}
.colophon-contact a {
  display: inline-block; word-break: break-all;
  font-family: var(--f-mix); font-size: 12.5px; line-height: 1.5;
  color: rgba(248,241,229,.88); text-decoration: none;
  border-bottom: 1px solid rgba(248,241,229,.28); padding-bottom: 1px;
}
.colophon-contact a:hover { color: #fff; border-bottom-color: rgba(248,241,229,.7); }
.colophon-contact .person.second { margin-top: 16px; }


/* ============================================================
   打印 / PDF 版面（品牌手册）
   屏幕响应式的逻辑是"窄了就单栏，方便拇指滚动"；
   PDF 是固定版面的小开本，逻辑是"版面内多栏并置，眼睛扫视"。
   两套逻辑在 800px 撞车，所以这里整体绕开屏幕断点重新定版。
   A4 宽 210mm ≈ 794 CSS px，正是导出时的版面宽度。
   ============================================================ */
@media print {
  @page { size: 210mm 297mm; margin: 0; }

  :root {
    --gut: 46px;              /* 版心左右边距，约 12mm */
    /* A4 内容高 1123px（297mm @96dpi）。留 23px 余量：多 1px 就会溢出，
       Chrome 立刻多排一整张空白页。--pg-inner 再扣掉 section 上下各 40px 内边距。 */
    --pg-full: 1100px;
    --pg-inner: 1020px;
  }

  html, body {
    background: var(--paper) !important;
    font-size: 16.5px; line-height: 1.78;
  }
  /* 深色段落和图片在打印时必须保留原色 */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .masthead { display: none !important; }        /* 手册不需要导航 */

  .shell { width: calc(100% - var(--gut) * 2); max-width: none; }
  section { padding: 40px 0; }

  /* ---- 字号按 A4 版面重新定标，不用 vw ---- */
  .display { font-size: 33px; line-height: 1.18; }
  .lede { font-size: 16.5px; line-height: 1.78; }
  .folio { font-size: 13px; letter-spacing: 0.26em; margin-bottom: 16px; }
  .folio::before { width: 34px; }

  /* ---- 恢复多栏：按 800px 版面重新分配，不是照搬桌面 ---- */
  .anchors .shell { grid-template-columns: repeat(3, 1fr) !important; }
  .anchors article {
    border-left: 1px solid var(--rule) !important; border-top: 0 !important;
    padding: 18px 14px !important;
  }
  .anchors article:first-child { border-left: 0 !important; padding-left: 0 !important; }
  .anchors h3 { font-size: 15.5px; }
  .anchors p { font-size: 13.5px; line-height: 1.55; }
  .anchors .ic { width: 30px; height: 30px; }

  .opener-grid { grid-template-columns: 1fr 1.35fr !important; gap: 30px !important; }
  .opener blockquote { font-size: 26px; line-height: 1.3; }
  .opener .body { max-width: none; }
  .opener-quote-fig { margin-top: 22px; }

  .manifesto { grid-template-columns: 0.8fr 1fr !important; gap: 28px !important; }
  .manifesto figure img { aspect-ratio: 1 / 1; }
  .creed-item {
    grid-template-columns: auto 54px 1fr 1.35fr !important; gap: 16px !important;
    padding: 16px 0 !important;
  }
  .creed-item .n { font-size: 30px; }
  .creed-item h3 { font-size: 18px; }
  .creed-item p { font-size: 14.5px; grid-column: auto !important; }
  /* A4 版心 793px 会命中 max-width:980px 那条窄屏规则，它把标题贴到格子底部
     （窄屏是三栏、描述换第二行，贴底是对的）。印刷段还原了四栏栅格却漏了
     还原对齐，结果标题比序号低 14px——PDF 里看就是序号和标题错开半行。 */
  .creed-item h3 { align-self: center !important; }
  .creed-item .ic { width: 32px; height: 32px; }

  .tenet-top { grid-template-columns: 1.05fr 1fr !important; gap: 28px !important; }
  .tenet-type h2 { font-size: 50px; line-height: 1.02; }
  .tenet-type .malay { font-size: 13.5px; }
  .tenet-type .note { font-size: 14.5px; }
  .tenet-figure img { min-height: 0; height: 100%; }
  .tenet-notes { grid-template-columns: repeat(4, 1fr) !important; margin-right: 0 !important; }
  .tenet-notes > div {
    border-left: 1px solid rgba(125,95,54,.3) !important; border-top: 0 !important;
    padding: 16px 10px 0 10px !important;
  }
  .tenet-notes > div:first-child { border-left: 0 !important; padding-left: 0 !important; }
  .tenet-notes .ic { width: 30px; height: 30px; margin-bottom: 8px; }
  .tenet-notes span { font-size: 13px; letter-spacing: 0.1em; }
  .tenet-notes h4 { font-size: 14.5px; line-height: 1.4; }
  .tenet-notes p { font-size: 13px; line-height: 1.55; }

  .kitchen-hero > img { height: 420px; }
  /* 开篇横图加高，填掉该页底部留白 */
  .opener-wide img { aspect-ratio: 4 / 3; }
  .kitchen-type { max-width: 460px; }
  .kitchen-type li { padding: 9px 0; grid-template-columns: auto 30px 1fr; }
  .kitchen-type li strong { font-size: 15.5px; }
  .kitchen-type li em { font-size: 13.5px; }
  .kitchen-type .ic { width: 30px; height: 30px; }
  .kitchen-pair { grid-template-columns: 1fr 1fr !important; }

  /* 价目表回到双栏——手册最需要杂志感的一页 */
  .bill-intro { grid-template-columns: 1.1fr 1fr !important; gap: 28px !important; }
  /* 双栏左栏只容 10.7 字宽，33px 会把"肉，""牛。"挤成孤字行 */
  .bill-intro .display { font-size: 28px; }
  .bill-cols { grid-template-columns: 1fr 1fr !important; gap: 0 32px !important; }
  /* 价目表是 column-count 多栏容器，不肯从半页开始，只能整页起排。
        27 项（2026-08-14 版）比旧的 34 项短，若按原行距排两页会空 66%。
        字号有 9.4pt 下限不能压，改为加大行距把两页撑满。23px 是实测值。 */
  .dish { padding: 23px 0 !important; }
  .dish .name { font-size: 15.5px; }
  .dish .name i { font-size: 13px; margin-left: 6px; }
  .dish .desc { font-size: 13px; line-height: 1.5; max-width: none; }
  .dish .name .unit {
  font-style: normal; font-family: var(--f-mix); font-size: .78em;
  font-weight: 400; letter-spacing: 0.04em; color: var(--ink-mid);
}
.dish .rm { font-size: 17px; }
  .howto b { font-size: 15.5px; }
  .howto .rule, .howto p { font-size: 13.5px; }
  /* 底部服务说明条：屏幕上的 24+18px 间距会让它整条挤到第三页，
     那页就只有这两行小字（实测空 94%）。收到 14+12px 正好收进第二页。 */
  .bill-foot { font-size: 13px; margin-top: 14px !important; padding-top: 12px; }
  .bill-foot .ic { width: 22px; height: 22px; }

  .figure-spread .n { font-size: 150px; }
  .figure-spread .cap { font-size: 15px; }
  .figure-spread .strip { gap: 14px 30px; }
  .figure-spread .strip span { font-size: 13px; }
  .figure-spread .strip .ic { width: 30px; height: 30px; }

  .sauce-layout { grid-template-columns: 0.85fr 1fr !important; gap: 28px !important; }
  .sauce-list { grid-template-columns: 1fr 1fr !important; gap: 0 24px !important; }
  .sauce-list > div { padding: 9px 0; grid-template-columns: 30px 1fr; }
  .sauce-list strong { font-size: 15px; }
  .sauce-list em { font-size: 13px; line-height: 1.5; }

  .takeaway-grid { grid-template-columns: 1fr 1.1fr !important; padding-right: var(--gut) !important; }
  .takeaway-type { padding: 34px 0 !important; }
  .takeaway-grid > figure img { min-height: 0; height: 100%; }
  .takeaway-list > div { padding: 10px 0; }
  .takeaway-list h3 { font-size: 16px; }
  .takeaway-list p { font-size: 13.5px; }
  .takeaway-list .ic { width: 32px; height: 32px; }

  /* 2026-08-16 撤掉 09 那张门头效果图后（cover 与 02 已各有一张真实门头，重复），
     本页少了一块内容，末页空 36%。用餐图加高吃掉这部分——高度是实测值。 */
  .space-hero > img { height: 470px; }
  .space-full img { aspect-ratio: 21 / 9; }

  .colophon { padding: 28px 0 18px; }
  .colophon-top { grid-template-columns: 0.8fr 2fr !important; gap: 32px !important; }
  /* 印刷版版心只有 702px，4 栏每栏仅 160px，英文会被挤成 6 行、页脚撑高一整页。
     所以印刷版保持 3 栏，合作联系人独占一行横排。屏幕端 4 栏不受影响。 */
  .colophon-cols { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
  /* A4 版心 701px 按 0.8fr : 2fr 分，品牌栏只有 191px。屏幕端的 52px 高
     对应 246px 宽，装不下，会被 max-width 截宽而高不变——熊头压成椭圆。
     栅格不动（品牌栏加宽会把右边联系方式的邮箱挤溢出），改给 logo 定一个
     装得下的印刷高度：40px × 4.73 = 189px < 191px。 */
  .colophon-brand img { height: 40px; }
  .colophon-contact {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 26px;
    border-top: 1px solid rgba(248,241,229,.18); padding-top: 12px; margin-top: 4px;
  }
  .colophon-contact { display: block; }
  .colophon-contact h4 { margin: 0 0 5px; }
  /* 印刷版每人压成一行：姓名 · 职务 · 邮箱。竖排会变成 6 行，
     英文版页脚随即撑高一整页（实测 11 页 → 12 页）。 */
  .colophon-contact .person { display: block; margin: 0; }
  .colophon-contact .person + .person { margin-top: 3px; }
  .colophon-contact .person > * { display: inline; }
  .colophon-contact strong { font-size: 12.7px; }
  .colophon-contact .role { font-size: 12.7px; margin: 0; color: rgba(248,241,229,.55); }
  .colophon-contact .role::before,
  .colophon-contact .person a::before { content: " · "; color: rgba(248,241,229,.35); }
  /* 邮箱整体换行，不在词中间断开 */
  .colophon-contact a { font-size: 12.7px; border-bottom: 0; white-space: nowrap; word-break: normal; }
  .colophon-cols h4 { font-size: 13px; }
  .colophon-cols p, .colophon-cols li { font-size: 13px; }
  .colophon-cols li { padding: 5px 0; }
  .colophon-cols li .ic { width: 24px; height: 24px; }


  .colophon-rule strong { font-size: 22px; }

  /* ---- 分页控制 ----
     手册要连续流动填满版面，不是一段一页。
     只在两处强制分页：封面之后、价格跨页之前（视觉停顿点）。
     其余靠 break-inside 防止元素被拦腰截断，内容自然接续。 */
  .creed-item, .dish, .tenet-notes > div, .anchors article,
  .colophon-cols > div, .sauce-list > div, .takeaway-list > div,
  figure, .cap-fig, .manifesto, .badge { break-inside: avoid; page-break-inside: avoid; }
  /* 价格大字整块不切开，但允许接在前一段之后——强制独占一页会让
     菜单溢出的半页彻底空掉（实测空 60%） */
  .figure-spread { break-inside: avoid; page-break-inside: avoid; }
  /* 只给块级标题设 break-after；h3/h4 在 grid 里与说明文字同行不同列，
     加了 break-after 会把整条推到下一页（实测承诺页因此空 57%） */
  h2, blockquote, .folio { break-after: avoid; page-break-after: avoid; }
  section { break-inside: auto; }

  /* 封面撑满首页：A4 内容高 1123px，实测锚点条 115px，取 970px 留 38px 余量。
     这里只要多 2px，整条锚点就会被挤到第 2 页，那页随即只剩一条横带。 */
  /* 封面页 = 封面图 + 锚点条，合计不得超 1123px。英文锚点标题
     「Thin skin. Packed full. Juicy in every bite.」在三栏里折 3 行，
     锚点条从 115px 涨到 171px，970 + 171 = 1141 溢出 18px——实测会把
     锚点条整体推到第 2 页，留下一张 85% 空白页。封面图降到 945px，
     中英都要留够余量——只余 7px 太险（多 1px 就多一整张空白页）。 */
  /* 850 而非 930：印刷页宽固定 793px，横向可见 = 框宽高比 ÷ 图宽高比(1.404)，
     930 高只给到 60.8%，装不下门头+现包窗口店员需要的 66%；框高 ≤ 855 才够。
     850+锚点条 115 = 965 < 1123，封面页仍是一页。 */
  .cover-bg { height: 850px; object-position: 30% top; }   /* 居中裁会从 16.8% 起，往左挪才收得住现包窗口 */
  /* 封面图从 930 降到 850 后，封面页底部空出一条白带（中文剩 158px、英文 102px）。
     锚点条撑到固定 258px 把它吃掉：850+258=1108 < 1123，且中英同高、不用分别配。 */
  .anchors { min-height: 258px; display: flex; align-items: center; }
  /* shell 保持默认 stretch：设成 center 会让文字多的那一栏被垂直居中、图标比别栏高一截 */
  .anchors .shell { width: 100%; }
  /* 印刷态没有左右天沟，首栏图标会贴死页边；给它和其它栏一样的内边距 */
  .anchors article:first-child { padding-left: 14px; }

  /* ==========================================================
     页面配额制：一个版块 = 一页
     ----------------------------------------------------------
     不这么做的后果（实测）：版块开头都是"大标题 + 整张图"的 grid，
     整块不可切分，剩半页装不下就整体跳页，页底留下 37%~45% 的洞，
     且中英文因字长不同各跳各的，两本手册页数对不上（中 9 / 英 11）。
     强制分页后分页点与语言无关，再用 flex 把每页内容纵向摊开填满。
     ========================================================== */
  #opener, #creed, #tenet, #kitchen, #bill,
  .figure-spread, #sauce, #takeaway, .space {
    break-before: page; page-break-before: always;
  }
  /* 价目表 34 项占两页，不参与撑满。
     下内边距必须归零：内容顶到第二页页尾时，那 40px 会被挤到第三页，
     生成一张完全空白的页（实测 100% 空）。 */
  #bill { padding-bottom: 0 !important; }

  /* A 类：内容都在单个 .shell 里，分布交给 .shell */
  #opener > .shell, #creed > .shell,
  .figure-spread > .shell, #sauce > .shell {
    min-height: var(--pg-inner);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  /* B 类：section 下有多个并列块，分布交给 section 自己 */
  #tenet, #kitchen, #takeaway {
    min-height: var(--pg-full);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  /* flex 容器里 grid 子项的 stretch 会拉伸图片，明确按内容高度走 */
  #tenet > *, #kitchen > *, #takeaway > * { flex: 0 0 auto; }

  /* space-between 只适合子元素多的版块。子元素只有两三个时它不是"填满"
     而是"顶开"：用餐空间页两张图被推到一头一尾，中间空出 300px 的白洞。
     所以用餐空间页与版权页合占最后一页，靠两张图的高度调平；不用 flex 撑高
     （flex 会把图拉到 988px，反而把版权页整个挤到第 13 页）。 */
  /* 好肉好面页、明档页、承诺页同样只有两三个直接子元素，一律改成
     "图片吃掉多余高度"，而不是把上下两块推到一头一尾。 */
  /* 酱料页不用这招：那张图是 2×2 拼版，拉高后会把碗裁掉一半。
     红底大色块本身撑得住版面，留白按 space-between 均分即可。 */
  #creed .manifesto,
  #tenet .tenet-top { flex: 1 1 0; align-items: stretch !important; }
  #creed .manifesto figure,
  #tenet .tenet-figure,
  #kitchen .kitchen-hero { display: flex; flex-direction: column; }
  #kitchen .kitchen-hero { flex: 1 1 0; }
  #creed .manifesto figure img,
  #tenet .tenet-figure img,
  #kitchen .kitchen-hero > img {
    flex: 1 1 0; height: auto; min-height: 0;
    aspect-ratio: auto !important; object-fit: cover;
  }

  /* C 类：容器下只有一个子元素，space-between 无从分布（实测 opener 空 30%、
     takeaway 空 45%）。改让这个独子吃掉剩余高度，再由列内图片伸展吸收。 */
  #opener > .shell > .opener-grid,
  #takeaway > .takeaway-grid { flex: 1 1 0; align-items: stretch !important; }

  #opener .opener-grid > div { display: flex; flex-direction: column; }
  #opener .opener-grid figure { flex: 1 1 0; display: flex; flex-direction: column; min-height: 150px; }
  #opener .opener-grid figure img {
    flex: 1 1 0; height: auto; min-height: 0;
    aspect-ratio: auto !important; object-fit: cover;
  }
  /* 但 IP 插画不能参与「吃掉多余高度」：cover 一裁就切到熊的身体。
     这张按原比例整幅出，剩余高度交给同栏的照片吸收。 */
  #opener .opener-grid figure.opener-ip { flex: 0 0 auto; }
  /* 插画不再拉伸后，右栏底部会空出一块；把这栏的内容按间距摊开，
     插画落到栏底，空白变成正常的段间距。 */
  #opener .opener-grid > .body { justify-content: space-between; }
  #opener .opener-grid figure.opener-ip img {
    flex: 0 0 auto; height: auto;
    aspect-ratio: 27 / 20 !important; object-fit: contain !important;
  }

  #takeaway .takeaway-grid > figure { display: flex; flex-direction: column; }
  #takeaway .takeaway-grid > figure img { flex: 1 1 0; height: auto; min-height: 0; object-fit: cover; }

  /* 版权页不单独占页：内容只有 380px 左右，撑成整页就是一片深色空洞。
     让它接在用餐空间页后面，两块合起来正好一页。 */

  /* ---- 价目表压进两页 ----
     34 项原本溢到第三页，而第三页只装得下几行 + 底部说明条，空 86%。
     根子在双栏用 grid：一行的高度取左右两格的最大值，左边有说明文字、
     右边没有时就白白空出一截，每页浪费约 200px。改用多栏流排，
     每款只占自己的高度；.bill-cat 用 column-span 横跨两栏，
     每个品类内部各自平衡，读序仍是先左后右。 */
  .bill-cols {
    display: block !important;
    column-count: 2; column-gap: 32px;
  }
  /* 7 个品类头在屏幕上各占 44px 的上边距+内边距，印刷版收到 28px：
     省下约 110px，同时给两页留出余量，改一句文案不会立刻多顶出一页。 */
  .bill-cat { column-span: all; margin-top: 34px; padding: 10px 0 4px; }
  .bill-intro { margin-bottom: 22px !important; }
  /* 价目表是 column-count 多栏容器，不肯从半页开始，只能整页起排。
        27 项（2026-08-14 版）比旧的 34 项短，若按原行距排两页会空 66%。
        字号有 9.4pt 下限不能压，改为加大行距把两页撑满。23px 是实测值。 */
  .dish { padding: 23px 0 !important; }
  .dish .desc { line-height: 1.42; }
  /* 英文标签会在词中间断行（"BEST / SELLER"），既难看又每次多吃一行。 */
  .dish .name i { white-space: nowrap; }

  /* 英文版价目表比中文版高约 290px（2.25 页 vs 2.0 页）——英文说明句多一行，
     标签词也长。中英本来就该用各自的排版参数，这里只给英文收紧，
     让两个语言版本都是"菜单两页"，分页结构一致。
     字号一律不低于 12.6px（=9.45pt）：12.5px 折算只有 9.375pt，已在印刷下限
     之下。所以高度只从行距、图块和标题上省，不动正文字号。 */
  /* 价格移除后行距整体放松；英文说明句更长，单独收一档以保住 11 页 */
  html[lang="en"] .dish { padding: 16px 0 !important; }
  html[lang="en"] .dish .name { font-size: 15px; }
  html[lang="en"] .dish .desc { font-size: 12.7px; line-height: 1.34; }
  html[lang="en"] .dish .name i { font-size: 12.7px; }
  html[lang="en"] .bill-intro .display { font-size: 25px; }
  html[lang="en"] .dish-strip figcaption { margin-top: 5px; }
  /* 英文说明条四项一行放不下，必然换行；差的就是那第二行的 24px，
     从图带和引言的上下留白里各匀一点补回来。 */
  html[lang="en"] .bill-foot { letter-spacing: 0.03em; gap: 6px 14px; white-space: nowrap; }
  html[lang="en"] .bill-intro { margin-bottom: 12px !important; }
  html[lang="en"] .dish-strip { margin: 18px 0 14px; }
  /* 价格补到两位小数后，英文版价目表宽了一点，正好顶出一页；图位收 14px 拉回 */
  html[lang="en"] .dish-strip .shot { height: 340px !important; }
  /* 英文版权页文字更长，末页放不下，从上面两张图各让出一点高度 */
  html[lang="en"] .space-hero > img { height: 430px; }
  html[lang="en"] .space-full img { aspect-ratio: 28 / 9; }
  html[lang="en"] .colophon-contact .role { font-size: 12.7px; line-height: 1.35; }
  html[lang="en"] .colophon { padding: 18px 0 12px; }
  html[lang="en"] .colophon-cols li { padding: 4px 0; }
  /* 六款产品图是近方形（比 0.97），按栏宽自适应会比原来的 1.9 宽图高出一截，
     把菜单顶到第三页。印刷版给图位定高、图按高度缩放。 */
  /* A4 版心 794px 命中屏幕端 900px 断点，印刷版走 3 列 × 2 行——这是对的：
     强拉回 6 列后每格只有 105px，品名会折成三行，图带反而更高，
     实测把价目表顶成三页（第 6 页空 59%、第 8 页空 71%）。 */
  /* 价目表是 column-count 多栏容器，实测不肯从半页开始，整块被推到下一页，
     于是引言页只剩 38% 有内容、空 62%。与其压缩，不如把引言页做成产品图页：
     4 款水饺 2×2 大图填满整页（晖哥口径：菜单版面优先保证足够大的产品图），
     价目表随后两页排满。图高 370px 是实测值——再大会溢出第二页。 */
  .dish-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 26px 0 0; row-gap: 18px;
  }
  .dish-strip .shot { height: 370px !important; }
  .dish-strip .shot { min-height: 0; height: 140px; padding: 8px 6px; }   /* 156px 起英文版会多出一页 */
  .dish-strip img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; }
  .dish-strip figcaption { margin-top: 7px; }
  .dish-strip .dn { font-size: 12.7px; }
  .dish-strip .dp { font-size: 12.7px; }
}