/*
Theme Name: HitMind Blog
Theme URI: https://hitmind.ai/blog/
Description: hitmind.ai/blog 的前台皮肤。父主题 Twenty Twenty-Five。设计对齐官网(hitmind-web/apps/site),颜色与字体的单一真值源是 packages/tokens/src/tokens.css。
Author: HIII PTE. LTD
Template: twentytwentyfive
Version: 0.2.6
Requires at least: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: hitmind-blog
*/

/* ==========================================================================
   设计 token —— 官网 packages/tokens/src/tokens.css 的镜像

   为什么要在这里再抄一份:WP 这边拿不到官网的构建产物,theme.json 也不支持
   引用外部 CSS 变量。**改颜色请先改官网那份,再同步到这里**,不要只改一处。

   三态主题与官网完全一致:
     :root                                    浅色(默认)
     @media (prefers-color-scheme: dark)      跟随系统,但用户显式选浅色时不生效
     [data-theme="dark"]                      用户显式选深色,两个方向都要赢

   官网那份记了一个踩过的坑,这里照搬结论:显式深色的选择器要用 :is() 不能用
   :where()——后者特异性恒为 0,打不过浅色块的 :root (0,1,0),实测完全不生效。
   ========================================================================== */

:root {
  --paper: #FCF5F3;
  --card: #FFFFFF;
  --line: #ECE4E2;

  --ink: #10150F;
  --ink2: #5A6158;
  --ink3: #657160;

  /* 品牌橙分两档(官网铁律①):--em 文字档,--em2 图形档,--hm-brand 面色不当文字用。
     浅色态品牌橙压白只有 2.51:1,拿它当正文链接色是不可读的。 */
  --em: #C2451B;
  --em2: #DE5C2E;
  --hm-brand: #FB805E;

  /* 行动位·墨:只给主 CTA */
  --btn-grad: linear-gradient(120deg, #221C19, #3A302B);
  --btn-ink: #FFF6F2;

  /* 数据位·冷青:涨/通过/已核验,不用品牌橙表达"好" */
  --pos: #0D7680;

  --danger: #B02A42;
  --gold: #C99B2E;
  --gold-ink: #7C6212;

  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15100E;
    --card: #1C1817;
    --line: #2F2928;
    --ink: #EEF2EC;
    --ink2: #A8B2A6;
    --ink3: #939D94;
    --em: #FB805E;
    --em2: #FF9470;
    --hm-brand: #FB805E;
    --btn-grad: linear-gradient(120deg, #F3EDEA, #FFFFFF);
    --btn-ink: #1A1310;
    --pos: #2FC2CE;
    --danger: #EF6F84;
    --gold: #C9A94E;
    --gold-ink: #E0BC57;
  }
}

:is([data-theme="dark"]) {
  --paper: #15100E;
  --card: #1C1817;
  --line: #2F2928;
  --ink: #EEF2EC;
  --ink2: #A8B2A6;
  --ink3: #939D94;
  --em: #FB805E;
  --em2: #FF9470;
  --hm-brand: #FB805E;
  --btn-grad: linear-gradient(120deg, #F3EDEA, #FFFFFF);
  --btn-ink: #1A1310;
  --pos: #2FC2CE;
  --danger: #EF6F84;
  --gold: #C9A94E;
  --gold-ink: #E0BC57;
}

/* 中文态字体降级——照搬官网 global.css 的处理:不给中文加载 Google Fonts
   (拖慢首屏,系统自带中文字体已够用)。注意官网那份只覆盖了 body,标题仍引用
   Bricolage Grotesque——该字体不含汉字字形,浏览器会一路 fallback 到 sans-serif,
   视觉上就是"系统中文字体 + display 字体的字重字号刻度"。这里把标题与 mono
   也显式补上中文后备,让回退链是写明白的而不是碰运气碰对的。 */
:lang(zh) body,
html[lang^="zh"] body {
  font-family: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
html[lang^="zh"] {
  --font-display: 'Bricolage Grotesque', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'PingFang SC', 'Microsoft YaHei', monospace;
}

/* ==========================================================================
   页面底层
   ========================================================================== */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  /* 0.2.6:压掉父主题 TT25 继承来的 300。Latin 字体本就没有 300 档(视觉零变化),中文会被渲染成
     PingFang 细体、整页发虚;官网中文是常规体,两边对齐(R-129 P9-21)。 */
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--em); text-underline-offset: 3px; }

/* WP 核心把 theme.json 的全局样式塞在 wp_head 优先级 8 的 global-styles 里,
   本文件作为主题样式表排在其后,同特异性下后写者赢——所以这里不需要 !important
   来压父主题,只在确实撞车的地方逐条处理。 */

/* ==========================================================================
   列表页(首页 / 分类 / 搜索 / 404)—— 0.2.0 重做

   0.1.x 的问题(2026-09-22 线上实测):列表挂在一个 constrained 布局的 <main> 里,
   WordPress 把 query 区块压到正文宽度 720px,两列各 345px,1920 宽的屏幕两边
   空出六百多像素;无封面的卡片和有封面的卡片同排高低不齐。

   现在:<main class="hm-blog"> 用 default 布局(不再被压成 720px),内容宽 1100px
   与页头胶囊对齐,三列网格;每张卡片都有封面位(无图用 SVG 母题兜底,见 inc/covers.php)。
   卡片、筛选条、hero 的结构由 inc/blog.php 输出,这里只管样子。

   视觉全部取自官网现有组件,没有新造:
     hero 的药丸标签      ← layout.css .eyebrow
     分类胶囊 / 计数行    ← 已退役 blog.css 的 .fpill / .fcount(原型 09-blog)
     搜索框              ← tools-hub.css .tsearch(官网 /tools 页那一个)
     卡片                ← blog.css .post-card、tools-hub.css .tool 的圆角/描边/悬浮
     精选卡              ← blog.css .featured
     空态                ← tools-hub.css .tempty
   ========================================================================== */

main.wp-block-group.hm-blog {
  max-width: 1164px;
  padding: 0 32px;
}

.hm-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── hero ── */
.hm-hero { padding: 64px 0 40px; max-width: 820px; }
.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hm-brand) 65%, var(--ink) 15%);
  background: color-mix(in srgb, var(--hm-brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hm-brand) 32%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
}
.hm-eyebrow .hm-pulse { width: 2px; height: 12px; border-radius: 1px; background: var(--em2); }
.hm-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 20px 0 0;
  text-wrap: balance;
}
.hm-hero h1 .hm-q { color: var(--em); }
/* 全站唯一的衬线斜体强调——官网 h2 里的 .serif 高亮词用的就是这个 */
.hm-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--em); }
.hm-hero h1 .hm-serif { letter-spacing: -.01em; padding-right: .04em; }
.hm-hero .hm-sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink2);
  max-width: 600px;
  margin: 16px 0 0;
  text-wrap: pretty;
}
.hm-nw { white-space: nowrap; }
/* 小标签(section 头、CTA 头用):纯文字,等宽大写 */
.hm-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em);
  margin: 0 0 14px;
}

