/* ============================================================
   style.css · 主体视觉
   ------------------------------------------------------------
   高端编辑风（Apple × Swiss × Notion × Behance）
   纯灰阶 · 8pt 网格 · 细字重英雄姓名 · 纸感颗粒 · CAD 装饰
   布局：全宽页眉 → 英雄区 → 左右双栏 → 全宽页脚
   依赖：variables.css（令牌）、reset.css（重置）
   ============================================================ */

/* —— 视口背景 —— */
body {
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "tnum" 1, "ss01" 1;
  padding: var(--sp-5) var(--sp-3) var(--sp-6);
}

/* ============================================================
   打印按钮（仅屏幕右上角）
   ============================================================ */
.print-btn {
  position: fixed;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 9px 15px;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-size: var(--fs-corner);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-corner);
  text-transform: uppercase;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.print-btn__icon,
.print-btn__icon svg { display: inline-flex; }

/* ============================================================
   A4 纸张容器
   ============================================================ */
.paper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--a4-w);
  min-height: var(--a4-h);
  margin: 0 auto;
  padding: var(--margin-y) var(--margin-x);
  background: var(--c-paper);
  color: var(--c-body);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}

/* 纸张质感：极淡噪点纤维，叠加在暖白底上（1~2% 强度） */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: var(--noise-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

/* 左上 CAD 几何装饰（圆弧 / 点阵 / 坐标线），整体再降透明度 */
.paper__decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 165mm;
  height: 165mm;
  background-image: url("../assets/decoration.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   顶部页眉条（全宽）
   ============================================================ */
.paper__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-5);
}
.paper__corner {
  font-family: var(--font-mono);
  font-size: var(--fs-corner);
  letter-spacing: var(--ls-corner);
  text-transform: uppercase;
  color: var(--c-faint);
}

/* ============================================================
   英雄区（全宽 band）
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 0.5px solid var(--c-line);
}

/* monogram */
.hero__mono {
  flex-shrink: 0;
  width: var(--mono-size);
  height: var(--mono-size);
  color: var(--c-ink);
}

/* 姓名 + 岗位 */
.hero__id { min-width: 0; }

.hero__name {
  font-size: var(--fs-name);
  font-weight: var(--fw-thin);        /* 细字重 · 第一视觉焦点 */
  line-height: var(--lh-name);
  letter-spacing: var(--ls-name);
  color: var(--c-ink);
}

.hero__role {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.hero__role-text {
  font-family: var(--font-mono);
  font-size: var(--fs-role);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-role);
  text-transform: uppercase;
  color: var(--c-body);
}
/* 岗位右侧极细横线，延伸至栏宽，编辑式分隔 */
.hero__rule {
  flex: 1;
  height: 0.5px;
  background: var(--c-rule);
}
.hero__sub {
  margin-top: 6px;
  font-size: var(--fs-stack);
  letter-spacing: var(--ls-stack);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ============================================================
   30 / 70 双栏栅格
   ============================================================ */
.paper__grid {
  position: relative;
  z-index: 1;
  flex: 1;                            /* 占满，把页脚推到底 */
  display: grid;
  grid-template-columns: var(--rail-pct) 1fr;
  column-gap: var(--col-gap);
  align-items: start;
}

/* ============================================================
   左栏
   ============================================================ */
.rail { padding-right: var(--sp-2); }

/* ============================================================
   章节通用结构：编号 · 标题 · 短横线 · 内容
   ============================================================ */
.sec { margin-bottom: var(--sp-5); }
.sec:last-child { margin-bottom: 0; }

/* 左栏呼吸节奏：Contact→Education 略紧，Education→Skills 更松 */
.rail .sec:nth-child(2) { margin-bottom: var(--sp-5); }
.rail .sec:nth-child(3) { margin-top: var(--sp-6); }

.sec__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--c-ink);
}
.sec__index {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-index);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-index);
  color: var(--c-faint);
}
.sec__label { line-height: 1; }

/* 章节标题下短横线：64px × 0.5px */
.sec__rule {
  display: block;
  width: var(--rule-len);
  height: var(--rule-h);
  margin: var(--sp-1) 0 var(--sp-2);
  background: var(--c-rule);
}

.sec__body { color: var(--c-body); }

/* ============================================================
   Contact
   ============================================================ */
.contact { display: grid; gap: var(--sp-2); }
.contact li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  column-gap: var(--sp-2);
}
.contact__k {
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-faint);
}
.contact__v {
  font-size: 12.5px;
  color: var(--c-body);
  word-break: break-all;
}

/* ============================================================
   Education
   ============================================================ */
