@charset "UTF-8";
/* ==========================================================================
   Plantas na Casa — style.css
   版式照源站 gardeningknowhow.com 的结构重建（逐维度观察见 docs/TEMPLATE.md）：
     · 页头：品牌左 / 9 项导航右（全大写微字号 + 悬停下划线指针），下挂深橄榄细带
     · 首页：1px 深橄榄边 + 底边加粗的「分栏 hero 盒」→ 分类瓷片行
             → 三栏竖排卡列 → 「领起件 + 行列表」栏带 → 分类行列表
     · 卡片：图在上、分类微标签、标题、20px 短横线、摘要；方角、无边框、无阴影
     · 文章页：面包屑（CSS 三角分隔）→ H1 → strapline → 首字母徽章署名块 → 首图
     · 页脚：深橄榄平铺单列（品牌 → 说明 → 两行链接 → 版权行），不是三栏深色页脚
   字体（由 site.json 注入）：Alegreya = 标题/数字，Nunito = 正文/界面。
   ========================================================================== */

:root {
  --ink: #1b240f;          /* 近黑橄榄，源站 secondary-950 */
  --ink-2: #3c4728;
  --muted: #6f7a5d;
  --green: #79a642;        /* 源站 primary-500 */
  --green-d: #57802b;
  --green-l: #a5ca79;
  --paper: #ffffff;
  --ground: #f6f6f6;
  --rule: #dcdcd2;
  --shell: 1200px;
  --pad: 26px;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.72 var(--sans);
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--green-d); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.14; }
p { margin: 0 0 1.05em; }
strong { font-weight: 700; }
ol, ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* 阅读栏宽：**只约束宽度，不碰 margin**。
   块级元素左右默认 margin 就是 0，写 0 是多余的；而 .shell 自带 margin:0 auto，
   一旦在 .measure 里写 margin:0，挂在 .shell 上的 .measure 就会丢掉居中、贴到窗口左边
   （正文页头部曾因此左移 85px，与首图/正文左边缘完全错位）。
   阅读栏靠"外层 .shell 管左右边距、内层 .measure 管栏宽"来组合。 */
.measure { max-width: 44rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; color: #fff; }

/* 微标签：源站到处用 11px 全大写 + 字距 */
.band__kicker,
.card__kicker,
.numrow__meta,
.crumbs,
.updated,
.credits-table th,
.byline__cat,
.strip__links a,
.strip__slogan,
.brand__where,
.band__more a,
.credit,
.tile__count {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── 页头 ─────────────────────────────────────────────────────────── */
.site-header { position: relative; z-index: 30; }

/* 抽屉/遮罩/按钮的共同锚点：position:relative 且 z-index:auto
   overflow-x:clip 只横向裁掉「收起状态平移出屏」的抽屉（不产生横向滚动条），
   overflow-y 保持 visible，所以遮罩与抽屉向下 100vh 的部分不会被剪掉。 */
.header-stack { position: relative; z-index: auto; overflow-x: clip; overflow-y: visible; }

.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); }
body.pn-masthead .masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 86px;
}