/* ── 筛选条:分类胶囊 + 搜索框 ── */
.hm-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0 16px;
  border-top: 1px solid var(--line);
}
.hm-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.hm-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--ink2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.hm-pill:hover { color: var(--ink); border-color: var(--ink3); }
.hm-pill.is-on {
  background: var(--btn-grad);
  color: var(--btn-ink);
  border-color: transparent;
}
.hm-pill-n { font-size: 12px; opacity: .6; }
.hm-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hm-dot, var(--ink3));
  flex: none;
}
.hm-pill:focus-visible,
.hm-tag:focus-visible,
.hm-search-clear:focus-visible {
  outline: 2px solid var(--em2);
  outline-offset: 2px;
}

.hm-search {
  position: relative;
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 8px 0 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s, box-shadow .2s;
}
.hm-search:focus-within {
  border-color: var(--em2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--em2) 20%, transparent);
}
.hm-search svg { flex: none; color: var(--ink3); }
.hm-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
}
.hm-search input::placeholder { color: var(--ink3); }
/* 浏览器自带的清除叉和我们的清除钮会叠成两个 */
.hm-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hm-kbd {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--ink3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 7px;
  transition: opacity .2s;
}
.hm-search:focus-within .hm-kbd { opacity: 0; }
/* 「/」是键盘快捷键,触屏设备上没有意义 */
@media (hover: none) and (pointer: coarse) { .hm-kbd { display: none; } }
.hm-search-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink2);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
.hm-search-clear:hover { background: var(--ink); color: var(--paper); }

