...
用法二（整套多形态展示）：
.jpg
============================================================ */
/* ---------- 基础容器 ---------- */
.bi {
display: flex;
align-items: center;
gap: 18px;
border: 1px solid var(--hair, #e6dcc8);
border-radius: 10px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--amber, #f3a94b) 12%, var(--paper, #fff)) 0%,
var(--paper, #fff) 60%);
padding: 20px 22px;
margin: 4px 0 22px;
}
.bi-art {
flex: 0 0 auto;
width: 108px; height: 108px;
border-radius: 50%;
overflow: hidden;
background: #fffaf2;
border: 1px solid var(--hair, #e6dcc8);
display: flex; align-items: center; justify-content: center;
}
.bi-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-copy { min-width: 0; }
.bi-eyebrow {
font-family: var(--mono, ui-monospace, monospace);
font-size: 10.5px; letter-spacing: .2em; font-weight: 700;
color: var(--accent, #e2861f); margin-bottom: 6px;
}
.bi-copy h3 { font-size: 18px; margin: 0 0 6px; color: var(--ink, #2c2419); }
.bi-copy p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted, #6b6257); }
/* 变体：卡片式（竖排） */
.bi--card { flex-direction: column; text-align: center; padding: 26px 22px; }
.bi--card .bi-art { width: 132px; height: 132px; }
.bi--card .bi-copy h3 { font-size: 19px; }
/* 变体：通栏 Hero（大图） */
.bi--hero { padding: 30px 28px; gap: 24px; }
.bi--hero .bi-art { width: 168px; height: 168px; }
.bi--hero .bi-copy h3 { font-size: clamp(20px, 2.6vw, 26px); }
.bi--hero .bi-copy p { font-size: 15px; max-width: 620px; }
@media (max-width: 700px) {
.bi, .bi--hero { flex-direction: column; text-align: center; }
.bi--hero .bi-copy p { max-width: none; }
}
/* ---------- 多形态整套展示 ---------- */
.bi-set {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin: 4px 0 22px;
}
.bi-set-item {
margin: 0;
border: 1px solid var(--hair, #e6dcc8);
border-radius: 10px;
overflow: hidden;
background: var(--paper, #fff);
}
.bi-set-img {
aspect-ratio: 1 / 1;
background: #fffaf2;
display: flex; align-items: center; justify-content: center;
}
.bi-set-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-set-cap {
padding: 8px 10px;
font-size: 12.5px;
color: var(--muted, #6b6257);
border-top: 1px solid var(--hair, #e6dcc8);
text-align: center;
}
.bi-set-cap b { display: block; color: var(--ink, #2c2419); font-size: 13px; margin-bottom: 2px; }
/* ---------- 小头像 ---------- */
.bi-avatar {
display: inline-flex;
width: 40px; height: 40px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--hair, #e6dcc8);
background: #fffaf2;
vertical-align: middle;
flex: 0 0 auto;
}
.bi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-avatar--lg { width: 64px; height: 64px; }
/* ---------- 联系按钮（扫码联系我个人） ---------- */
.contact-cta {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
margin: 18px 0 0;
}
.contact-cta .btn { display: inline-flex; align-items: center; gap: 8px; }
.contact-note { font-size: 12.5px; color: var(--mute-2, #9a9083); margin: 8px 0 0; }
/* ---------- 404 ---------- */
.nf-wrap {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 40px 20px 56px;
border: 1px solid var(--hair, #e6dcc8);
border-radius: 12px;
background: var(--paper, #fff);
margin: 4px 0 22px;
}
.nf-code {
font-family: var(--mono, ui-monospace, monospace);
font-size: clamp(64px, 12vw, 128px);
line-height: 1; font-weight: 800; letter-spacing: .04em;
color: var(--accent, #e2861f);
margin: 0 0 6px;
}
.nf-title { font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 10px; color: var(--ink, #2c2419); }
.nf-desc { margin: 0 0 20px; font-size: 14.5px; line-height: 1.8; color: var(--muted, #6b6257); max-width: 520px; }
.nf-art { width: 168px; height: 168px; margin: 0 0 18px; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.nf-links a {
padding: 9px 16px; border-radius: 7px;
border: 1px solid var(--hair, #e6dcc8);
font-size: 13.5px; font-weight: 700; color: var(--ink, #2c2419);
background: color-mix(in srgb, var(--amber, #f3a94b) 8%, var(--paper, #fff));
text-decoration: none;
}
.nf-links a:hover { border-color: var(--accent, #e2861f); color: var(--accent, #e2861f); }
.nf-links a.is-primary { background: var(--ink, #2c2419); color: #fff; border-color: var(--ink, #2c2419); }
/* ---------- 关于页 ---------- */
.ab-hero {
border: 1px solid var(--hair, #e6dcc8); border-radius: 12px; overflow: hidden;
background: linear-gradient(135deg,
color-mix(in srgb, var(--amber, #f3a94b) 16%, var(--paper, #fff)) 0%,
var(--paper, #fff) 58%);
padding: 30px 28px; margin: 4px 0 22px;
}
.ab-hero .ab-eyebrow {
font-family: var(--mono, ui-monospace, monospace);
font-size: 10.5px; letter-spacing: .2em; font-weight: 700;
color: var(--accent, #e2861f); margin-bottom: 8px;
}
.ab-hero h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.06; margin: 0 0 10px; color: var(--ink, #2c2419); }
.ab-hero h1 em { font-style: normal; color: var(--accent, #e2861f); }
.ab-hero p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--muted, #6b6257); max-width: 660px; }
/* 数据条（2026-10-07 新增，对齐参考站 aitudou.cn/about 的 4 格数据带）
参考站那条是「橙→黄渐变通栏 + 4 等分格 + 每格图标/数字/说明」，
我们的做成直角通栏（brand-radius 0，与首页 hero 同一口径）。 */
.ab-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--hair);
border-radius: var(--r-md);
background: var(--paper);
overflow: hidden;
margin: 0 0 18px;
}
.ab-stat {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 22px 12px 20px;
border-right: 1px solid var(--hair);
text-align: center;
}
.ab-stat:last-child { border-right: 0; }
.ab-stat-ico {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
margin-bottom: 2px;
}
.ab-stat-ico svg { width: 18px; height: 18px; }
.ab-stat-num {
font-size: 30px; font-weight: 800; line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
}
.ab-stat-cap { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
@media (max-width: 720px) {
.ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-stat:nth-child(2) { border-right: 0; }
.ab-stat:nth-child(1), .ab-stat:nth-child(2) { border-bottom: 1px solid var(--hair); }
}
.ab-section { border: 1px solid var(--hair, #e6dcc8); border-radius: 12px; background: var(--paper, #fff); padding: 24px 26px; margin: 0 0 18px; }
.ab-section h2 { font-size: 19px; margin: 0 0 14px; color: var(--ink, #2c2419); }
.ab-section p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.85; color: var(--muted, #6b6257); }
.ab-section ul { margin: 0; padding-left: 20px; color: var(--muted, #6b6257); font-size: 14px; line-height: 1.9; }
/* 🔴 2026-10-07移动端正文过窄修复（iPhone 14 Pro 实测）
病根是五层盒模型叠加，每边吃掉 82px，正文 只剩 179px（屏幕 393 的 46%）：
.page-container 外边距 24px + 内边距 16px （pet.css:2282 / 2404）
.list-wrap 内边距 16px+ 内边距 16px （pet.css:1693 + 响应式档）
.ab-section 内边距 26px （brand.css:200）
一行只放得下 11 个汉字，阅读节奏被切碎。
这里只在 ≤767px 收窄本页内边距，不动全局容器 —— 改 .page-container / .list-wrap
会波及全部 19 页（列表页那两层是给窄屏留的呼吸，不能删）。
修后正文 179px → 281px（393 屏的 71%）。*/
@media (max-width: 767px) {
.ab-section { padding: 18px 16px; }
.ab-section h2 { font-size: 18px; }
.ab-section p { font-size: 15px; line-height: 1.8; }
/* 本页专属：把 .list-wrap 在窄屏让出的 24px 外边距 + 16px 内边距还回给正文。
只作用于 .ab-wrap（about.html 独有），其余 18 页的 .list-wrap 不受影响。
🔴 三个踩过的坑，勿改回（本轮实测逐一验证过）：
① 逻辑属性 ≠ 物理属性：`padding-inline: 0` 压不住 `padding-left`。
② 🔴 site.css 有一条 `.list-wrap,.tag-wrap{padding:24px 16px 80px!important}`
—— 它的本意是给「列表页」定垂直节奏（上下 24/80px），
水平 16px 只是顺带。但 !important 会压过一切非 important 声明，
连内联 style 属性都压得住，所以前两次修改实测均无效。
因此这里必须同样带 !important，否则改不动。
③ 只归零水平（left/right），保留它的上下 padding —— 那才是它存在的理由，
删掉会让本页底部留白节奏走样。 */
.list-wrap.ab-wrap {
width: 100%;
max-width: 100%;
margin-left: 0 !important; margin-right: 0 !important;
padding-left: 0 !important; padding-right: 0 !important;
}
}
/* 待填内容占位（用户给自我介绍后替换） */
.ab-todo {
border: 1px dashed var(--accent, #e2861f);
border-radius: 10px;
background: color-mix(in srgb, var(--amber, #f3a94b) 8%, var(--paper, #fff));
padding: 16px 18px;
font-size: 14px; line-height: 1.8; color: var(--muted, #6b6257);
}
.ab-todo b { display: block; color: var(--accent, #e2861f); margin-bottom: 6px; font-size: 13px; letter-spacing: .04em; }
.ab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.ab-fact { border: 1px solid var(--hair, #e6dcc8); border-radius: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--amber, #f3a94b) 6%, var(--paper, #fff)); }
.ab-fact .k { display: block; font-size: 11.5px; letter-spacing: .12em; color: var(--mute-2, #9a9083); margin-bottom: 6px; }
.ab-fact .v { display: block; font-size: 17px; font-weight: 800; color: var(--ink, #2c2419); }