.brand { display: flex; align-items: baseline; gap: 12px; margin: 0; min-width: 0; }
.brand__name {
  font: 700 27px/1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand__name:hover { color: var(--green-d); }
.brand__where { color: var(--muted); }

.nav-primary__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.menu { display: flex; align-items: center; }
.menu a {
  position: relative;
  display: block;
  padding: 10px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.menu a:hover, .menu a.is-active { color: var(--green-d); }
.menu a:hover::after, .menu a.is-active::after { transform: scaleX(1); }

.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.menu-toggle-label { display: none; }
.nav-scrim { display: none; }

/* 细带：源站导航之后那条内链条，本站放 tagline + 服务页入口 */
body.pn-masthead .strip { background: var(--ink); }
.strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 40px;
}
.strip__slogan {
  margin: 0;
  min-width: 0;
  color: #b7c3a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip__links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 0; }
.strip__links a { color: #fff; white-space: nowrap; }
.strip__links a:hover { color: var(--green-l); }

/* ── 短横线：源站 20px 签名，全站复用 ─────────────────────────────── */
body.pn-rule .band__title::after,
body.pn-rule .hero__title::after,
body.pn-rule .card__title::after,
body.pn-rule .lead__title::after,
body.pn-rule .row__title::after,
body.pn-rule .page-head__title::after,
body.pn-rule .group__title::after,
body.pn-rule .h2-flat::after,
body.pn-rule .col__title::after {
  content: "";
  display: block;
  width: 20px;
  border-top: 1px solid var(--ink);
  margin: 12px 0 0;
}

/* ── 按钮 ─────────────────────────────────────────────────────────── */
.cta {
  display: inline-block;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cta:hover { background: var(--green-d); color: #fff; }
.cta--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cta--line:hover { background: var(--paper); color: var(--green-d); box-shadow: inset 0 0 0 1px var(--green-d); }
.arrow { margin-left: 8px; }

/* ── 首页 hero：带粗底边的分栏盒 ──────────────────────────────────── */
.hero { padding: 40px 0 0; }
.hero__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
  padding: 46px;
  border: 1px solid var(--ink);
  border-bottom-width: 14px;
}
.hero__fig { overflow: hidden; aspect-ratio: 1 / 1; background: var(--ground); }
.hero__fig img { width: 100%; height: 100%; object-fit: cover; }
.hero__text { margin: 0; }
.hero__title { font-size: 46px; letter-spacing: -0.015em; }
.hero__lead { margin: 22px 0 26px; font-size: 17.5px; color: var(--ink-2); }
.hero__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ── 分类瓷片行 ───────────────────────────────────────────────────── */
.tiles { background: var(--ground); margin-top: 46px; padding: 30px 0 34px; }
.tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tile { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.tile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  color: var(--ink);
}
.tile__link:hover { background: #f2f7ea; color: var(--green-d); }
.tile__name { font: 700 17px/1.3 var(--serif); }
.tile__count {
  flex: none;
  min-width: 26px;
  padding: 4px 0;
  text-align: center;
  background: var(--green);
  color: #fff;
}

/* ── 栏带 ─────────────────────────────────────────────────────────── */
.band { padding: 46px 0 0; }
.band__kicker { margin: 0 0 10px; color: var(--green-d); }
.band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.band__title { font-size: 31px; }
.band__more { margin: 0 0 4px; }
.band__more a { font-weight: 600; color: var(--green-d); }
.band__more a:hover { color: var(--ink); }

.band .grid, .band .rows, .band .catrows { padding-top: 34px; }

/* ── 卡 / 行 / 领起件 ────────────────────────────────────────────── */
.grid { display: grid; gap: 34px 30px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--portrait .card__media { aspect-ratio: 3 / 4; }

.card { min-width: 0; }
.card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__kicker { margin: 14px 0 6px; color: var(--green-d); }
.card__title { font-size: 21px; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--green-d); }
.card__text { margin: 12px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--muted); }

.lead {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.lead__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; }
.lead__title { font-size: 27px; }
.lead__title a { color: var(--ink); }
.lead__title a:hover { color: var(--green-d); }
.lead__text-p { margin: 14px 0 0; font-size: 16.5px; color: var(--muted); }

.rows { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.row__thumb { display: block; width: 104px; height: 104px; overflow: hidden; background: var(--ground); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.row__title { font-size: 19.5px; }
.row__title a { color: var(--ink); }
.row__title a:hover { color: var(--green-d); }
.row__text-p { margin: 8px 0 0; font-size: 15px; line-height: 1.58; color: var(--muted); }
.row .card__kicker { margin-top: 0; }

.catrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
.catrow { border-top: 1px solid var(--rule); }
.catrow__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 16px 0;
  color: var(--ink);
}
.catrow__name { font: 700 20px/1.3 var(--serif); }
.catrow__count { font: 700 13px/1 var(--sans); color: var(--green-d); }
.catrow__intro { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.catrow__link:hover .catrow__name { color: var(--green-d); }

/* ── 面包屑：源站用 CSS 实心三角作分隔符 ─────────────────────────── */
.crumbs { margin: 0 0 16px; color: var(--muted); }
.crumbs a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 10px; }
.crumbs a:hover { color: var(--green-d); }
.crumbs .sep {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border-left: 5px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin: 0 8px 2px;
  vertical-align: middle;
}

/* ── 页头区（索引/分类/静态页） ───────────────────────────────────── */
.page-head { padding: 44px 0 34px; border-bottom: 1px solid var(--rule); }
.page-head__title { font-size: 43px; letter-spacing: -0.015em; }
.page-head__lead { margin: 20px 0 0; max-width: 44rem; font-size: 18px; color: var(--ink-2); }

.listing { padding: 34px 0 56px; }
.count-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 26px;
  flex-wrap: wrap;
  margin: 0 0 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font-size: 13.5px;
  color: var(--muted);
}
.count-line > span:first-child { flex: none; font: 700 22px/1 var(--serif); color: var(--ink); }

.prose p { font-size: 18px; }
.prose p:last-child { margin-bottom: 0; }
.page-body { padding: 34px 0 18px; }

.groups { margin-top: 8px; }
.group__title { font-size: 25px; margin: 34px 0 6px; }
.groups > .group__title:first-child { margin-top: 0; }

/* 编号行列表（B 索引） */
.numrows { border-top: 1px solid var(--rule); }
.numrow {
  display: grid;
  grid-template-columns: 56px 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.numrow__num { padding-top: 6px; color: var(--green-d); font: 700 11px/1 var(--sans); }
.numrow__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground); }
.numrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.numrow__meta { margin: 0 0 6px; }
.numrow__meta a { color: var(--green-d); }
.numrow__title { font-size: 21px; }
.numrow__title a { color: var(--ink); }
.numrow__title a:hover { color: var(--green-d); }
.numrow__p { margin: 9px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* ── 正文页 ───────────────────────────────────────────────────────── */
.post__head { padding: 40px 0 26px; }
.post__title { font-size: 42px; letter-spacing: -0.015em; }
.post__strapline { margin: 16px 0 0; font-size: 18.5px; color: var(--ink-2); }

.byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--muted);
}
.byline__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  border-radius: 50%;            /* 源站的圆头像，唯一保留的圆形 */
  background: var(--ink);
  color: #fff;
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.06em;
}
.byline__who strong { color: var(--ink); }
.byline__sep { color: var(--green); }
.byline__cat { margin-left: 2px; }
.byline__cat a { color: var(--green-d); text-decoration: underline; text-underline-offset: 3px; }

.post__fig { margin: 30px 0 0; }
.post__fig img { width: 100%; height: auto; background: var(--ground); }
.post__fig figcaption { padding-top: 12px; }
.post__fig .cap { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.post__fig .credit { display: block; margin-top: 7px; color: var(--muted); }

.post__body { padding: 30px 0 0; }
.standfirst { margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--ink); font-size: 19px; }

/* 参数：2×2 单元格，用 1px 发丝线切分 */
.params {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 6px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.param { background: var(--ground); padding: 15px 18px; }
.param__label { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.param__value { display: block; margin-top: 5px; font: 700 17px/1.35 var(--serif); }

/* 小节：源站的 H3 编号条目 → 本站下沉到 H2，用 CSS 计数器补 01/02 */
.blocks { counter-reset: pn-sec; }
.blocks .block { padding: 26px 0 0; }
.blocks .block h2 {
  counter-increment: pn-sec;
  margin-bottom: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 25px;
}
.blocks .block h2::before {
  content: counter(pn-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.14em;
}
.blocks .block:first-child h2 { border-top: 0; padding-top: 6px; }

.h2-flat { margin: 40px 0 18px; font-size: 24px; }

/* 清单：源站编号条目的做法，序号用衬线数字 */
.steps { counter-reset: pn-step; border-top: 1px solid var(--rule); }
.steps li {
  counter-increment: pn-step;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
}
.steps li::before {
  content: counter(pn-step, decimal-leading-zero);
  color: var(--green-d);
  font: 700 15px/1.5 var(--serif);
}

/* 提示块：源站 blockquote 的引号做法 + 粗顶边（不是左竖线） */
.note {
  margin: 34px 0 0;
  padding: 24px 26px 22px;
  border-top: 8px solid var(--ink);
  background: var(--ground);
}
.note::before {
  content: "\201C";
  display: block;
  height: 26px;
  color: var(--green);
  font: 700 56px/0.8 var(--serif);
}
.note p { margin: 0; font-size: 16.5px; }
.note strong {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 相关阅读：源站复用同一套 3 列表格卡 */
.rel { margin-top: 56px; padding: 34px 0 52px; background: var(--ground); }
.rel .band__head { margin-bottom: 26px; }
.rel .grid { padding-top: 0; }

/* ── 静态页零件 ───────────────────────────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
  max-width: 60rem;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.facts li {
  position: relative;
  padding: 15px 0 15px 22px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  width: 8px;
  height: 8px;
  background: var(--green);
}

.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; max-width: 60rem; margin: 0; }
.col__title { font-size: 21px; margin-bottom: 12px; }
.col p { font-size: 16px; color: var(--ink-2); }

.updated { margin: 34px 0 0; color: var(--muted); }
.empty { padding: 20px 0 40px; color: var(--muted); }

.table-wrap { margin: 30px 0 0; max-width: 60rem; overflow-x: auto; }
.credits-table { width: 100%; border-collapse: collapse; }
.credits-table th {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
}
.credits-table td { padding: 13px 14px; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: top; }
.credits-empty { color: var(--muted); }

/* ── 页脚：深橄榄平铺单列 ─────────────────────────────────────────── */
.foot { background: var(--ink); color: #cfd7bf; border-top: 3px solid var(--green); }
.foot__inner { padding: 46px var(--pad) 40px; }
.foot__brand { margin: 0; font: 700 27px/1 var(--serif); color: #fff; }
.foot__text { margin: 14px 0 0; max-width: 44rem; font-size: 16px; }
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(207, 215, 191, 0.22);
}
.foot__row--cats { border-top: 0; padding-top: 12px; }
.foot__row a { color: #fff; font-size: 12.5px; letter-spacing: 0.06em; }
.foot__row a:hover { color: var(--green-l); }
.foot__legal { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(207, 215, 191, 0.22); font-size: 13px; color: #a9b596; }
.foot__sep { color: var(--green); }

/* ── 断点 ≤1100px：导航收紧（仍是桌面单行） ───────────────────────── */
@media (max-width: 1100px) {
  .menu a { padding: 10px 7px; font-size: 11px; letter-spacing: 0.07em; }
  .menu a::after { left: 7px; right: 7px; }
  .brand__where { display: none; }
  .grid { gap: 30px 24px; }
  .numrow { grid-template-columns: 44px 120px minmax(0, 1fr); gap: 20px; }
}

/* ── 断点 ≤900px：抽屉菜单 ────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 汉堡按钮：与抽屉同层（120 > 抽屉 110 > 遮罩 100） */
  .menu-toggle-label {
    position: relative;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    background: var(--paper);
    border: 1px solid var(--rule);
    cursor: pointer;
  }
  .menu-toggle-label span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
  .menu-toggle-label span + span { margin-top: 5px; }
  .menu-toggle:checked ~ .menu-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle:checked ~ .menu-toggle-label span:nth-child(2) { opacity: 0; }
  .menu-toggle:checked ~ .menu-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 抽屉：定位锚点是 .header-stack（position:relative / z-index:auto） */
  .nav-primary {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 110;
    width: min(88vw, 340px);
    height: 100vh;
    padding: 22px 0 38px;
    overflow-y: auto;
    background: var(--paper);
    border-left: 1px solid var(--rule);
    transform: translateX(102%);
    transition: transform 0.28s ease;
  }
  .menu-toggle:checked ~ .nav-primary { transform: translateX(0); }

  .nav-primary__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 24px 13px;
    overflow: visible;
    clip-path: none;
    border-bottom: 1px solid var(--rule);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .menu { flex-direction: column; align-items: stretch; }
  /* 桌面为单行排版加的 nowrap 在这里显式回收 */
  .menu a {
    padding: 15px 24px;
    font-size: 12.5px;
    letter-spacing: 0.12em;
    white-space: normal;
    border-bottom: 1px solid var(--rule);
  }
  .menu a::after { display: none; }

  /* 遮罩：挂在 .header-stack 上，不挂抽屉、不挂 body */
  .nav-scrim {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    height: 100vh;
    background: rgba(27, 36, 15, 0.62);
    display: none;
  }
  .menu-toggle:checked ~ .nav-scrim { display: block; }

  .strip__slogan { display: none; }
  .strip__inner { justify-content: flex-start; }

  .hero { padding-top: 28px; }
  .hero__box { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; border-bottom-width: 10px; }
  .hero__title { font-size: 34px; }
  .hero__lead { font-size: 16.5px; }
  .tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catrows, .facts, .cols3 { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .rows--2 { grid-template-columns: minmax(0, 1fr); }
  .lead { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .page-head__title { font-size: 35px; }
  .post__title { font-size: 34px; }
  .numrow { grid-template-columns: 36px 104px minmax(0, 1fr); gap: 16px; }
  .numrow__thumb { width: 104px; }
  .foot__row { gap: 8px 18px; }
}

/* ── 断点 ≤520px：单列 ───────────────────────────────────────────── */
@media (max-width: 520px) {
  :root { --pad: 18px; }
  body { font-size: 16.5px; }
  .masthead__inner { min-height: 68px; }
  .brand__name { font-size: 22px; }
  .strip__links { gap: 14px; }
  .strip__links a { font-size: 10.5px; }

  .hero__box { padding: 20px; gap: 20px; }
  .hero__title { font-size: 29px; }
  .hero__lead { font-size: 16px; margin: 16px 0 20px; }
  .hero__links .cta { flex: 1 1 100%; text-align: center; }
  .tiles { margin-top: 32px; padding: 24px 0 28px; }
  .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { padding-top: 36px; }
  .band__title { font-size: 25px; }
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .row__thumb { width: 76px; height: 76px; }
  .row__title { font-size: 18px; }

  .page-head { padding: 30px 0 24px; }
  .page-head__title { font-size: 29px; }
  .page-head__lead { font-size: 16.5px; }
  .count-line { flex-direction: column; align-items: flex-start; gap: 6px; }

  .numrow { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "num head" ". thumb"; }
  .numrow__num { grid-area: num; padding-top: 2px; }
  .numrow__thumb { grid-area: thumb; width: 100%; margin-top: 12px; }
  .numrow__text { grid-area: head; }

  .post__head { padding: 28px 0 20px; }
  .post__title { font-size: 28px; }
  .post__strapline { font-size: 16.5px; }
  .byline { font-size: 12px; }
  .byline__badge { width: 32px; height: 32px; font-size: 11px; }
  .params { grid-template-columns: minmax(0, 1fr); }
  .blocks .block h2 { font-size: 21px; }
  .steps li { grid-template-columns: 36px minmax(0, 1fr); font-size: 16px; }
  .note { padding: 18px 18px 16px; }
  .rel { margin-top: 40px; padding: 26px 0 38px; }
  .foot__inner { padding: 34px var(--pad) 30px; }
  .foot__brand { font-size: 22px; }
}