.hm-count {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink3);
  margin: 0 0 30px;
}

/* ── 分类配色 ──
   沿用已退役官网博客的四类配色(blog.css .tag.playbook/.data/.public/.product),
   按 slug 前缀匹配(playbook 与 playbook-zh 同色)。不在表里的分类走中性灰,
   新建分类不会出现「没有颜色」的半残状态。 */
[data-cat^="playbook"] { --hm-cat: var(--em); --hm-cat-bg: color-mix(in srgb, var(--em) 10%, transparent); --hm-dot: var(--em2); }
[data-cat^="data"]     { --hm-cat: var(--gold-ink); --hm-cat-bg: color-mix(in srgb, var(--gold) 16%, transparent); --hm-dot: var(--gold); }
[data-cat^="public"],
[data-cat^="build"]    { --hm-cat: var(--ink2); --hm-cat-bg: color-mix(in srgb, var(--ink) 7%, transparent); --hm-dot: var(--ink3); }
[data-cat^="product"]  { --hm-cat: var(--pos); --hm-cat-bg: color-mix(in srgb, var(--pos) 12%, transparent); --hm-dot: var(--pos); }

/* ── 卡片网格 ── */
.hm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hm-grid > li { display: flex; margin: 0; min-width: 0; }

.hm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.hm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -26px color-mix(in srgb, var(--ink) 24%, transparent);
}

/* 封面位:所有卡片同一个比例,有图无图一样高 */
.hm-cover {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
  border-bottom: 1px solid var(--line);
}
.hm-cover img,
.hm-cover svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.hm-card:hover .hm-cover img,
.hm-card:hover .hm-cover svg { transform: scale(1.035); }

/* 深色模式下的母题封面。
   以青色(--pos)铺满底色的五套,深色态 --pos 会变成亮青 #2FC2CE,一整块亮青在深色页面
   上刺眼,上面画形状用的 --card 又变成近黑,对比关系全反了。这五套在深色态锁回浅色
   token——画面与浅色态完全一样(深青底 + 浅色图形),放在深色页面上也不扎眼。
   以纸色为底的另外五套跟随主题:深色态自然变成深底浅图,本来就好看,不锁。
   只锁 <svg> 自己,不锁外面的 .hm-cover:封面下沿那条分隔线要继续跟随深色主题。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm-cover--art:is([data-art="pl-ledger"], [data-art="crawler-gates"], [data-art="audit-calendar"], [data-art="link-graph"], [data-art="llms-sheet"]) > svg {
    --paper: #FCF5F3; --card: #FFFFFF; --line: #ECE4E2;
    --ink: #10150F; --ink2: #5A6158; --ink3: #657160;
    --pos: #0D7680; --danger: #B02A42; --gold: #C99B2E;
  }
}
:is([data-theme="dark"]) .hm-cover--art:is([data-art="pl-ledger"], [data-art="crawler-gates"], [data-art="audit-calendar"], [data-art="link-graph"], [data-art="llms-sheet"]) > svg {
  --paper: #FCF5F3; --card: #FFFFFF; --line: #ECE4E2;
  --ink: #10150F; --ink2: #5A6158; --ink3: #657160;
  --pos: #0D7680; --danger: #B02A42; --gold: #C99B2E;
}

.hm-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 20px;
}
/* 顶行:分类胶囊 + 日期。没有分类的文章只剩日期,这一行照样有内容、有高度 */
.hm-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 22px; }
.hm-card-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3);
}
.hm-tag {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hm-cat, var(--ink2));
  background: var(--hm-cat-bg, color-mix(in srgb, var(--ink) 6%, transparent));
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
}
.hm-tag:hover { box-shadow: inset 0 0 0 1px currentColor; }
.hm-flag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3);
}

.hm-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 12px 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.hm-card-title a { color: inherit; text-decoration: none; }
/* 整卡可点:标题链接撑满整张卡(卡片是 position:relative 的包含块,
   标题的 overflow:hidden 裁不到它)。标签胶囊 z-index 更高,仍能单独点。 */
