/* ══════════════════════════════════════════════════════════════
 * PC 站点的样式。**一份文件，没有构建**。
 *
 * ── 色板和字号都从 styles/tokens.wxss 来 ──────────────────────
 * 小程序那一套 token（--paper / --ink / --chili / --leaf / --ginger
 * 和四块 tint）是这个产品的识别标记，站点上再调一套的话，同一个品牌
 * 在手机上暖、在电脑上冷。浏览器没有 rpx，所以尺寸这边自己定 ——
 * 但**颜色一个不改**。
 *
 * ── 为什么手机尺寸也要管（这个站是 PC 站）─────────────────────
 * ★ 因为百度、Google 都是**移动优先索引**：它们用一个手机 UA 来抓，
 *   按手机那一版判断这一页值不值得收。只在宽屏上能看的 PC 站，
 *   在这些爬虫眼里是一堆溢出的横条。
 *   而且真人也会用手机点开搜索结果 —— 从这个站落到小程序是设计好的路径。
 *   所以：栅格自适应，不做最小宽度。
 *
 * ── 没有 @media 的那些"响应式"────────────────────────────────
 * 栅格用 `repeat(auto-fill, minmax(…))`、字号用 clamp()。
 * 这样「手机上几列」不需要在另一个地方再写一遍断点 ——
 * 断点写多了，改一处忘一处的那种错在屏幕上几乎看不出来。
 */

:root {
  /* 颜色：**逐字来自 styles/tokens.wxss**，一个都没改 */
  --paper: #F7F5F0;
  --ink: #1C1917;
  --chili: #C4402A;
  --leaf: #4A7C59;
  --ginger: #B07D2B;
  --tint-a: #F2EDE2;
  --tint-b: #EFE7E1;
  --tint-c: #E9EFE8;
  --tint-d: #F4ECDD;

  /* 站点自己加的几块"界面灰"。★ 它们**不在** tokens 里，因为小程序
     上没有对应的东西：那边是卡片和圆角，这边是分隔线和侧栏 */
  --line: #E3DED4;
  --line-soft: #EDE8DF;
  --muted: #6B645C;
  --surface: #FFFFFF;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 8px 24px rgba(28, 25, 23, .05);

  /* 字体栈：先系统中文，再兜底。★ 不引 Web Font —— 中文字体动辄
     几 MB，为了一点字形差异让首屏等一个字体文件不值得，而搜狗/百度
     的爬虫也不等字体 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.75 var(--font);
  /* 中文正文在 1.6~1.8 之间最舒服；1.5 会让整段字挤成一坨 */
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--chili); }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 700; }
h1 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.01em; }
h2 { font-size: clamp(19px, 2.2vw, 22px); }
h3 { font-size: 16px; }
p { margin: 0 0 .6em; }

.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
.wrap.wide { width: min(1320px, 100% - 40px); }

/* 只给读屏看的字（轮播圆点的「第 1 张：…」）。不能用 display:none ——
   那样读屏也读不到，圆点就成了三颗没有名字的点 */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════ 顶上那条 ══════════════════════════════════════ */

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 245, 240, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex; align-items: center; gap: 20px;
  min-height: 64px; flex-wrap: wrap; padding: 8px 0;
}
.brand {
  font-size: 20px; font-weight: 700; white-space: nowrap;
  /* ★ 从 baseline 改成 center：这一行里现在有那张 30px 的图标，
     baseline 对齐会把图按**底边**贴在文字基线上（看着像飘起来）
     —— 图文混排的常态是居中 */
  color: var(--chili); display: flex; align-items: center; gap: 8px;
}
.brand:hover { color: var(--chili); }
/* 站点图标。★ 圆是**图里带出来的**（做图时切的 alpha 蒙版），CSS 不再画一遍：
   同一个形状两处定义，换图那天总有一边忘了改 */
.brand-logo { width: 30px; height: 30px; flex: none; }
.brand-sub {
  font-size: 12px; font-weight: 400; color: var(--muted);
  /* ★ 口号在窄屏上收起来（不是缩写成一个字 —— 缩成一列一个字的
     那种样子在这个项目里出现过一次，很难看） */
  display: none;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  padding: 6px 12px; border-radius: 999px; font-size: 15px; color: var(--muted);
}
.nav a:hover { background: var(--tint-a); color: var(--ink); }
.nav a.on { color: var(--ink); font-weight: 600; background: var(--tint-a); }
/* 顶栏最后两格是动作，不是页面（使用小程序 / 下载APP）。颜色稍深一点，
   和「今天吃什么 / 菜谱 / 美食指南」这几格区分开，但不做成按钮那么重。 */
