/* ── 🔴 根字号：**必须有**（2026-10-20 差点丢，实测抓回）──────────────────────────
   本行原在旧「页头块」的第一行，10-20 把那块换成本文件顶部的 SITE-NAV 生成块时**被顺手带走了**
   —— 而它其实是**全博客的度量基准**：Casper / Edition 主题都把 `html` 设成 `62.5%`（=10px），
   本站所有 rem 值（`.gh-content p{font-size:1.1rem}`、`nav.top{padding:1rem 2rem}`…）
   都是**按 16px 写**的。少了这一行 ⇒ 正文 17.6px → **11px**、导航 68px → 56px、
   hero 那句话 30px → 18.75px，整页缩水 37.5%（实测：摘掉本行后 `.gh-header-title` 计算值
   恰好 18.75px = 1.875rem × 10px）。
   ⚠️ 症状极其安静：不报错、不破版，只是「好像哪儿有点小」⇒ 断言 `npm run check:blog-shell`。
   ⚠️ `scroll-behavior:auto` 同理（压掉主题的平滑滚动），原样保留。 */
html{font-size:16px!important;scroll-behavior:auto}

/* <<<SITE-NAV:CSS —— 由 sync-site-nav.mjs 生成，⛔ 别手改 >>> */
nav.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(20,16,13,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(233,180,92,.14);box-sizing:border-box;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
body.home-template nav.top{background:rgba(20,16,13,.58)}
nav.top .right{display:flex;gap:10px}
nav.top .brand{display:inline-flex;align-items:center;gap:9px;font-family:Georgia,"Times New Roman",serif;font-size:20px;letter-spacing:.5px;color:#F2EADC;text-shadow:0 1px 8px rgba(0,0,0,.5);font-weight:700;text-decoration:none}
nav.top .brand .half2{color:#E9B45C}
nav.top .nav-logo{width:36px;height:36px;flex-shrink:0;color:#E9B45C;filter:none;margin-top:-1px}
nav.top .btn-sm{display:inline-block;text-decoration:none;cursor:pointer;border:1.5px solid rgba(233,180,92,.65);color:#F2EADC;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:600;background:rgba(28,22,17,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);white-space:nowrap;line-height:1.2;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
nav.top .btn-sm:hover{background:rgba(28,22,17,.85)}
nav.top .right .auth-in{display:none}
html[data-auth="in"] nav.top .right .auth-out{display:none}
html[data-auth="in"] nav.top .right .auth-in{display:inline-block}
@media (max-width:640px){nav.top{padding:.5rem .75rem}}
@media (max-width:390px){nav.top .btn-sm{padding:7px 10px}}
@media (max-width:375px){nav.top .btn-sm{padding:7px 6px}}
@media (max-width:350px){nav.top .btn-sm{padding:7px 4px}}
@media (max-width:344px){nav.top .btn-sm{white-space:normal}}
@media (max-width:360px){nav.top .nav-logo{width:28px;height:28px}nav.top .brand{font-size:18px}}
.pupil{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%;
       animation:blink 13s cubic-bezier(.4,0,.2,1) infinite}
@keyframes blink{
  0%,24%{transform:translateX(0) scaleY(1)}
  30%,42%{transform:translateX(1.1px) scaleY(1)}
  48%,60%{transform:translateX(-1.1px) scaleY(1)}
  66%,81.5%{transform:translateX(0) scaleY(1)}
  84%{transform:translateX(0) scaleY(.42)}
  87%{transform:translateX(0) scaleY(.42)}
  89.5%,100%{transform:translateX(0) scaleY(1)}
}
@media (prefers-reduced-motion:reduce){.pupil{animation:none;transform:scaleY(1)}}
/* <<<END SITE-NAV>>> */

/* ── 详情页尾部 + 全站页脚（2026-10-22 站主令）────────────────────────────────
   站主原话：「详情页底部不需要有 Read more …… 整个顶部底部参考露营站，露营站是之前调教过的」。

   **① 删掉 "Read more"**：Source 主题在文章页末尾会自动加一块
   `<section class="gh-container is-grid gh-outer"><h2 class="gh-container-title">Read more</h2>…` + 3 张关联卡。
   露营站（Casper）文章页**没有这块**（它那儿唯一的 "Read more" 是作者头像的 aria-label，看不见）。
   ⇒ 只在 `post-template` 上隐藏，归档页用同一个 `is-grid` 容器时不受影响。

   **② 藏掉 Ghost 出厂页脚**：`.gh-footer` 里是「Sign up / 订阅邮箱输入框 / Powered by Ghost」，
   placeholder 还是 `jamie@example.com` —— 我们**不办 newsletter**，这三样都是出厂填充内容。
   换成服务端注入的 `.ftg-footer`：**只有两行**（披露 + 版权），与 4 张静态页 / SPA 法务页同一形态。
   🔴 「其他页很简单、只有首页多」——露营站首页 `.landing-footer` 才有那行链接；
   文章页/法务页的页脚**没有链接行**（站主 2026-10-22 第二次校正：我第一版加了链接行被否）。
   回列表靠 nginx/blog-inject.js 注入的 `.cm-fab`（左下角固定「← Back to Guides」）。

   ③ 颜色判据：白底正文页上页脚必须 ≥4.5:1。旧的注入式页脚用 `#8aaa9a`，白底只有 **2.4:1**（不合格）；
   `#3f5b5e` 是 **7.2:1**，色相仍在品牌青带内。                                                      */
body.post-template .gh-container.is-grid{display:none!important}
body .gh-footer{display:none!important}
.ftg-footer{border-top:1px solid rgba(6,34,42,.12);margin:3rem 0 0;padding:2rem 1rem 2.5rem;text-align:center;font-size:.75rem;line-height:1.5}
.ftg-footer p{margin:0 0 .25rem;color:#3f5b5e}
.ftg-footer p:last-child{margin-bottom:0}
.ftg-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ftg-footer a:hover{color:#227f74}
@media (max-width:640px){.ftg-footer{padding:1.5rem 1rem 2rem}}

/* ===== Typography (detail + overview pages) ===== */
.gh-article-title,.article-title,h1.gh-article-title{font-size:clamp(2rem,4vw,3.5rem)!important;line-height:1.15!important}
.gh-article,.gh-content,.gh-article p,.gh-content p,.gh-article li,.gh-content li{font-size:1.15rem!important;line-height:1.7!important}
.gh-article h2,.gh-content h2{font-size:2rem!important;line-height:1.25!important}
.gh-article h3,.gh-content h3{font-size:1.5rem!important;line-height:1.3!important}
.gh-article h4,.gh-content h4,.gh-article h5,.gh-content h5{font-size:1.25rem!important;line-height:1.4!important}
figcaption,.gh-article figcaption,.gh-content figcaption{font-size:0.875rem!important;line-height:1.4!important}

/* ── 强调色：🔴 必须改成品牌色（2026-10-21 实测抓到）────────────────────────────
   线上 `--ghost-accent-color` 一直是 **Ghost 出厂粉 `#FF1A75`**。
   在「文章还没有任何 tag」的时候它看不见，所以一直没被发现；一旦给文章加主标签，
   标题上方那行 `.gh-article-tag` 和内文链接会**整片变粉** —— 与品牌青直接打架。
   配色按 §品牌色：记号`#2a9d8f`（对比度 2.88，只做记号不做文字）/ 填充`#227f74`（白字 4.82）。
   标签与链接都是**白底上的文字** ⇒ 只能用后者。
   判据：`npm run check:blog-inject` 断言这里等于 `#227f74`。 */
:root{--ghost-accent-color:#227f74!important}

/* ── 概览页卡片（主题 = Source，渲染 `.gh-card-*`）─────────────────────────────
   🔴 2026-10-21：本块原先写的是 `.post-card-*` —— 那是**露营站（Casper 4）的类名**。
   本仓主题是 Source，卡片渲染 `.gh-card-*` ⇒ 这 5 条**一条都没生效**。
   实测：`blog-inject.css` 里 88 个 class 选择器，49 个在列表/详情/作者三页都命中不到任何元素。
   这不是"少写了什么"，是**照搬露营站时主题换了、类名没换**（同型还有 blog-inject.js 的
   `addBylines()` 与 nginx 里那行强推单列的 `<style>`，已一并处理）。
   · 只调字号/字重，**不动布局**：`is-list` 布局由主题给（桌面 图左 220px + 文右）。
   · 标签继承 `--ghost-accent-color`，上面已改成品牌青 ⇒ 此处只管字重与字距。 */
.gh-card-title{font-size:1.5rem!important;line-height:1.25!important}
.gh-card-excerpt{font-size:1rem!important;line-height:1.55!important}
.gh-card-meta,.gh-card-meta *{font-size:0.8rem!important}
.gh-card-author{font-weight:600}
.gh-card-tag{font-weight:600!important;letter-spacing:.06em!important}
@media(max-width:640px){.gh-card-title{font-size:1.25rem!important}.gh-card-excerpt{font-size:0.95rem!important}.gh-card-meta{flex-wrap:wrap!important;row-gap:2px!important}}

/* 详情页主标签（标题上方那行）—— 同样继承品牌青，只压字距 */
.gh-article-tag{font-weight:600!important;letter-spacing:.06em!important}

/* ===== Hide Ghost portal ===== */
#ghost-portal-root,.gh-portal,.gh-portal-btn{display:none!important}

/* ===== Hide Casper header ===== */
.gh-head,.gh-head-logo,.gh-head-brand,.gh-head-menu,.gh-head-actions,.gh-head-members,.gh-head-inner,.gh-head .gh-head-btn,.gh-head .gh-head-link,.gh-head .gh-social,.gh-head-search,.gh-search,.gh-search-trigger,.gh-search-button,#gh-navigation,.gh-navigation,.gh-nav,.gh-nav-menu{display:none!important}

/* ===== Hide Casper footer / CTA (keep site-description visible) ===== */
.site-footer,.site-footer-inner,.site-footer-nav,.site-footer .copyright,.gh-powered-by,.footer-cta,.footer-cta-inner,.footer-cta-title,.footer-cta-button,.footer-cta-input,.gh-footer-cta,.gh-footer-signup,.gh-subscribe-section,.gh-foot,.gh-footer,.gh-footer-inner,.gh-footer-nav,.gh-footer-copyright,.gh-footer-signup{display:none!important}

/* ===== Hide subscribe/signup ===== */
.gh-subscribe,.gh-subscribe-form,.gh-cta,.gh-cta-form,form[data-members-form],form[data-members-signup],.gh-signup,.gh-signup-form,.gh-portal-trigger,button[data-portal]{display:none!important}

/* ===== Content spacing ===== */
body>.gh-outer,body>.gh-cover,body>main,body>.gh-main,body>.gh-content-blocks,main.gh-main,.site-main,.article{padding-top:5rem!important}
.gh-header,.gh-cover,.gh-header.has-image{margin-top:0!important;position:relative}
.gh-viewport{margin-top:-41px!important}
.gh-header.has-image{position:relative!important;height:60vh;overflow:hidden;margin:0!important}
.gh-header.has-image .gh-header-inner,.gh-archive-header.has-image .gh-header-inner{position:absolute!important;top:calc(50% + 56px)!important;left:50%!important;transform:translate(-50%,-50%)!important;text-align:center!important;z-index:1!important;width:90%!important;max-width:720px!important}
.gh-header-image{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover!important}

/* ── 概览页 hero：本站背景图 + 压暗层 + 「一句话」（2026-10-20 站主令）──────────────
   站主原话：「博客页面的那个概览页儿的那个顶部应该有一个背景图的，就像露营一样。
              还有也要一句话，还有那个 logo，这些都和那个露营是一样的。」
   · 顶栏的 logo 与两颗按钮归**顶栏**（唯一源 `scripts/reptilesetup/site-nav.mjs`）。
   · hero 里的「记号 + 字标 + 一句话」归本块（站主 10-20 追加：「那个 logo 和商标也要加上去」）。
   · 露营站的对应物是 hero 里的 `<img class="site-logo">` + `<p class="site-description">`
     （见 campmate.ai/guides/）—— 本站照做，并且把字标也一起带上。

   图从哪来（重要）：Ghost 后台**从未配过** publication cover ⇒ 线上一直用 Ghost 自带的
   紫渐变占位图 `static.ghost.org/v5.0.0/images/publication-cover.jpg`。本仓不动 Ghost 数据，
   由 nginx `sub_filter` 把这个 URL 换成 `/media/blog-hero.jpg`。
   ⚠️ 那条替换是**自我退役**的：将来后台配了真封面，`src` 不再是默认 URL ⇒ 规则自动空转，
      不会把真封面盖掉。反向断言见 `npm run check:blog-shell`（C1/C2）。
   🔴 **这张图不能复用首页整页背景**（`page-bg-poster.jpg`）：10-20 第一版就是这么干的，
      站主当场退回 ——「不能说和这个背景是一个」。两张图是两份资产，改一张不带动另一张。

   🔴 图一换就必须有压暗层：hero 图中部常有亮色水草，白色标题直接压上去实测只有 ~2.4:1
      （AA 要 4.5:1）⇒ 没有这层遮罩 = 「合规文本读不清」。遮罩值取自首页整页背景那条渐变
      （同色系 rgba(4,22,28,…)，不是纯黑，保留水色）。
   ⚠️ 用 `::after` 而不是给 `.gh-header` 加 background：真正的图是 `<img class="gh-header-image">`
      （上面那条 object-fit:cover），background 会被它整块盖住 ⇒ 等于没写。
   🔴 层级必须显式写全（2026-10-20 实测踩过）：**主题把这张图设成 `z-index:-1`**
      （Edition/Casper 都是），负层级 = 画在**自己的背景色之下**。所以只加 `background-color`
      当「加载前的底色」会把图**整块盖死**，屏幕上只剩一片深青渐变（实测：img naturalWidth 1920、
      opacity 1，肉眼却什么都没有）。三层必须按 0 / 1 / 2 排好，谁都别留在负层级。 */
.gh-header.has-image{background-color:#06222a!important}
.gh-header.has-image .gh-header-image{z-index:0!important;object-position:50% 0%!important}
/* object-position 50% 0（2026-10-31）：现封面是竖裁横幅（2400x1600 → 60vh 窗，垂直余量 420px），
   默认 50% 时缸里的守宫头正好卡在 slogan 文字带正后方（实测截图 hero-after-17956501.png）；
   顶到 0% 后守宫整体落到标题带下方，slogan 落在雾面上。换封面图时此值要重验。 */
.gh-header.has-image::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,22,28,.5) 0%,rgba(4,22,28,.62) 52%,rgba(6,34,42,.8) 100%)}
.gh-header.has-image .gh-header-inner{z-index:2!important}

/* ── hero 里的「记号 + 字标」（2026-10-20 站主：「那个 logo 和商标也要加上去」）─────────
   标记由 nginx `sub_filter` 插在 `<h1 class="gh-header-title` 之前（见 default.conf），
   记号复用顶栏那颗 sprite `<use href="#logo-b1a">` —— 同一份 path、同一个函数产出，
   不另存一张 SVG（存了就成第二个真相源，改鱼形必漏一处）。

   🔴 必须 scope 到 `body.home-template`：`.gh-header-title` 这个类在 tag / author 页也出现，
      那些页的 hero 主角是**标签名/作者名**，再压一个站名上去等于抢主语（10-19 的
      「提问主语」纪律同理）。所以标记是**全站注入、仅概览页显示**。
   颜色沿用顶栏那一套：字标 #faf6ec，"Fix" 段 #c9ece7（深底强调段，见 GO_VIDEO 口径）。 */

/* 🔴 尺寸（2026-10-20 站主：「这个 logo 包括这个商标……是不是搞大一些比较合适」）——
   判据**不是手感**，是照抄首页 hero 四改那条已锁定的：**记号墨迹高 ≈ 字标 cap-height**，
   比值落 1.0–1.2。首页四档（88/44·72/36·56/28·48/24）实测全是 **1.047**，因为
   记号墨迹纵向只填框高的 36.29%、Georgia cap-height = 0.694em ⇒ 恒等式
        S×0.3629 / (F×0.694) = 1.047  ⇒  **S/F ≈ 2.0**
   旧值 40/24 = 1.67 ⇒ 比值 0.87，**鱼比名字还矮** —— 跟上首页 10-17 三改被推翻时
   一模一样的算术错误（那时也是只看外框、没看墨迹）。

   ⚠️ 但**不要照抄首页的 88**：首页 hero 的预算是被 900px 折线卡死的（② 区要整块进首屏，
   实测可用上限约 110px），所以它只能横着长。本页（概览页 cover）没有这个约束：
   实测 hero 盒高**不由内容决定** —— 760 视口 456px、900 视口 540px，把 mast 从 40
   放大到 120 三档实测 heroH 恒为 456 ⇒ **放大不吃任何预算**（不撑长页面）。
   且封面只有「记号+字标」和「一句话」两件，没有 CTA / trust 来抢视觉重量。

   ⇒ 取 104/52（仍是 2.0 比），mast 宽 460px / 占 1440 的 31.9%；字标 52 对那句话 30
      = 1.73，落在「报头 : 副题」的 1.6–1.8 常见区间。
   ⛔ 再上去 120/60（mast 529px、占 36.8%、高度吃掉 456 的四分之一）实测已让那句话掉成
      脚注；88/44 则回落到「偏保守、与口号落差不够」。三档截图见 10-20 日志。
   ⛔ 别动 `.gh-header-title` 的字号来"配合"：那条规则是全局的，tag / author 页的 h1 也吃它。 */
.ftg-hero-mast{display:none}
/* 🔴 2026-10-21：mast 与标语之间的间距**唯一来源是 .gh-header-inner 的 gap**，不是这里的 margin。
   幽灵主题默认 `.gh-header-inner{display:flex;flex-direction:column;gap:48px}`，而 flex 的 gap 是
   「最小间距」：margin-bottom 24px < gap 48px ⇒ 浏览器取 48 ⇒ 那 24px **从未生效**（死代码）。
   上一版「调 mast 的 margin 让两块贴近」等于没调，实测两块之间恒 48px。
   ⇒ 现在把 margin 清 0，间距交给下面那条 `body.home-template .gh-header-inner{gap:…}` 统一管，
      改间距只改一个地方；⛔ 别再把 margin-bottom 加回来（那会造出第二套间距源，gap 调小后突然叠加）。 */
body.home-template .ftg-hero-mast{display:flex;align-items:center;justify-content:center;
  gap:18px;margin:0}
/* 48（主题默认）→ 16。scope 到 home-template 是必须的：`.gh-header-inner` 这个类在
   tag / author 页也出现（那些页没有 mast，别动它们的间距）。 */
body.home-template .gh-header-inner{gap:16px}
.ftg-hero-mast .ftg-hero-logo{width:104px;height:104px;flex:0 0 auto;color:#faf6ec;
  filter:drop-shadow(0 2px 12px rgba(0,30,36,.55))}
.ftg-hero-mast .ftg-hero-wordmark{font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:52px;letter-spacing:.01em;line-height:1;color:#F2EADC;
  text-shadow:0 2px 22px rgba(0,0,0,.62)}
/* 「Reptile」段走品牌金 —— canon = site-nav HEADER_HTML 的 <span style="color:#E9B45C">Reptile</span>Setup */
.ftg-hero-mast .ftg-hero-fix{color:#E9B45C}
/* 五档按同一条 2.0 比反推，不逐档拍脑袋（首页四档同构，且记号 104/88/72/56/48
   正好把首页那四档 88/72/56/48 全包含在内）。
   🔴 断点不是按"设备宽度"拍的，是按**字标 : 那句话 ≤ 1.85** 反推出来的：
      `.gh-header-title` 是 clamp(1.375rem,3.2vw,1.875rem) ⇒ 22px（≤687 宽）～30px（≥937）。
      若 641–768 还留 44px 字标，比值会到 2.0（字标成了正文两倍，那句话掉成脚注）——
      实测在 641 宽抓到。所以把降档点压到 768/900，让两族同步缩。 */
/* 五档间距与字标同源（判据见上）：标语不能被字标压成脚注。48 → 16 后小屏同步收。
   ⚠️ `.ftg-hero-mast` 的 gap 是 **mast 内部**（记号 ↔ 字标的水平间距），
      `.gh-header-inner` 的 gap 才是 **mast ↔ 标语** 的垂直间距，别混。 */
@media(max-width:900px){body.home-template .gh-header-inner{gap:14px}
  body.home-template .ftg-hero-mast{gap:16px}
  .ftg-hero-mast .ftg-hero-logo{width:88px;height:88px}
  .ftg-hero-mast .ftg-hero-wordmark{font-size:44px}}
@media(max-width:768px){body.home-template .gh-header-inner{gap:12px}
  body.home-template .ftg-hero-mast{gap:14px}
  .ftg-hero-mast .ftg-hero-logo{width:72px;height:72px}
  .ftg-hero-mast .ftg-hero-wordmark{font-size:36px}}
@media(max-width:440px){body.home-template .gh-header-inner{gap:10px}
  body.home-template .ftg-hero-mast{gap:12px}
  .ftg-hero-mast .ftg-hero-logo{width:56px;height:56px}
  .ftg-hero-mast .ftg-hero-wordmark{font-size:28px}}
@media(max-width:360px){body.home-template .gh-header-inner{gap:8px}
  body.home-template .ftg-hero-mast{gap:10px}
  .ftg-hero-mast .ftg-hero-logo{width:48px;height:48px}
  .ftg-hero-mast .ftg-hero-wordmark{font-size:24px}}
/* 「一句话」= hero 里那个 h1（其文本由 nginx 换成本站口号，见下）。字号刻意做成
   「一句话」而不是「头条」：与首页 `.slogan` 同一套语言（Georgia + 字距），
   但不取 21px —— 它毕竟是本页唯一的 h1，太小会被读成图片说明。 */
.gh-header-title{color:#f4fbf9!important;font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(1.375rem,3.2vw,1.875rem)!important;line-height:1.35!important;letter-spacing:.2px;
  text-shadow:0 2px 18px rgba(0,22,28,.65)!important;text-wrap:balance;max-width:44rem;margin:0 auto!important}
@media(max-width:640px){.gh-header-title{font-size:1.25rem!important}}

/* ===== FAB ===== */
.cm-fab{position:fixed;bottom:1.5rem;left:1.5rem;z-index:999;display:flex;align-items:center;gap:0.375rem;padding:0.4rem 0.75rem;line-height:1.2!important;background:rgba(6,34,42,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(190,232,228,0.18);border-radius:8px;color:#eaf4f2;font-size:0.75rem;font-weight:500;text-decoration:none;transition:all 0.25s ease;box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.cm-fab span{line-height:1!important;display:inline-block}.cm-fab:hover{color:#2a9d8f;border-color:rgba(42,157,143,0.35);background:rgba(6,34,42,0.7);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.3)}

@media(max-width:640px){
  .gh-header.has-image{height:55vh!important}.gh-header.has-image .gh-header-inner{top:calc(50% + 24px)!important}.gh-viewport{margin-top:0!important}
  body>.gh-outer,body>.gh-cover,body>main,body>.gh-main,main.gh-main,.site-main,.article{padding-top:3rem!important}
  .gh-article-title,.article-title,h1.gh-article-title{font-size:clamp(1.75rem,5vw,2.5rem)!important;line-height:1.2!important}
  .gh-article,.gh-content,.gh-article p,.gh-content p,.gh-article li,.gh-content li{font-size:1.1rem!important;line-height:1.6!important}
  .gh-article h2,.gh-content h2{font-size:1.6rem!important;line-height:1.25!important}
  .gh-article h3,.gh-content h3{font-size:1.3rem!important;line-height:1.3!important}
  .gh-article h4,.gh-content h4,.gh-article h5,.gh-content h5{font-size:1.1rem!important;line-height:1.35!important}
  figcaption,.gh-article figcaption,.gh-content figcaption{font-size:0.85rem!important;line-height:1.4!important}
}
/* ===== Article typography — polished for American readers ===== */
/* Content width: 720px max for comfortable reading */
.gh-content,.gh-canvas{max-width:720px!important;margin-left:auto!important;margin-right:auto!important}
/* Body text: 17.6px/1.6 — clean and readable */
.gh-content p,.gh-article p{font-size:1.1rem!important;line-height:1.6!important;margin-bottom:1.25em!important}
/* Remove ghost empty-paragraph spacing hack */
.gh-content p:empty,.gh-article p:empty{display:none!important}
/* Headings: tighter spacing */
.gh-content h2,.gh-article h2{font-size:1.75rem!important;line-height:1.25!important;margin-top:2.5rem!important;margin-bottom:0.75rem!important;font-weight:700!important}
.gh-content h3,.gh-article h3{font-size:1.35rem!important;line-height:1.3!important;margin-top:2rem!important;margin-bottom:0.5rem!important;font-weight:700!important}
/* Lists */
.gh-content li,.gh-article li{font-size:1.1rem!important;line-height:1.6!important;margin-bottom:0.4em!important}
/* Tables */
.gh-content table{width:100%!important;max-width:100%!important;border-collapse:collapse!important;margin:1.5rem 0!important}
.gh-content td,.gh-content th{padding:10px 14px!important;text-align:left!important;border-bottom:1px solid #e0e0e0!important;font-size:1rem!important}
.gh-content th{font-weight:700!important;color:#333!important;border-bottom-width:2px!important}
/* Blockquotes */
.gh-content blockquote{border-left:3px solid #2a9d8f!important;padding-left:1.5rem!important;margin:1.5rem 0!important;color:#555!important;font-style:italic!important}
/* Horizontal rules */
.gh-content hr{margin:2rem 0!important;border:none!important;border-top:1px solid #e0e0e0!important}
/* Figure captions */
.gh-content figcaption,.gh-content figcaption p{font-size:0.85rem!important;color:#888!important;text-align:center!important;margin-top:0.5rem!important}
/* Mobile */
@media(max-width:640px){
  .gh-content,.gh-canvas{max-width:100%!important;padding:0 1rem!important}
  .gh-content p,.gh-article p{font-size:1.05rem!important;line-height:1.55!important}
  .gh-content h2{font-size:1.5rem!important;margin-top:2rem!important}
  .gh-content h3{font-size:1.2rem!important}
}

/* Show full cover image without cropping */
.site-header-content{aspect-ratio:auto!important;height:auto!important;max-height:none!important}

/* ── 首页 hero（2026-10-19）──────────────────────────────────────────────────
   露营站的 hero 只有**一句描述**、字号克制、图压得够暗；本站在 Casper 默认下把描述
   当成 hero 大标题（三行 48px），白字正好压在亮色水草上 ⇒ 读不清。
   这里两件事：① 给封面压一层品牌深青渐变（不是纯黑，保留水色）；② 描述回一句的字号。
   ⚠️ 遮罩用 ::after 而不是 background 叠在 img 上 —— Casper 的 img 是 flex 子元素，
      直接加 background 会被图片完全盖住。 */
.site-header-content{position:relative!important}
.site-header-content::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,34,42,.42) 0%,rgba(6,34,42,.62) 55%,rgba(6,34,42,.82) 100%)}
.site-header-inner{position:relative!important;z-index:2!important}
.site-description{font-size:clamp(1.05rem,1.5vw,1.3125rem)!important;line-height:1.55!important;
  max-width:36rem;margin:0 auto!important;text-shadow:0 1px 14px rgba(0,0,0,.55)}
@media(max-width:640px){
  .site-description{font-size:1rem!important;max-width:22rem;padding:0 1rem}
}

/* Cover image — keep the aquarium depth behind the hero, brand page-ground when loading */
.site-header-cover{object-position:center bottom!important}
.site-header-content,.site-header{background-color:#06222a!important}

/* Collapse hidden Casper sections so they don't create blank space */
.footer-cta,.site-footer{height:0!important;padding:0!important;margin:0!important;overflow:hidden!important}
/* Reduce gap between article end and footer */
.article,article.gh-article{margin-bottom:0!important}

/* Affiliate disclosure — tiny, muted, just passing compliance */
.gh-content blockquote{font-size:0.75rem!important;line-height:1.3!important;color:#6f9a95!important;border-left:2px solid #2a9d8f!important;background:#f7f9f7!important;padding:0.25rem 0.75rem!important;margin:0 0 0.25rem!important;font-style:italic!important}
.gh-content blockquote strong{font-weight:700!important}
.gh-content blockquote p{margin:0!important;font-size:0.75rem!important;line-height:1.3!important}

/* In-content links — brand green (replaces Ghost pink accent #FF1A75) */
.gh-content a,.article-content a{color:#227f74!important}
.gh-content a:hover,.article-content a:hover{color:#2a9d8f!important}

/* ── 分页条：**不再有任何自定义样式**（2026-09-20 第三轮裁定）────────────────────
   用户要「只保留滚动」：分页条（`Older / Newer Posts` + `Page X of Y`）保持 Casper
   原样（主题 CSS 恒为 `display:none`），页面靠无限滚动展示全部 33 篇。
   曾在此处放过一组「给客户端页码按钮上样式」的 `.pagination` 规则；已整体移除，
   **不要**再按"用户说过要 1 2 3 4"加回来（同一天被推翻的前一版要求）。
   反向断言：npm run check:pagination-links（线上 CSS 里出现该类的指纹即报红）。
   ⚠️ 本注释**刻意不写出那个类的字面**：写出来会把反向断言打成假红。 */