/* ============================================================
Aftermesh — article / guide skin (LIGHT).
Loaded only by /guides/* pages. 2026-08 起主站（site.css）也换成了浅色，
两套皮肤的底色（#f7f9fc）与主色（#2563eb）已经对齐；这个文件仍然独立存在，
是因为长文的排版（760px 栏宽、行高、表格）与营销页不一样。No build step.
============================================================ */
:root {
/* --fg-muted 原为 #94a3b8 —— 在白底上只有 2.56:1，而它渲染的是
`.src`（引用亚马逊原文的出处标注）、`.updated`、页脚版权、语言切换，
全是真要读的字。#64748b 是 5.0:1，且与 site.css 同值，两套皮肤终于一致。 */
--fg: #0f172a; --fg-soft: #475569; --fg-muted: #64748b;
--line: #e8edf4; --bg: #f7f9fc; --primary: #2563eb;
--ok-bg: #ecfdf5; --ok-fg: #047857; --no-bg: #fef2f2; --no-fg: #b91c1c;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--bg); color: var(--fg);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 760px; margin: 0 auto; padding: 0 24px; }
header.site { border-bottom: 1px solid var(--line); background: #fff; }
/* 只写上下内边距。这里曾是 `padding: 16px 0` —— 特异度 (0,2,1) 压过 .container
的 (0,1,0),整条 shorthand 把左右内边距清成 0,顶栏比正文左边缘偏出 24px,
手机上 Start free 正好贴死屏幕边。别改回 shorthand。 */
header.site .row { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.header-actions { display: inline-flex; align-items: center; gap: 14px; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang-toggle a { padding: 5px 9px; font-size: 13px; font-weight: 600; color: var(--fg-muted); text-decoration: none; line-height: 1.2; white-space: nowrap; }
.lang-toggle a:hover { color: var(--fg); text-decoration: none; }
.lang-toggle a.active { background: var(--primary); color: #fff; }
/* 顶栏的「全部指南」入口。文章页此前是死胡同:除了正文里手写的互链,唯一出路是
点 logo 回首页 —— 于是每篇新文章只有 /guides 一个站内入口,而首页直连的两篇
老文章各有十个。窄屏藏起来:这条顶栏在 365 档已经在为空间打架(见上面那段注释),
移动端读者走页脚的同一个链接。 */
.header-guides { font-size: 14px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.header-guides:hover { color: var(--fg); text-decoration: none; }
@media (max-width: 560px) { .header-guides { display: none; } }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; flex: 0 0 auto; }
/* 窄屏档。实测 320 会把 "Start free" 折成两行、360 上品牌字样与语言切换贴死,
而 375 还有 24px 余量 —— 所以断点取 365:覆盖 320 / 360 两档常见机型,
不误伤 iPhone SE2/8 这类 375 宽的。与其让品牌字样或按钮折行,不如把左右
留白从 24 收到 16。改 .container 而不是只改 header 那一行,顶栏和正文才
仍然对齐。(site.css 的同名断点是 340,因为深色顶栏在 ≤560 已经隐掉了
「登录」,360 上本来就有 109px 余量,不需要这一档。) */
@media (max-width: 365px) {
.container { padding: 0 16px; }
.brand { font-size: 16px; gap: 7px; min-width: 0; }
.header-actions { gap: 9px; flex: 0 0 auto; }
.lang-toggle a { padding: 5px 7px; font-size: 12px; }
header.site .btn { padding: 9px 12px; }
}
/* nowrap 不设条件:按钮文案折成两行("Start free" 断成 Start / free)任何宽度上都是缺陷。 */
.btn { display: inline-block; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { text-decoration: none; opacity: .93; }
main { padding: 40px 0 8px; }
.eyebrow { color: var(--primary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
h1 { font-size: 34px; line-height: 1.2; margin: 10px 0 8px; letter-spacing: -.01em; }
.updated { color: var(--fg-muted); font-size: 13px; margin-bottom: 28px; }
h2 { font-size: 23px; margin: 40px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 17px; margin: 26px 0 8px; }
p, li { color: var(--fg-soft); font-size: 16.5px; }
.lead { font-size: 19px; color: var(--fg); }
ul { padding-left: 22px; }
li { margin: 7px 0; }
.callout { border-radius: 14px; padding: 16px 20px; margin: 22px 0; border: 1px solid var(--line); background: #fff; }
.callout.answer { border-left: 4px solid var(--primary); }
.callout.quote { border-left: 4px solid var(--fg-muted); }
.callout.warn { border-left: 4px solid #b45309; background: #fffbeb; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.src { display: block; margin-top: 10px; color: var(--fg-muted); font-size: 13.5px; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.lists .box { border-radius: 14px; padding: 16px 20px; }
.lists .ok { background: var(--ok-bg); }
.lists .no { background: var(--no-bg); }
.lists h3 { margin-top: 0; }
.lists .ok h3 { color: var(--ok-fg); }
.lists .no h3 { color: var(--no-fg); }
.lists li { color: #334155; font-size: 15px; }
/* 单句成对的 don't/instead 行用 而不是
(六对逐行配对,列表语义不成立)。
p 的默认上下 margin 叠在 box 的 16px padding 上会让单行卡片虚高一截,归零。
其余文章的 .lists .box 里只有 h3 + ul,不受影响。 */
.lists .box p { margin: 0; }
@media (max-width: 620px) { .lists { grid-template-columns: 1fr; } h1 { font-size: 28px; } }
.cta {
margin: 44px 0 8px; padding: 28px 26px; border-radius: 18px; text-align: center;
background: linear-gradient(135deg, #eef4ff, #fff); border: 1px solid var(--line);
}
.cta h2 { margin: 0 0 6px; }
.cta p { margin: 0 0 18px; }
.disclaimer { color: var(--fg-muted); font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 44px; padding-top: 18px; }
/* 文章底部分享条。由 index.php 自动注入在 之后,所以要自带上边框,
否则会读成一段没有归属的孤儿按钮。 */
.share-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin: 28px 0 4px; padding-top: 20px; border-top: 1px solid var(--line);
}
.share-label { color: var(--fg-muted); font-size: 14px; margin-right: 2px; }
.share-btn {
font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
padding: 9px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap;
color: var(--primary); background: #fff; border: 1px solid var(--line);
}
.share-btn:hover { border-color: var(--primary); }
.share-btn.is-done { color: var(--ok-fg); border-color: var(--ok-fg); }
.share-btn[hidden] { display: none; }
/* 打印 / 存为 PDF。小红书私信只能发链接不能发文件,所以「一份资料」的交付形态是
网页 + 用户自己存 PDF —— 我们不维护第二份内容。只在打印时生效,屏幕零影响。 */
@media print {
header.site, footer, .cta, .print-action, .share-bar { display: none; }
body { background: #fff; }
.container { max-width: none; padding: 0; }
main { padding: 0; }
p, li { color: #000; font-size: 11pt; }
/* 出处行屏幕上是弱化的辅助信息,打印时却是这份资料的全部意义 —— 浅灰在纸上会糊掉 */
.src, .updated { color: #333; }
h1 { font-size: 20pt; } h2 { font-size: 14pt; } h3 { font-size: 12pt; }
/* 出处链接是这份资料的全部价值,打印版必须把 URL 显出来,否则纸上无法核对 */
.callout a[href^="http"]::after, .src a[href^="http"]::after, li a[href^="http"]::after {
content: " <" attr(href) ">"; font-size: 8.5pt; color: #555; word-break: break-all;
}
.callout, .lists .box { border: 1px solid #ccc; background: #fff; break-inside: avoid; }
h2, h3 { break-after: avoid; }
}
footer { border-top: 1px solid var(--line); background: #fff; margin-top: 28px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; color: var(--fg-muted); font-size: 14px; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--fg-soft); }
/* 页脚联系区。⚠️ 同一块结构在 site.css 里还有一份（页脚 partial 被两套皮肤共用），
改这里必须同步改那边。数值按本皮肤自己的节奏取，不照抄。 */
.footer-contact {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 22px 0; border-bottom: 1px solid var(--line);
}
.footer-qrs { display: flex; gap: 12px; }
.footer-qr-item { margin: 0; text-align: center; }
/* padding 是二维码的「静区」，不是装饰 —— 见 site.css 同名规则的注释。 */
.footer-qr {
width: 104px; height: 104px; display: block;
padding: 6px; box-sizing: border-box;
border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.footer-qr-cap { margin-top: 6px; font-size: 12px; color: var(--fg-muted); }
.footer-contact-title { font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.footer-contact-line { margin: 0 0 4px; font-size: 14px; color: var(--fg-muted); }
.footer-contact-line a { color: var(--primary); }