.nav a.nav-cta { color: var(--leaf); }
.nav a.nav-cta:hover { background: var(--tint-d); color: var(--leaf); }

.srch { margin-left: auto; display: flex; gap: 8px; }
.srch input {
  width: 180px; padding: 8px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
}
.srch input:focus { outline: 2px solid var(--chili); outline-offset: 1px; }
.srch button {
  padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--chili); color: #fff;
}
.srch button:hover { background: #a9361f; }

/* ═══════════ 首页那块头图 ══════════════════════════════════
 *
 * 两种形态共用同一份文案：
 *   · hero-plain    —— 后台没配图（或明确清空）时的纯文字版；
 *   · hero-carousel —— 1–3 张图 + 纯 CSS 单选圆点（:checked，无脚本）。
 * 图由 `<img>` 出（alt 是收录和读屏要的），深色渐变压在图上保证白字
 * 在任何一张照片上都够读。 */

.hero {
  position: relative; padding: 56px 0 40px; text-align: center;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--tint-d) 0%, transparent 70%),
    linear-gradient(180deg, var(--tint-a), var(--paper));
  border-bottom: 1px solid var(--line-soft);
}
.hero h1 { margin-bottom: 10px; }
.lede { color: var(--muted); margin: 0 0 18px; }
/* ★ 整站只留顶栏那一个搜索框：首页头图不再摆第二个 */
.hero .lede { font-size: 17px; margin: 0; }

.hero-kicker {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; color: var(--ginger);
}
.hero-cta-row { margin: 26px 0 0; }
.hero-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 20px; border-radius: 999px;
  background: var(--chili); color: #fff; font-size: 15px; font-weight: 600;
}
.hero-cta:hover { background: #a9361f; color: #fff; }
.hero-cta:focus-visible { outline: 2px solid var(--chili); outline-offset: 3px; }
.hero-plain .hero-copy { max-width: 640px; margin: 0 auto; }

/* ── 有图的那一版 ─────────────────────────────────────────── */

.hero.hero-carousel {
  display: flex; align-items: center; min-height: clamp(360px, 42vw, 460px);
  padding: 0; overflow: hidden; text-align: left;
  background: #2b2620; border-bottom: 1px solid rgba(28, 25, 23, .18);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .75s ease, visibility .75s ease;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
}
/* 一张时不渲染单选，第一张常亮；多张时由 :checked 决定哪一张亮 */
.hero:not(.hero-multi) .hero-slide:first-child { opacity: 1; visibility: visible; }
.hero-multi #hero-pick-1:checked ~ .hero-slides .hero-slide:nth-child(1),
.hero-multi #hero-pick-2:checked ~ .hero-slides .hero-slide:nth-child(2),
.hero-multi #hero-pick-3:checked ~ .hero-slides .hero-slide:nth-child(3) {
  opacity: 1; visibility: visible;
}