.hm-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.hm-card-title a:focus-visible { outline: none; }
.hm-card-title a:focus-visible::after {
  border-radius: 20px;
  outline: 2px solid var(--em2);
  outline-offset: -2px;
}
.hm-card-excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.hm-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3);
}
.hm-dot { opacity: .7; }
.hm-go { margin-left: auto; flex: none; color: var(--ink3); transition: transform .25s, color .25s; }
.hm-card:hover .hm-go { color: var(--em); transform: translateX(3px); }

/* ── 精选卡(首页第 1 页):左封面右文字,横跨整行 ── */
.hm-feature-wrap { margin: 0 0 32px; }
.hm-card--feature {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  border-radius: 24px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent),
              0 40px 90px -40px color-mix(in srgb, var(--em2) 26%, transparent);
}
.hm-card--feature:hover { transform: translateY(-5px); }
.hm-card--feature .hm-cover {
  aspect-ratio: auto;
  min-height: 400px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.hm-card--feature .hm-card-body { justify-content: center; padding: 44px 44px 36px; }
.hm-card--feature .hm-card-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 18px 0 14px;
  -webkit-line-clamp: 4;
}
.hm-card--feature .hm-card-title a:focus-visible::after { border-radius: 24px; }
/* 精选卡标题短、字大,不需要截行;改用 balance,避免「…当损益表 / 读」这种孤字 */
.hm-card--feature .hm-card-title { display: block; -webkit-line-clamp: unset; text-wrap: balance; }
.hm-card--feature .hm-card-excerpt { font-size: 16.5px; line-height: 1.7; -webkit-line-clamp: 4; }
.hm-read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--em);
}
.hm-card--feature .hm-card-meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ── 空态:不做死胡同,给分类与「全部文章」出路 ── */
.hm-empty {
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 22px;
  padding: 48px 32px;
}
.hm-empty h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
}
.hm-empty p { margin: 0 auto; max-width: 480px; font-size: 16px; line-height: 1.7; color: var(--ink2); }
.hm-empty-outs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* 404:最新三篇上方补一个小标题的位置由计数行让出来,这里只收紧 hero */
.hm-blog--404 .hm-hero { padding-bottom: 32px; }

/* 列表页尾的体检 CTA 与网格同宽 */
.hm-post-cta.hm-post-cta--wide { max-width: none; margin-top: 88px; padding: 26px 30px; }

@media (max-width: 1020px) {
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .hm-card--feature { grid-template-columns: 1fr; }
  .hm-card--feature .hm-cover { aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hm-card--feature .hm-card-body { padding: 32px 32px 28px; }
  .hm-search { flex-basis: 260px; }
}
@media (max-width: 860px) {
  main.wp-block-group.hm-blog { padding: 0 20px; }
  .hm-hero { padding: 40px 0 28px; }
  .hm-hero h1 { font-size: 40px; }
  .hm-hero .hm-sub { font-size: 17px; }
  /* 窄屏:搜索框占满一行放上面,分类胶囊一行横滑,不折成三四行把网格挤下去 */
  .hm-toolbar { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 18px; }
  .hm-search { order: -1; flex: none; width: 100%; box-sizing: border-box; }
  .hm-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 2px 20px;
  }
  .hm-cats::-webkit-scrollbar { display: none; }
  .hm-card--feature .hm-card-title { font-size: 26px; }
  .hm-post-cta.hm-post-cta--wide { margin-top: 64px; }
}
@media (max-width: 640px) {
  .hm-grid { grid-template-columns: 1fr; gap: 20px; }
  .hm-hero h1 { font-size: 34px; }
  .hm-card--feature .hm-card-body { padding: 24px 22px 22px; }
  .hm-card--feature .hm-card-title { font-size: 23px; }
  .hm-card--feature .hm-card-excerpt { font-size: 15.5px; }
  .hm-empty { padding: 36px 22px; }
}
@media (max-width: 480px) {
  main.wp-block-group.hm-blog { padding: 0 16px; }
  .hm-cats { margin: 0 -16px; padding: 2px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-card, .hm-cover img, .hm-cover svg { transition: none; }
  .hm-card:hover, .hm-card--feature:hover { transform: none; }
  .hm-card:hover .hm-cover img, .hm-card:hover .hm-cover svg { transform: none; }
  .hm-go { transition: none; }
  .hm-card:hover .hm-go { transform: none; }
}

/* ==========================================================================
   文章页 —— 官网 blog-post.css 的正文排版
   ========================================================================== */

.wp-block-post-content {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink2);
}
.wp-block-post-content > p { margin: 0 0 20px; }
.wp-block-post-content b,
.wp-block-post-content strong { color: var(--ink); }

