/* ==========================================================================
   resume.css — 履历页（学术 / 印刷品）样式
   刻意与主页相反：浅色纸面、衬线标题、栏栅与发丝线，为阅读与打印服务。
   ========================================================================== */
:root {
  --paper: #fbfaf7;
  --paper-2: #f4f2ec;
  --ink: #14161a;
  --ink2: #565d66;
  --ink3: #8d939a;
  --rule: #e3dfd5;
  --rule-2: #cdc7ba;
  --accent: #0f766e;
  --accent-soft: #e9f4f2;
  --k-do: #1d4ed8;
  --k-xue: #0f766e;
  --k-xiang: #a16207;
  --k-da: #6d28d9;
  --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;
  --wrap: 1020px;
  --nav-h: 56px;
}

*,
*::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;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
p { margin: 0; }
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; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.mono {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner { display: flex; align-items: center; gap: 18px; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.brand__mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--accent);
}
.brand__name { font-weight: 600; letter-spacing: -0.01em; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--ink2);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a.is-active { color: var(--ink); font-weight: 500; background: var(--paper-2); }
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink2);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink3); background: #fff; }

/* ---------- 报头 ---------- */
.masthead { padding: clamp(34px, 6vw, 58px) 0 22px; border-bottom: 3px double var(--ink); }
.masthead__kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.masthead__name {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 12px 0 10px;
}
.masthead__role { font-size: 1.06rem; color: var(--ink2); }
.masthead__actions { margin-top: 20px; }
.masthead__actions .btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: #fff; font-size: 0.86rem; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease; }
.masthead__actions .btn:hover { transform: translateY(-1px); border-color: var(--ink3); }
@media print { .masthead__actions { display: none; } }

.masthead__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 26px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.fact__k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.fact__v { font-size: 0.92rem; margin-top: 2px; }

/* ---------- 区块 ---------- */
.section { padding: clamp(34px, 5vw, 56px) 0; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.section__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.section__index { color: var(--accent); }
.section__title { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.7rem); }
.section__note { margin-left: auto; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }

/* ---------- 关于 ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: clamp(26px, 4vw, 52px); }
/* 没有引言块时用单栏，避免右边留一块空白 */
.about--single { grid-template-columns: minmax(0, 1fr); }
.about--single .about__text { max-width: 74ch; }
.about__text p + p { margin-top: 16px; }
.about__text { color: var(--ink2); font-size: 1rem; }
.about__aside { border-left: 2px solid var(--accent); padding-left: 20px; font-family: var(--serif); font-size: 1.06rem; line-height: 1.6; }
.about__aside span { display: block; margin-top: 10px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }

/* ---------- 教育背景 ---------- */
.edu { border-top: 2px solid var(--ink); padding-top: 16px; }
.edu__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.edu__school { font-family: var(--serif); font-size: 1.24rem; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.edu__period { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink3); }
.edu__meta { margin-top: 6px; font-size: 0.95rem; color: var(--ink2); }
.edu__courses { margin-top: 12px; font-size: 0.92rem; color: var(--ink2); }
.edu__courses b { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); font-weight: 400; margin-right: 10px; }
.edu__extra { margin-top: 8px; font-size: 0.92rem; color: var(--ink3); }

/* ---------- 记录流（履历页用紧凑版） ---------- */
/* 注意：DOM 结构由 site.js 生成 —— 一行元信息 + 若干正文块，
   所以这里不能用多栏 grid，否则标题和正文会错位到不同的列里。 */
.recs { display: grid; gap: 0; }
.rec {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.rec:last-child { border-bottom: 0; }
.rec__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink3);
}
.rec__kind {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--k, var(--accent));
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 9px;
}
.rec__status {
  color: var(--ink3);
  border: 1px dashed var(--rule-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.62rem;
}
.rec__title { font-size: 1.02rem; margin-top: 8px; }
.rec__text { margin-top: 4px; color: var(--ink2); font-size: 0.92rem; }
.rec__insight { margin-top: 7px; padding-left: 12px; border-left: 1px solid var(--rule-2); color: var(--ink3); font-size: 0.86rem; }
.rec__from { margin-top: 7px; font-family: var(--mono); font-size: 0.62rem; color: var(--accent); }
.rec__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.tag { font-family: var(--mono); font-size: 0.6rem; color: var(--ink3); border: 1px solid var(--rule); border-radius: 5px; padding: 1px 6px; }

/* ---------- 阶段 ---------- */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.stage { border-top: 2px solid var(--ink); padding-top: 14px; }
.stage__ver { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--accent); }
.stage__title { font-family: var(--serif); font-size: 1.32rem; margin: 8px 0 3px; }
.stage__range { font-family: var(--mono); font-size: 0.64rem; color: var(--ink3); }
.stage__change { margin-top: 12px; color: var(--ink2); font-size: 0.92rem; }
.stage__stats { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.64rem; color: var(--ink3); }