.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22, 19, 16, .84) 0%, rgba(22, 19, 16, .58) 42%,
      rgba(22, 19, 16, .18) 72%, rgba(22, 19, 16, .06) 100%),
    linear-gradient(0deg, rgba(22, 19, 16, .3), transparent 55%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-carousel .hero-inner { padding: 72px 0 96px; }
.hero-carousel .hero-copy { max-width: 560px; color: #fff; }
.hero-carousel h1 {
  color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .28);
  letter-spacing: .01em;
}
.hero-carousel .hero-kicker { color: #f1d7a9; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hero-carousel .hero-copy .lede {
  color: rgba(255, 255, 255, .9); font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7; max-width: 30em; margin: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}
.hero-carousel .hero-cta {
  background: rgba(255, 255, 255, .95); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.hero-carousel .hero-cta:hover { background: #fff; color: var(--chili); }
.hero-carousel .hero-cta:focus-visible { outline-color: #fff; }

/* 圆点。单选本身藏起来（仍在 tab 顺序里，方向键能换图），
   看得见的是 label：内边距撑出 44px 左右的点击面积，visual 点是
   content-box 那一小块。 */
.hero-pick {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  opacity: 0; pointer-events: none;
}
.hero-nav {
  position: absolute; z-index: 3; left: 50%; bottom: 22px;
  transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
}
.hero-nav label {
  display: block; width: 30px; height: 30px; padding: 9px;
  border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .52); background-clip: content-box;
  transition: width .2s ease, background-color .2s ease;
}
.hero-nav label:hover { background-color: rgba(255, 255, 255, .82); }
.hero-multi #hero-pick-1:checked ~ .hero-nav label[for="hero-pick-1"],
.hero-multi #hero-pick-2:checked ~ .hero-nav label[for="hero-pick-2"],
.hero-multi #hero-pick-3:checked ~ .hero-nav label[for="hero-pick-3"] {
  width: 42px; background-color: #fff;
}
.hero-multi #hero-pick-1:focus-visible ~ .hero-nav label[for="hero-pick-1"],
.hero-multi #hero-pick-2:focus-visible ~ .hero-nav label[for="hero-pick-2"],
.hero-multi #hero-pick-3:focus-visible ~ .hero-nav label[for="hero-pick-3"] {
  outline: 2px solid #fff; outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-nav label { transition: none; }
}

/* ── 菜谱页那六行筛选 ────────────────────────────────────────
 * ★ 左边那一列写死 68px：六个维度名（菜系/场景/味道/主料/做法/食材）
 *   都是两个字，定宽之后右边那几排芯片的起点落在同一条竖线上 ——
 *   用 auto 的话，各行会各自对齐到「最长的那一个」，
 *   视觉上就是六排参差不齐的芯片 */
.filters { margin: 0 0 30px; }
.frow {
  display: grid; grid-template-columns: 68px 1fr; gap: 10px;
  align-items: start; margin: 0 0 14px;
}
.frow h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 8px 0 0; }

/* ═══════════ 一段 ══════════════════════════════════════════ */

.band { padding: 34px 0; border-top: 1px solid var(--line-soft); }
.band:first-of-type { border-top: 0; }
.band h2 { margin-bottom: 14px; }
.band .sub { color: var(--muted); font-size: 15px; margin: -8px 0 14px; }
.band.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.more { margin: 18px 0 0; font-size: 15px; }
.more a { color: var(--chili); }

/* ── 芯片墙 ──────────────────────────────────────────────────
 * ★ 芯片是**站内链接的主力**（见 pages.js 里那段）。所以它们得
 *   一眼看出是能点的：底色 + 悬停变色，而不是一排纯文字 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink);
}
.chip:hover { border-color: var(--chili); color: var(--chili); }
.chip.on { background: var(--chili); border-color: var(--chili); color: #fff; }
.chip.on:hover { color: #fff; }

/* ── 大类页里那些筐（食材那一维分八类，见 pages.js 的 hub）─────
 * ★ 组标题比 .band h2 小一号、颜色也淡一档：这一页有八个组，
 *   而真正要人点的是筐里那些名字 —— 标题抢眼只会把八行字变成
 *   八个路障。它在这儿的作用是分隔，不是强调。 */
.gsec { margin: 0 0 26px; }
.gsec h2 {
  margin: 0 0 10px; font-size: 15px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
}

/* ═══════════ 菜谱卡 ════════════════════════════════════════ */