.wp-block-post-content h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin: 52px 0 16px;
  /* 官网的导航是 sticky 的,锚点跳转不留这个余量会把标题顶到导航底下 */
  scroll-margin-top: 96px;
}
.wp-block-post-content h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 34px 0 12px;
  scroll-margin-top: 96px;
}

.wp-block-post-content ul,
.wp-block-post-content ol { padding-left: 22px; color: var(--ink2); }
.wp-block-post-content li + li { margin-top: 7px; }
/* 正文直接子级的列表补下外边距,不然紧贴下一段(嵌套列表不受影响,R-129 P9-21) */
.wp-block-post-content > ul,
.wp-block-post-content > ol { margin: 0 0 20px; }

/* 全站唯一用衬线斜体做强调的位置 */
.wp-block-post-content blockquote {
  border-left: 3px solid var(--em2);
  margin: 28px 0;
  padding: 2px 0 2px 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}

.wp-block-post-content :not(pre) > code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 4px;
  padding: .12em .34em;
}
.wp-block-post-content pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  overflow-x: auto;
}

.wp-block-post-content img,
.wp-block-post-content figure img { border-radius: 12px; }

.wp-block-post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.65;
}
.wp-block-post-content th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
  text-align: left;
  padding: 10px 12px;
}
.wp-block-post-content td { padding: 10px 12px; }
.wp-block-post-content tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
/* 发文管线给每个 th/td 写死了浅色内联样式(border:1px solid #e3e6ea;th 还有 background:#f6f8fa)。
   深色主题下表头变白底灰字(对比度 2.06:1)+ 亮线描边;GFM 对齐列(style="text-align:right")又不带这些,
   于是半边框(R-129 P9-06)。内联样式只有 !important 压得住:描边与表头底色统一收回主题 token,
   存量 58 篇与以后的新稿一次覆盖,不用改管线、不用回写。别写成 th[style]:只带 text-align 的格子也要补边框。 */
.wp-block-post-content table th,
.wp-block-post-content table td { border: 1px solid var(--line) !important; }
.wp-block-post-content table th { background: color-mix(in srgb, var(--ink) 3.5%, transparent) !important; }

@media (max-width: 860px) {
  .wp-block-post-content { font-size: 16px; }
  .wp-block-post-content h2 { font-size: 24px; }
}

/* ==========================================================================
   页头「药丸导航」—— 复刻官网 layout.css 的 .nav / .nav-pill
   ========================================================================== */

/* header 模板部件本身不参与布局,让 .hm-nav 的 sticky 以整页为范围——否则它只能在部件那几十像素里
   「粘」,一滚就走,和官网常驻的药丸不一致(R-129 P9-03)。也因此窄屏登录条(.hm-nav-signin,同在部件里)
   不会跟着粘住。 */
header.wp-block-template-part { display: contents; }
/* 登录了 WP 的编辑 / 管理员会看到管理员栏(fixed,32px;≤782px 时 46px):药丸粘住后上沿会被它压住。
   ≤600px 管理员栏是 absolute、会跟着滚走,不用让(R-137 核验)。游客不受影响。 */
.admin-bar .hm-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .hm-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .hm-nav { top: 0; } }

.hm-nav {
  /* sticky 已建立包含块,.hm-nav-utils 宽屏时相对它绝对定位到右上角。
     胶囊距顶 18px 由下面的 padding-top 给,所以 top 是 0(0.2.6 前写 18px,一粘住就变成距顶 36px) */
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 0;
}
.hm-nav-pill {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1100px;
  width: 100%;
  padding: 10px 14px 10px 18px;
  /* 官网那层毛玻璃:半透明卡片底 + backdrop blur。color-mix 让它跟着主题走,
     不用为深浅两套各写一个 rgba。 */
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 34px -22px color-mix(in srgb, var(--ink) 40%, transparent);
}