.edu { display: grid; gap: 4px; }
.edu__school {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.edu__major { font-size: 12.5px; color: var(--c-body); }
.edu__date {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.5px;
  color: var(--c-muted);
}

/* ============================================================
   Skills · 纯文本分组，无星级无进度条
   ============================================================ */
.skills { display: grid; gap: var(--sp-2); }
.skill__name {
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-faint);
  margin-bottom: 4px;
}
.skill__items {
  font-size: 12.5px;
  line-height: var(--lh-cozy);
  color: var(--c-body);
}

/* ============================================================
   右栏
   ============================================================ */
.main { min-width: 0; }

/* —— About —— */
.about {
  max-width: var(--read-w);          /* 每行 28~32 字，杂志阅读宽度 */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
}
.about strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
/* 合并节：简介段与其后工作经历之间的呼吸 */
.about + .job { margin-top: var(--sp-4); }

/* ============================================================
   Experience · 编辑杂志式排版（非卡片）
   ============================================================ */
.job { margin-bottom: 0; }
.job + .job {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 0.5px solid var(--c-line);
}

.job__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}
.job__company {
  font-size: var(--fs-company);
  font-weight: var(--fw-medium);
  letter-spacing: 0.2px;
  color: var(--c-ink);
}
.job__date {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.5px;
  color: var(--c-muted);
}
.job__role {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--c-muted);
}

.job__list {
  margin-top: var(--sp-1);
  display: grid;
  gap: 6px;
}
.job__list li {
  position: relative;
  padding-left: var(--sp-2);
  font-size: 13px;
  line-height: var(--lh-cozy);
  color: var(--c-body);
}
/* 自定义 marker：极细短横，编辑感（纯灰阶，无强调色） */
.job__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 1px;
  background: var(--c-muted);
}

/* ============================================================
   Projects · 独立结构（标题 + 技术栈 + 描述 + 主要职责 + 项目成果）
   ============================================================ */
.proj + .proj {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 0.5px solid var(--c-line);
}
.proj__title {
  font-size: var(--fs-project);
  font-weight: var(--fw-medium);
  letter-spacing: 0.2px;
  color: var(--c-ink);
}
.proj__stack {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-stack);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-stack);
  text-transform: uppercase;
  color: var(--c-muted);
}
/* 项目描述（开篇段落，承接技术栈） */
.proj__desc {
  margin-top: var(--sp-1);
  font-size: 13px;
  line-height: var(--lh-cozy);
  color: var(--c-body);
}
/* 分组：小标签 + 列表（主要职责 / 项目成果） */
.proj__group { margin-top: var(--sp-2); }
.proj__label {
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-faint);
  margin-bottom: 6px;
}
.proj__list {
  display: grid;
  gap: 6px;
}
.proj__list li {
  position: relative;
  padding-left: var(--sp-2);
  font-size: 13px;
  line-height: var(--lh-cozy);
  color: var(--c-body);
}
.proj__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 1px;
  background: var(--c-muted);
}
/* 关键指标强调：纯灰阶靠字重突出，不引入彩色 */
.proj strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* ============================================================
   Languages & Interests
   ============================================================ */
.extras { display: grid; gap: var(--sp-1); }
.extra {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  column-gap: var(--sp-2);
}
.extra__k {
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--c-faint);
}
.extra__v {
  font-size: 12.5px;
  color: var(--c-body);
}

/* ============================================================
   页脚（全宽）
   ============================================================ */
.paper__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 0.5px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--fs-corner);
  letter-spacing: var(--ls-corner);
  text-transform: uppercase;
  color: var(--c-faint);
}
.foot__link {
  color: var(--c-faint);
  transition: color var(--dur) var(--ease-out);
}
.foot__dot { color: var(--c-deco); }
.foot__spacer { flex: 1; }
.foot__meta { color: var(--c-faint); }

/* ============================================================
   指针设备微交互
   ============================================================ */
@media (hover: hover) {
  .print-btn:hover {
    color: var(--c-body);
    border-color: var(--c-deco);
  }
  .contact__v[href]:hover,
  .foot__link:hover { color: var(--c-ink); }
}

/* ============================================================
   响应式：窄屏单栏可读（牺牲 A4 比例，打印仍为 A4）
   ============================================================ */
@media (max-width: 820px) {
  body { padding: var(--sp-2); }

  .print-btn { top: var(--sp-2); right: var(--sp-2); }

  .paper {
    width: 100%;
    min-height: auto;
    padding: var(--sp-3);
    box-shadow: none;
  }
  .paper__decor { width: 120mm; height: 120mm; opacity: 0.4; }

  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .hero__name { font-size: 48px; }

  .paper__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--sp-5);
  }
  .rail {
    padding-right: 0;
    padding-bottom: var(--sp-4);
    border-bottom: 0.5px solid var(--c-line);
  }
  .rail .sec:nth-child(3) { margin-top: var(--sp-5); }

  .about { max-width: none; }

  .paper__foot { flex-wrap: wrap; row-gap: var(--sp-1); }
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}