.cards {
  display: grid; gap: 20px;
  /* ★ 4 列在 1180 里是 265 一格；窄屏自动落到 3 / 2 / 1 列。
     不写断点的理由见文件头 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cards-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-l { display: block; color: inherit; }
.card-l:hover { color: var(--chili); }
.card-img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--tint-a);
}
/* 没有照片时的占位块。★ 它**不是**破图：一块 tint 底色，
   data-tint 取自这道菜的 illustration 那一套（a~d 四块） */
.ill { display: block; }
.ill[data-tint="b"] { background: var(--tint-b); }
.ill[data-tint="c"] { background: var(--tint-c); }
.ill[data-tint="d"] { background: var(--tint-d); }
.card-t {
  margin: 0; padding: 12px 14px 2px; font-size: 16px;
  /* 菜名两行封顶：不封的话长菜名会把整排卡片撑得高低不齐 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-d {
  margin: 0; padding: 0 14px; font-size: 13px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em;
}
.card-m { margin: 0; padding: 6px 14px 14px; font-size: 12px; color: var(--ginger); }

/* ═══════════ 面包屑 / 页头 ═════════════════════════════════ */

.crumbs { padding: 18px 0 0; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--chili); }
.crumbs .sep { margin: 0 6px; opacity: .6; }
.crumbs .now { color: var(--ink); }

.page-head { padding: 22px 0 18px; }
.page-head .lede { margin: 6px 0 0; }

/* ═══════════ 翻页 ══════════════════════════════════════════ */

.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; padding: 30px 0 10px;
}
.pg-info { font-size: 13px; color: var(--muted); margin-right: 6px; }
.pg-n, .pg-prev, .pg-next {
  min-width: 38px; padding: 7px 12px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: 14px;
}
.pg-prev, .pg-next { padding: 7px 16px; }
.pg-n:hover, .pg-prev:hover, .pg-next:hover { border-color: var(--chili); color: var(--chili); }
.pg-n.on { background: var(--chili); border-color: var(--chili); color: #fff; font-weight: 600; }
.off { color: var(--muted); opacity: .5; cursor: default; }
.pg-gap { color: var(--muted); padding: 0 2px; }

/* ═══════════ 提示条 ════════════════════════════════════════ */

.note {
  padding: 12px 16px; border-radius: 10px; font-size: 14px;
  background: var(--tint-a); border: 1px solid var(--line-soft);
  color: var(--muted); margin: 0 0 14px;
}
.note.warn { background: var(--tint-d); border-color: #E8D9BC; color: #7A5A17; }

/* ═══════════ 小程序转化位 ══════════════════════════════════
 *
 * 结构见 web/layout.js 的 appCta：左边一段话 + 下载按钮，右边一张小程序码。
 *
 * ★ 二维码那一格**只在配了图的时候才存在**（没配就整个 figure 不渲染），
 *   所以这里的 flex 不会留下一个空框。
 * ★ 二维码底下垫白底 + 内边距：微信导出的码四周不一定有留白，直接放在
 *   这块渐变上会显得脏，扫描识别率也会掉。
 * ★ 窄屏上改成上下排：132px 的码并排会让文字只剩二十来个字一行。
 *   码**不隐藏** —— 手机上确实不好扫自己的屏幕，但人可以长按保存、
 *   或者把地址发给朋友；藏起来反而像是这里坏了。
 */
.app {
  margin: 34px 0; padding: 30px 34px; border-radius: 16px;
  background: linear-gradient(135deg, var(--tint-c), var(--tint-a));
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 34px;
}
.app-copy { flex: 1 1 auto; min-width: 0; }
.app-kicker {
  margin: 0 0 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; color: var(--ginger);
}
.app h2 { margin-bottom: 8px; color: var(--leaf); }
.app p { margin: 0; color: #3F4A42; max-width: 62ch; }
.app .app-how { margin-top: 10px; color: var(--leaf); font-weight: 600; }
.app-dl {
  display: inline-block; margin-top: 16px; padding: 10px 22px;
  border-radius: 999px; background: var(--chili); color: #fff;
  font-size: 15px;
}
.app-dl:hover { background: #a9361f; }
.app-qr { flex: 0 0 auto; margin: 0; text-align: center; }
.app-qr img {
  display: block; width: 132px; height: 132px; padding: 8px;
  border-radius: 12px; background: #fff; border: 1px solid var(--line-soft);
}
.app-qr figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.app-compact { margin: 26px 0 30px; padding: 22px 26px; gap: 24px; }
.app-compact h2 { font-size: 20px; }
.app-compact .app-qr img { width: 112px; height: 112px; }

/* ═══════════ 菜谱详情 ══════════════════════════════════════ */

.r-head { padding: 22px 0 18px; }
.r-meta { color: var(--ginger); font-size: 14px; margin: 8px 0 0; }

.r-hero { border-radius: 16px; overflow: hidden; background: var(--tint-a); }
.hero-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.r-cols {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr);
  gap: 34px; padding: 28px 0 0;
}
.r-main { min-width: 0; }

.blk { margin-bottom: 30px; }
.blk h2 {
  margin-bottom: 14px; padding-bottom: 8px; font-size: 18px;
  border-bottom: 2px solid var(--tint-a);
}
.blk h2 .sub { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--muted); }

/* 用料：名 / 用量 / 折算克重 三列 */
.ings { list-style: none; margin: 0; padding: 0; }
.ings li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--line-soft);
}
.ing-n { color: var(--ink); border-bottom: 1px solid var(--tint-a); }
.ing-n:hover { color: var(--chili); border-color: var(--chili); }
.ing-a { font-variant-numeric: tabular-nums; }
.ing-a em { font-style: normal; color: var(--muted); font-size: 13px; }
.ing-g { min-width: 86px; text-align: right; font-size: 13px; color: var(--muted); }