.hm-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.hm-logo-mark {
  /* 官网 Header.astro 那枚标记的原件(512 画布内联 SVG)。此前这里只是一个
     `background: var(--hm-brand)` 的圆角方块——占位忘了换,线上就是一坨橙色色块,
     跟官网并排一看立刻露馅。标记自带圆角矩形底,所以这里不再画 border-radius/背景,
     否则深色主题下会在 SVG 外圈多出一道橙边。 */
  width: 26px; height: 26px;
  flex: none;
  display: block;
}
.hm-logo-mark svg { width: 100%; height: 100%; display: block; }
.hm-logo-mark-lg { width: 28px; height: 28px; }
/* 页脚品牌锁定组:标记 + 字标一行,与官网 Footer.astro 同构 */
.hm-foot-lockup { display: flex; align-items: center; gap: 9px; }
/* 字标:0.2.2 起是矢量(inc/wordmark.php),不再用 display 字体排。
   外层 span 只负责定高与颜色,SVG 按 1em 跟着走;字形吃 currentColor,
   两个 i 上的橙点在 SVG 里写死 --hm-brand。 */
.hm-logo-word {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}
.hm-word-svg {
  display: block;
  height: 1em;
  width: auto;
}

.hm-nav-links { display: flex; gap: 20px; margin-left: 8px; }
.hm-nav-links a {
  font-size: 14.5px;
  color: var(--ink2);
  text-decoration: none;
  white-space: nowrap;
}
.hm-nav-links a:hover { color: var(--ink); }
.hm-nav-links a.on { color: var(--em); font-weight: 600; }

