/* ==========================================================================
   首页
   结构：开场（只有字）→ 作品墙（主角）→ 两个品类 → 流程 → 关于 → 收尾

   首页刻意**不做 Hero 大图 + 右侧信息栏** —— 那是商品详情页的形状。
   首页该回答的是「你是谁、你的东西长什么样」，所以作品是主角。

   移动优先：默认单列，往上加断点。
   ========================================================================== */

/* ── 开场：只有字，大留白 ───────────────────────────────────── */
.open { padding-block: var(--s9) var(--s8); }
@media (min-width: 700px) { .open { padding-block: var(--s10) var(--s9); } }

.open__tag {
  font-size: var(--size-xs);
  letter-spacing: var(--track-label);
  color: var(--umber-faint);
  padding-bottom: var(--s5);
  margin-bottom: var(--s7);
  border-bottom: 1px solid var(--line);
}
.open h1 { font-size: var(--size-display); }
.open__sub {
  margin-top: var(--s6);
  font-size: var(--size-md);
  line-height: var(--lead-loose);
  color: var(--umber-soft);
}
.open__links { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s7); }

/* ── 两个品类：把产品目录摊开 ───────────────────────────────
   客人不用点进去就知道你做什么、大概多少钱。                 */
.two { display: grid; gap: var(--s9); }
@media (min-width: 800px) { .two { grid-template-columns: 1fr 1fr; gap: var(--s8); } }

.cat__head { display: flex; align-items: baseline; gap: var(--s4); }
.cat__no {
  font-family: var(--face-display); font-size: var(--size-sm);
  font-variant-numeric: tabular-nums; color: var(--sienna); letter-spacing: .06em;
}
.cat__head h2 { font-size: var(--size-xl); }
.cat__note {
  margin-top: var(--s3); font-size: var(--size-sm);
  color: var(--umber-faint); max-width: 30em;
}

.menu { margin-top: var(--s5); border-top: 1px solid var(--line); }
.menu li { border-bottom: 1px solid var(--line); }
.menu a {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: var(--s3) var(--s4);
  padding-block: var(--s4);
  min-height: 44px;                      /* 触摸目标 */
  text-decoration: none;
  transition: padding-inline-start var(--t-base) var(--ease);
}
.menu a:hover { padding-inline-start: var(--s3); }
.menu b { font-weight: 500; font-size: var(--size-base); }
.menu em { font-style: normal; font-size: var(--size-xs); color: var(--umber-ghost); }
.menu span {
  font-family: var(--face-display); font-size: var(--size-base);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── 流程：一行，带编号 ─────────────────────────────────────── */
.flow {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8);
  font-size: var(--size-sm); color: var(--umber-soft);
}
.flow span { display: flex; align-items: baseline; gap: var(--s3); }
.flow i {
  font-style: normal; font-family: var(--face-display);
  font-size: var(--size-xs); font-variant-numeric: tabular-nums; color: var(--sienna);
}

/* ── 关于 ───────────────────────────────────────────────────── */
.about { display: grid; gap: var(--s8); }
@media (min-width: 860px) {
  .about { grid-template-columns: 4fr 6fr; gap: var(--s10); align-items: center; }
}
.about__copy h2 { font-size: var(--size-section); }
.about__copy p { margin-top: var(--s5); color: var(--umber-soft); max-width: 32em; }

.plate__hint {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: var(--s4); font-size: var(--size-xs); line-height: 1.8;
  color: var(--umber-ghost); white-space: pre-line;
}

/* ── 收尾 ───────────────────────────────────────────────────── */
.closing__in {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  align-items: center; justify-content: space-between;
}
.closing h2 { font-size: var(--size-section); }

/* ⚠️ 页脚的列数曾经在这里又定义了一遍（4 列），
   而 site.css 里是 3 列。home.css 只在首页加载且无 @layer，
   于是首页的页脚是 4 列、其他所有页是 3 列 —— 同一个页脚两种长相，
   而且 3 列装不下 4 块内容，第 4 块掉到第二行，右边空出一大片。
   列数只在 site.css 里定义，这里不再重复。 */

/* ── 缓存指纹 v2 ─────────────────────────────────────────────
   2026-08-14：上线当天 Cloudflare 把源站的 403 页面当成 CSS 缓存了
   （CF 用 HTTPS 回源，而源站那时只监听 80，落到默认站返回 403），
   并且用 200 状态码发出去。前台整站没样式。

   源站修好后 CF 缓存已清，但**访客浏览器里那份坏的还在**。
   asset() 用文件内容的 md5 做 URL 后缀，所以在这里加一行注释
   就能换掉哈希、换掉 URL，让所有浏览器重新取。

   教训：反向代理会缓存源站的错误响应，源站修好前台不会自己恢复。 */