/* ==========================================================================
shell.css — 全站外壳（左栏 + 内容区）
四个页面共用这一个文件。以后要改站点布局，只改这里。
--------------------------------------------------------------------------
每个页面的 body 结构：
← 由 site.js 渲染
…页面内容…
body 本身就是一个两列网格：左栏占第一列并跨两行，main 与 footer 在第二列。
这样页面里不需要额外的包裹层。
========================================================================== */
/* ---------- 设计令牌（全站唯一来源） ---------- */
:root {
--paper: #fbfaf7;
--paper-2: #f4f2ec;
--ink: #14161a;
--ink2: #565d66;
--ink3: #8d939a;
--rule: #e3dfd5;
--rule-2: #cdc7ba;
--accent: #0f766e;
--accent-soft: #e9f4f2;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC",
"Noto Serif SC", serif;
--sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
--mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
--rail-w: 262px;
--wrap: 1020px;
--nav-h: 0px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.78;
-webkit-font-smoothing: antialiased;
/* 两列外壳：用 justify-content 居中，避免被各页 body 规则覆盖 */
display: grid;
grid-template-columns: var(--rail-w) minmax(0, 1060px);
justify-content: center;
align-items: start;
}
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.tag { font-family: var(--mono); font-size: 0.6rem; color: var(--ink3); border: 1px solid var(--rule); border-radius: 5px; padding: 1px 6px; }
/* ---------- 网格位置 ---------- */
body > .rail { grid-column: 1; grid-row: 1 / span 2; }
body > main { grid-column: 2; grid-row: 1; min-width: 0; }
body > .footer { grid-column: 2; grid-row: 2; }
/* 内容区的 .wrap：有左栏之后不再需要居中收窄，只保留左右内边距 */
.wrap {
max-width: none;
margin: 0;
padding-left: clamp(24px, 3.4vw, 54px);
padding-right: clamp(24px, 3.4vw, 54px);
}
/* ---------- 左栏 ---------- */
.rail {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
display: flex;
flex-direction: column;
gap: 22px;
padding: 32px 22px 26px clamp(20px, 2.4vw, 36px);
border-right: 1px solid var(--rule);
overflow-y: auto;
}
.rail__id { display: grid; gap: 12px; }
.rail__avatar {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--rule-2);
background: var(--paper-2);
display: block;
}
.rail__mark {
width: 76px;
height: 76px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 2rem;
font-weight: 700;
color: var(--paper);
background: var(--accent);
}
.rail__name { font-family: var(--serif); font-size: 1.52rem; letter-spacing: -0.02em; line-height: 1.1; }
.rail__meta { margin-top: 5px; font-size: 0.86rem; color: var(--ink2); line-height: 1.6; }
.rail__status {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.05em;
color: var(--accent);
background: var(--accent-soft);
border-radius: 999px;
padding: 6px 12px;
line-height: 1.5;
}
.rail__status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.rail__label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; }
.rail__nav { display: grid; gap: 1px; }
.rail__nav a {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 11px;
margin-left: -11px;
border-radius: 7px;
font-size: 0.93rem;
color: var(--ink2);
transition: color 0.18s ease, background 0.18s ease;
}
.rail__nav a:hover { color: var(--ink); background: var(--paper-2); }
.rail__nav a.is-active { color: var(--ink); font-weight: 600; background: var(--paper-2); }
.rail__nav a.is-active::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); margin-left: -6px; flex: none; }
.rail__contact { display: grid; gap: 7px; }
.rail__contact a,
.rail__contact > span { display: flex; gap: 8px; align-items: baseline; font-size: 0.82rem; color: var(--ink2); word-break: break-all; }
.rail__contact a { transition: color 0.18s ease; }
.rail__contact a:hover { color: var(--accent); }
.rail__contact .k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink3); flex: none; min-width: 44px; }
.rail__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
/* ---------- 页脚 ---------- */
.footer { padding: 26px clamp(24px, 3.4vw, 54px) 54px; border-top: 1px solid var(--rule); margin-top: 26px; }
.footer__inner { display: flex; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.footer a:hover { color: var(--accent); }
/* ---------- 滚动入场 ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* ---------- 平板 / 手机：左栏折叠成顶部一块 ---------- */
@media (max-width: 980px) {
body { grid-template-columns: minmax(0, 1fr); }
body > .rail { grid-column: 1; grid-row: 1; }
body > main { grid-column: 1; grid-row: 2; }
body > .footer { grid-column: 1; grid-row: 3; }
.rail {
position: static;
height: auto;
border-right: 0;
border-bottom: 1px solid var(--rule);
padding: 20px clamp(20px, 4vw, 34px);
gap: 14px;
overflow: visible;
}
.rail__id { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.rail__avatar, .rail__mark { width: 56px; height: 56px; font-size: 1.45rem; }
.rail__name { font-size: 1.22rem; }
.rail__status { justify-self: start; }
.rail__nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: 4px; overflow-x: auto; }
.rail__nav a { margin-left: 0; padding: 5px 10px; }
.rail__nav a.is-active::before { display: none; }
.rail__contact { grid-auto-flow: column; grid-auto-columns: max-content; gap: 16px; overflow-x: auto; }
.rail__contact .k { min-width: 0; }
.rail__foot, .rail__label { display: none; }
}
/* ---------- 打印：左栏不打印，抬头回到内容里 ---------- */
@media print {
body { display: block; max-width: none; }
.rail { display: none !important; }
.wrap { padding: 0; }
.footer { display: none; }
.js .reveal { opacity: 1 !important; transform: none !important; }
}