.hm-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.hm-theme-tog {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px;
  color: var(--ink2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.hm-theme-tog:hover { color: var(--ink); border-color: var(--ink3); }

/* ── 顶栏工具位:贴视口右上角 ──
   与官网 .nav-utils 同一套决策与同一种材质(见 apps/site/src/styles/layout.css)。
   主题/语言是"设置"不是"导航",放进胶囊会跟 Product/Receipts/Pricing/Blog
   抢注意力,还把胶囊撑宽、挤掉主 CTA。

   ≥1120px 绝对定位贴右;更窄时退回文档流,变成紧挨胶囊右边的第二颗小胶囊。
   断点与官网一致,改一处就要改两处,否则访客跨站会看到导航跳位。
   博客药丸铺满版心(官网的药丸是内容宽),所以 ≥1120 另有 max-width 封顶,见下方 370 的算法——
   改断点 / 工具位尺寸 / 语言数要连 370 一起算。 */
.hm-nav-utils {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px -22px color-mix(in srgb, var(--ink) 40%, transparent);
}
.hm-nav-utils .hm-theme-tog,
.hm-nav-utils .hm-lang-tog {
  border-color: transparent;
  background: transparent;
  white-space: nowrap;
}
.hm-nav-utils .hm-theme-tog:hover,
.hm-nav-utils .hm-lang-tog:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
/* 语言钮:与主题钮同一颗胶囊里的同一种外观(官网 layout.css 的 .lang-tog 同构) */
.hm-lang-tog {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
}
.hm-lang-tog:hover { color: var(--ink); }
.hm-nav-utils-div { width: 1px; height: 16px; flex: none; background: var(--line); }
@media (min-width: 1120px) {
  /* .hm-nav 顶部有 18px 内边距:50% 是含内边距的整块高度的一半,药丸中线要再下移 9px */
  .hm-nav-utils { position: absolute; right: 24px; top: calc(50% + 9px); transform: translateY(-50%); }
  /* 药丸居中,两侧各让出「右边距 24 + 工具位最宽 136 + 间距 24」,否则铺满的药丸会在 1120–1430px
     盖住右上角工具位、把「Run a free audit」右端压在主题钮底下(R-129 P9-02,1280 宽盖 69px)。
     药丸是 content-box:外宽 = max-width + 34,容器内容宽 = 100% = 视口 − 32,
     所以 X = 2 + 2×(24+136+24) = 370。只放在这一档:<1120 工具位在文档流里,药丸自己会被 flex 挤窄。 */
  .hm-nav-pill { max-width: min(1100px, calc(100% - 370px)); }
}
@media (max-width: 1119.98px) {
  .hm-nav { gap: 10px; }
}

/* 与官网 layout.css .nav-login 同一套(14px / 500 / 悬停转墨色):同一个「登录」,两边别一粗一细、一橙一墨 */
.hm-nav-login { font-size: 14px; font-weight: 500; color: var(--ink2); text-decoration: none; white-space: nowrap; transition: color .2s; }
.hm-nav-login:hover { color: var(--ink); }

.hm-cta {
  display: inline-flex; align-items: center;
  background: var(--btn-grad);
  color: var(--btn-ink);
  font-size: 14.5px; font-weight: 700;
  border-radius: 999px;
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
}

/* 窄屏按官网的取舍砍:先砍导航链接,再砍「登录」(0.2.4 前这一位是「加入白名单」),
   主题钮和主 CTA 是四件套硬标准,不砍。≤560 砍掉的「登录」由胶囊下一行 .hm-nav-signin 补回(0.2.6)。 */
p.hm-nav-signin { display: none; }
@media (max-width: 860px) { .hm-nav-links { display: none; } }
@media (max-width: 560px) {
  .hm-nav-login { display: none; }
  /* 与官网 Header 的 p.nav-signin 同一句、同一个位置(R-115 回归修复):EN 375 顶栏只剩约 1px,放不下按钮 */
  p.hm-nav-signin { display: block; text-align: center; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink3); }
  p.hm-nav-signin a { color: var(--em); font-weight: 600; text-decoration: none; margin-left: .3em; padding: 4px 0; }
  .hm-theme-tog .hm-tlabel { display: none; }
  /* 间距与官网 ≤560 的 .nav-pill 同值(0.2.6 前是 gap 12 / 左右 14·10):EN 375 胶囊 + 工具位合计 379px,
     居中溢出时左右各被切 2px、页面能横向晃(生产 0.2.5 实测),R-137 */
  .hm-nav-pill { gap: 6px; padding: 8px 8px 8px 12px; }
}
/* 超窄屏(≤440px):胶囊 + 工具位横排放不下,按官网同一笔账收尺寸而不砍内容
   —— 品牌字标和 "Run a free audit" 都保留,只缩 logo 与内边距。 */
@media (max-width: 440px) {
  .hm-nav { padding-left: 6px; padding-right: 6px; gap: 6px; }
  .hm-logo { gap: 6px; }
  .hm-logo-word { font-size: 16px; }
  .hm-logo-mark { width: 24px; height: 24px; }
  .hm-cta { padding-left: 14px; padding-right: 14px; }
  .hm-nav-utils .hm-theme-tog,
  .hm-nav-utils .hm-lang-tog { padding-left: 8px; padding-right: 8px; }
}
/* ≤370(360 宽安卓、320 宽小屏):同一笔账再收一档,仍只动尺寸不动内容(官网 layout.css 同值)。
   胶囊溢出时是居中往两边溢,外层留白救不了,只能让「胶囊 + 工具位」本身变窄:EN 360 原先差 31px、320 差 70px。 */
@media (max-width: 370px) {
  .hm-nav { gap: 4px; }
  .hm-nav-pill { gap: 4px; padding: 7px 6px 7px 10px; }
  .hm-logo { gap: 5px; }
  .hm-logo-word { font-size: 14px; }
  .hm-logo-mark { width: 22px; height: 22px; }
  .hm-cta { font-size: 13px; padding: 8px 10px; }
  .hm-nav-utils .hm-theme-tog,
  .hm-nav-utils .hm-lang-tog { padding-left: 6px; padding-right: 6px; }
}
/* ≤340(320 宽):再让出几像素,别让胶囊和工具位贴着屏幕两边(官网同值) */
@media (max-width: 340px) {
  .hm-nav-pill { padding-left: 8px; }
  .hm-logo-word { font-size: 13px; }
  .hm-cta { padding-left: 8px; padding-right: 8px; }
}

/* ==========================================================================
   页脚
   ========================================================================== */

.hm-foot {
  max-width: 1100px;
  margin: 96px auto 0;
  padding: 0 16px 48px;
  border-top: 1px solid var(--line);
}
/* 0.2.3:五列 + 社交 + 底部语言链接,尺寸与颜色照官网 layout.css 的 .sfoot / .sf-col / .sfoot-bottom */
.hm-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
  padding: 44px 0 0;
}
.hm-foot-brand p { margin: 12px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink3); max-width: 230px; }
.hm-foot-socials { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.hm-foot-social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink3);
  text-decoration: none;
}
.hm-foot-social:hover { color: var(--ink); }
.hm-foot-col b { display: block; font-size: 13.5px; letter-spacing: .06em; color: var(--ink); margin-bottom: 12px; }
.hm-foot-col a { display: block; font-size: 13.5px; color: var(--ink3); padding: 4px 0; text-decoration: none; transition: color .2s; }
.hm-foot-col a:hover { color: var(--ink); }
.hm-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding-top: 22px;
  font-size: 13.5px;
  color: var(--ink3);
}
.hm-foot-langs { display: flex; gap: 13px; font-family: var(--font-mono); font-size: 13.5px; }
.hm-foot-langs a { padding: 2px 4px; border-radius: 5px; color: var(--ink3); text-decoration: none; transition: color .2s, background .2s; }
.hm-foot-langs a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hm-foot-langs a.on { color: var(--ink); font-weight: 700; }
@media (max-width: 860px) {
  .hm-foot-grid { grid-template-columns: 1fr 1fr; }
  .hm-foot-bottom { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 560px) {
  .hm-foot-grid { grid-template-columns: 1fr; }
  .hm-foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* 父主题的演示页脚若仍被某个模板引用,一并藏掉——我们自己的页脚已经接管,
   两个页脚同时出现比没有页脚更难看。 */
.wp-block-template-part .wp-block-site-title,
.wp-block-template-part .wp-block-post-author-name { }

/* ==========================================================================
   内容区宽度:与官网正文可读宽度一致
   ========================================================================== */

main.wp-block-group { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.wp-block-post-content { max-width: 720px; margin-left: auto; margin-right: auto; }
.wp-block-post-title { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   分页 —— 对应官网 .pager / .pg
   ========================================================================== */

.wp-block-query-pagination {
  margin-top: 56px;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  display: inline-block;
  color: var(--ink2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: color .2s, border-color .2s, transform .2s;
}
.wp-block-query-pagination a:hover { color: var(--ink); border-color: var(--ink3); transform: translateY(-1px); }
.wp-block-query-pagination .current {
  background: var(--btn-grad);
  color: var(--btn-ink);
  border-color: transparent;
}

/* ==========================================================================
   文章页
   ========================================================================== */

.hm-post-hero { max-width: 720px; margin: 0 auto; padding: 56px 0 28px; }
.hm-post-hero .wp-block-post-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 14px 0 18px;
  color: var(--ink);
  text-wrap: balance;
}
/* 文章页的摘要当导语用:比正文大一号、颜色更浅,和官网 .lede 同一个角色 */
.hm-post-lede .wp-block-post-excerpt__excerpt {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink2);
}

.wp-block-post-featured-image {
  max-width: 1100px;
  margin: 0 auto 44px;
  border-radius: 18px;
  overflow: hidden;
}

/* 文内 CTA —— 官网 blog-post.css 的 .cta-box:虚线品牌橙描边,两端对齐 */
.hm-post-cta {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1.5px dashed var(--em2);
  border-radius: 18px;
}
.hm-post-cta .hm-kicker { margin-bottom: 8px; }
.hm-cta-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.hm-cta-sub { font-size: 14px; color: var(--ink3); margin: 0; }
@media (max-width: 640px) { .hm-post-cta { flex-direction: column; align-items: flex-start; } }

/* 文章页 hero 里的分类胶囊与「日期 · 阅读时长」(inc/blog.php 的 hitmind/post-meta) */
.hm-post-chip { display: flex; }
.hm-post-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* 文章页底部「继续阅读」:三张卡片,宽度放到 1100(alignwide),与列表页同一套卡片 */
.hm-related { margin: 88px auto 0; }
.hm-related .hm-kicker { margin-bottom: 10px; }
.hm-related h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 26px;
}
.hm-related .hm-card-title { font-size: 18px; }
@media (max-width: 860px) { .hm-related { margin-top: 64px; } .hm-related h2 { font-size: 24px; } }

/* 官网文章里用原生 HTML 写的导语段 */
.wp-block-post-content .lede {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 28px;
}