/* 做法 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line-soft); }
.st-no {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chili); color: #fff; font-size: 14px; font-weight: 600;
}
.st-body { min-width: 0; }
.st-text { margin: 0; font-size: 16px; }
.st-meta { margin: 6px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.st-heat, .st-time {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--tint-a); color: var(--muted);
}
.st-tip { margin: 6px 0 0; font-size: 14px; color: var(--leaf); }
.st-safe {
  margin: 8px 0 0; padding: 9px 12px; font-size: 14px;
  background: var(--tint-d); border-left: 3px solid var(--ginger);
  border-radius: 0 8px 8px 0; color: #7A5A17;
}
.st-safe strong { margin-right: 6px; }

/* 作者拿分段记号写的那几件事 → 一条一行（窍门、安全提示几乎条条如此）。
   圆点不另配色：跟着那一块的字色走，绿的归绿的、黄的归黄的 */
.pts { margin: 4px 0 0; padding-left: 17px; }
.pts li + li { margin-top: 4px; }

/* 右栏：营养估算 */
.nut { padding: 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); }
.nut-kcal {
  font-size: 34px; font-weight: 700; color: var(--chili);
  margin: 0 0 10px; font-variant-numeric: tabular-nums;
}
.nut-list { list-style: none; margin: 0 0 12px; padding: 0; }
.nut-list li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; border-bottom: 1px dashed var(--line-soft); }
.nut-list span { color: var(--muted); }
.nut-note { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.6; }