/* ---------- 作品 ---------- */
.projs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }
.proj { border-top: 2px solid var(--ink); padding-top: 14px; }
.proj__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proj__role { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.proj__period { font-family: var(--mono); font-size: 0.64rem; color: var(--ink3); }
.proj__title { font-family: var(--serif); font-size: 1.16rem; margin: 9px 0 7px; }
.proj__summary { color: var(--ink2); font-size: 0.92rem; }
.proj__metrics { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.mtr__v { font-family: var(--serif); font-size: 1.42rem; line-height: 1; color: var(--accent); }
.mtr__k { font-size: 0.72rem; color: var(--ink3); margin-top: 4px; }
.proj__insight { margin-top: 14px; padding: 11px 14px; background: var(--accent-soft); border-left: 2px solid var(--accent); font-size: 0.9rem; }
.proj__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.proj__links { display: flex; gap: 16px; margin-top: 14px; }
.proj__link { font-size: 0.88rem; color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.proj__link:hover { border-bottom-color: var(--accent); }
.highlights { margin-top: 12px; display: grid; gap: 6px; }
.highlights li { position: relative; padding-left: 16px; color: var(--ink2); font-size: 0.9rem; }
.highlights li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 1px; background: var(--accent); }

/* ---------- 技能 ---------- */
.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 22px; }
.stack__group-title { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); padding-bottom: 9px; border-bottom: 1px solid var(--ink); }
.skill { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--rule); }
.skill:last-child { border-bottom: 0; }
.skill__name { font-size: 0.94rem; font-weight: 500; }
.skill__note { font-size: 0.76rem; color: var(--ink3); }
.skill__dots { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.skill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); }
.skill__dot.is-on { background: var(--accent); }

/* ---------- 荣誉 ---------- */
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }
.awards__group-title { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); padding-bottom: 9px; border-bottom: 1px solid var(--ink); }
.award { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--rule); }
.award:last-child { border-bottom: 0; }
.award__date { font-family: var(--mono); font-size: 0.7rem; color: var(--ink3); padding-top: 3px; }
.award__title { font-size: 0.98rem; font-weight: 500; }
.award__note { margin-top: 2px; color: var(--ink2); font-size: 0.86rem; }

/* ---------- 失败与教训 ---------- */
.lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.lesson { border-left: 2px solid var(--rule-2); padding-left: 18px; }
.lesson__date { font-family: var(--mono); font-size: 0.66rem; color: var(--ink3); }
.lesson__title { font-size: 1rem; margin: 5px 0 6px; }
.lesson__what { color: var(--ink2); font-size: 0.9rem; }

/* ---------- 在想的问题 ---------- */
.questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 24px; }
.question { border-top: 2px solid var(--ink); padding-top: 14px; }
.question__q { margin-top: 10px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; }
.question__why { margin-top: 9px; color: var(--ink2); font-size: 0.9rem; }

/* ---------- 在读 ---------- */
.reading { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.reading__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; background: var(--paper); padding: 13px 16px; }
.reading__title { font-size: 0.96rem; font-weight: 500; }
.reading__meta { font-size: 0.8rem; color: var(--ink3); }
.reading__status { justify-self: end; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--rule-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.reading__note { grid-column: 1 / -1; color: var(--ink2); font-size: 0.86rem; }

/* ---------- 联系 ---------- */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.contact__card { border-top: 2px solid var(--ink); padding-top: 12px; transition: color 0.2s ease; }
.contact__card:hover { color: var(--accent); }
.contact__k { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.contact__v { margin-top: 6px; font-size: 0.96rem; word-break: break-word; }

/* ---------- 页脚 ---------- */
.footer { padding: 26px 0 54px; 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: 820px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__aside { border-left: 0; border-top: 2px solid var(--accent); padding: 16px 0 0; }
}
@media (max-width: 720px) {
  .nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 打印：这一页的主要用途之一 ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff; color: #000; font-size: 10.5pt; }
  .topbar, .footer { display: none !important; }
  .section { padding: 12pt 0; break-inside: avoid; page-break-inside: avoid; }
  .masthead { padding-top: 0; border-bottom: 2px solid #000; }
  .rec, .award, .proj, .stage, .lesson, .reading__item { break-inside: avoid; page-break-inside: avoid; }
  .proj__insight, .rec__insight { background: none; }
  a { color: #000; text-decoration: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}