/* 标签 */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tags a, .tags span {
  font-size: 13px; padding: 4px 12px; border-radius: 999px;
  background: var(--tint-a); color: var(--muted);
}
.tags a:hover { background: var(--chili); color: #fff; }

/* ═══════════ 搜索结果 ══════════════════════════════════════ */

.hit { display: flex; flex-direction: column; }
.hit-why {
  margin: 6px 2px 0; font-size: 12px; color: var(--leaf);
}
.hit .card { flex: 1; }

/* ═══════════ 美食指南 ══════════════════════════════════════
 *
 * ★ 两屏都**只有一列**（780px 封顶）。文章是一整句一整句的话，
 *   排成两列的话人会来回折行读；而这两页的用法正是「扫一眼标题挑一篇」，
 *   一列从上往下扫最省事。菜谱那边相反 —— 那边是**挑图**，所以是墙。
 * ★ 正文（.n-body）是 md.js 那几种写法的字号：h2/h3/段落/列表/链接。
 *   没有一条是给"用户写的东西"兜底的 —— 正文只有后台一个人写，
 *   而那几种写法就是这个文件支持的全部（见 lib/md.js 头上那份清单）。
 */
.notes, .note-art { max-width: 780px; }

.ncard { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.ncard:last-child { border-bottom: 0; }
.n-l { color: inherit; }
.n-l h2 { font-size: 20px; margin: 0 0 6px; }
.n-l:hover h2 { color: var(--chili); }
.n-sum { margin: 0 0 10px; color: var(--muted); }

/* 日期那一行。★ 颜色跟菜谱页的 .r-meta 一样（姜黄）：
   同一类"这条东西的时间/属性"的小字，在站里就该长一个样 */
.n-meta { margin: 0 0 10px; font-size: 13px; color: var(--ginger); }
.n-upd { margin-left: 10px; color: var(--muted); }

.n-body { font-size: 17px; }
.n-body h2 { font-size: 21px; margin: 34px 0 10px; }
.n-body h3 { font-size: 18px; margin: 26px 0 8px; }
.n-body p { margin: 0 0 15px; }
.n-body ul, .n-body ol { margin: 0 0 15px; padding-left: 24px; }
.n-body li { margin: 5px 0; }
.n-body a { color: var(--chili); text-decoration: underline; text-underline-offset: 3px; }
.n-body a:hover { color: #a9361f; }

/* 上一篇 / 下一篇。★ 两张卡一样宽（flex 1 1 260px）：一条长标题
   不该把另一条挤成一小块 —— 它们在页面上的分量是一样的 */
.n-nav { display: flex; gap: 14px; flex-wrap: wrap; margin: 36px 0 0; }
.n-nav a {
  flex: 1 1 280px; padding: 14px 16px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
.n-nav a:hover { border-color: var(--chili); color: var(--chili); }
.n-nav a span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.n-next { text-align: right; }

.fine { font-size: 13px; color: var(--muted); padding: 18px 0 0; }

/* ═══════════ 协议两页 ══════════════════════════════════════ */

.doc { max-width: 760px; padding-bottom: 40px; }
.doc-intro { font-size: 17px; color: var(--muted); }
.doc-sec { padding: 12px 0; }
.doc-sec h2 { font-size: 17px; margin: 14px 0 8px; color: var(--chili); }
.doc-sec p { margin: 0 0 10px; }

/* ═══════════ 页脚 ══════════════════════════════════════════ */

.foot {
  margin-top: 60px; padding: 34px 0 40px;
  background: var(--tint-a); border-top: 1px solid var(--line);
  font-size: 14px;
}
.fcols {
  display: grid; gap: 24px 30px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-bottom: 20px;
}
.fcol h3 { font-size: 14px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li { padding: 3px 0; }
.fcol a { color: var(--ink); }
.fcol a:hover { color: var(--chili); }
.fnote { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* ═══════════ 顶栏动作的弹窗 ══════════════════════════════════
 * 纯 :target 打开（地址末尾 #mini-qr / #app-soon），没有一行 JS。
 * 点背景、右上角 ×，或者浏览器的返回，都能关掉。
 * ★ display:none 的那一份不占位；z-index 高于内容，低于不了任何东西
 *   （站点没有浮层，这里是唯一一层）。 */
.dlg {
  display: none; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center; padding: 24px;
}
.dlg:target { display: flex; }
.dlg-bg {
  position: absolute; inset: 0; background: rgba(28, 32, 29, .55);
}
.dlg-card {
  position: relative; z-index: 1; width: min(380px, 100%);
  max-height: calc(100vh - 48px); overflow: auto;
  padding: 28px 28px 24px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 20px; box-shadow: 0 18px 50px rgba(28, 32, 29, .22);
}
.dlg-x {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 24px; line-height: 1;
}
.dlg-x:hover { background: var(--tint-a); color: var(--ink); }
.dlg-kicker {
  margin: 0 0 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; color: var(--ginger);
}
.dlg-card h2 { margin: 0 0 14px; font-size: 24px; color: var(--leaf); }
.dlg-qr { margin: 0 0 14px; }
.dlg-qr img {
  display: block; width: 180px; height: 180px; margin: 0 auto;
  padding: 8px; border-radius: 14px; background: #fff;
  border: 1px solid var(--line-soft);
}
.dlg-qr figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.dlg-how { margin: 0; color: var(--muted); font-size: 14px; }
.dlg-msg { margin: 4px 0 0; color: var(--leaf); font-size: 16px; font-weight: 600; }

/* ═══════════ 窄屏 ══════════════════════════════════════════ */

@media (min-width: 900px) {
  .brand-sub { display: inline; }
}

@media (max-width: 780px) {
  /* ★ 详情页两栏在窄屏上**并成一栏**，而且顺序变成「做法在前、营养在后」
     —— CSS 改不了 DOM 顺序，所以这里只并栏：营养卡跟着走到底部，
     这个顺序在手机上读着也顺（先看做法，再看这套值不值得做） */
  .r-cols { grid-template-columns: 1fr; gap: 24px; }
  .band.two-col { grid-template-columns: 1fr; gap: 24px; }
  /* ★ 整站只剩这一条搜索了，窄屏上别再把它挤成 120px：整行铺开、
     输入框吃掉剩下的宽度，是它现在唯一该有的样子 */
  .srch { flex: 1 1 100%; order: 3; margin-left: 0; }
  .srch input { width: auto; flex: 1; min-width: 0; }
  .hero { padding: 36px 0 28px; }
  /* 手机上文字更长、图更窄：头图加高一点，渐变也更实，保证白字压得住 */
  .hero.hero-carousel { min-height: 430px; }
  .hero-carousel .hero-inner { padding: 54px 0 86px; }
  .hero-carousel .hero-copy { max-width: 100%; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(22, 19, 16, .86) 0%, rgba(22, 19, 16, .64) 76%,
        rgba(22, 19, 16, .46) 100%),
      linear-gradient(0deg, rgba(22, 19, 16, .34), transparent 62%);
  }
  .hero-slide img { object-position: 68% center; }
  .hero-nav { bottom: 16px; }
  .app { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
  .app-qr { align-self: center; }
  .ings li { grid-template-columns: minmax(0, 1fr) auto; }
  /* 折算克重那一列在窄屏收掉：最重要的是「2 个」，克重是折算 */
  .ing-g { display: none; }
}