/* ==========================================================================
   熊斐然 · 个人求职网站  |  style.css
   风格：极简 / 黑白灰 + 强调色 #4c80fa / 系统无衬线 / 大量留白
   结构：1 设计变量 → 2 基础重置 → 3 通用组件 → 4 导航 → 5 Hero
         → 6 章节骨架 → 7 各章节 → 8 底部 → 9 动效 → 10 响应式 → 11 无障碍
   ========================================================================== */


/* ==========================================================================
   1. 设计变量（改这里即可整体换肤：颜色 / 字号 / 间距 / 圆角 / 动效）
   ========================================================================== */
:root {
  /* ---- 色彩：黑白灰主色调 ---- */
  --c-ink:          #0a0a0a;              /* 正文主色（近黑） */
  --c-title:        #1d1d1f;              /* 标题色 */
  --c-muted:        #6e6e73;              /* 次要文字 */
  --c-faint:        #86868b;              /* 更弱文字 / 序号 */
  --c-line:         #e6e6e8;              /* 分隔线 */
  --c-bg:           #ffffff;              /* 页面底色 */
  --c-bg-soft:      #f5f5f7;              /* 浅灰区块底色 */
  --c-invert-ink:   #f5f5f7;              /* 深色区块上的文字 */
  --c-invert-mute:  #86868b;              /* 深色区块上的次要文字 */

  /* ---- 色彩：强调色（#4c80fa 及其衍生，不引入其他色相） ---- */
  --c-accent:       #4c80fa;              /* 强调色：主按钮 / 序号 / 标签 hover */
  --c-accent-deep:  #3f6fe6;              /* 强调色加深：按钮 hover */
  --c-accent-tint:  rgba(76, 128, 250, .10); /* 强调色浅底：focus 光环 */

  /* ---- 字体：系统无衬线（含中文回退），无需加载 Web Font ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;

  /* ---- 间距基数 8px ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* ---- 布局 ---- */
  --container: 1080px;                                       /* 内容最大宽度 */
  --gutter: clamp(20px, 5vw, 40px);                          /* 移动端左右安全边距 */
  --section-y: clamp(72px, 12vh, 140px);                     /* 章节垂直留白（留白是设计） */
  --nav-h: 56px;                                             /* 导航栏高度（与 scroll-padding 联动） */

  /* ---- 圆角 ---- */
  --radius-card: 14px;
  --radius-pill: 980px;                                      /* 胶囊：按钮 / 标签 */

  /* ---- 阴影（克制：仅卡片 hover 时升一级） ---- */
  --shadow-card:       0 1px 2px rgba(0, 0, 0, .04);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .04);

  /* ---- 动效：统一 ease-out 曲线，全部过渡复用它 ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-hover: .2s;                                          /* hover 反馈 */
  --dur-reveal: .3s;                                         /* 滚动入场 */
}


/* ==========================================================================
   2. 基础重置
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* 平滑滚动（锚点跳转）；scroll-padding 让标题不被吸顶导航遮挡 */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 17px;                                           /* 正文起始字号 17px */
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, dl, dd, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

h1, h2, h3 {
  color: var(--c-title);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;                                        /* 标题换行更均匀 */
}

p { text-wrap: pretty; }                                     /* 正文避免孤字 */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out),
              opacity var(--dur-hover) var(--ease-out);
}

strong { font-weight: 600; color: var(--c-title); }

/* 统一的键盘焦点样式（仅在键盘操作时显示） */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   3. 通用组件
   ========================================================================== */

/* 内容容器：居中 + 最大宽度 + 移动端安全边距 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- 按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                                          /* 触控目标 ≥ 44px */
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: .9375rem;                                       /* 15px */
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}

.btn:active { transform: scale(.98); }                       /* 按压反馈 */

/* 主按钮：强调色实心（页面中唯一的高饱和色块） */
.btn--primary {
  background: var(--c-accent);
  color: #fff;
}
.btn--primary:hover { background: var(--c-accent-deep); }

/* 次按钮：描边幽灵按钮 */
.btn--ghost {
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}
.btn--ghost:hover {
  border-color: var(--c-ink);
  background: var(--c-bg-soft);
}

/* ---- 章节标题组件：序号 + 标题 ---- */
.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.section__num {
  flex: none;
  color: var(--c-accent);
  font-size: .8125rem;                                       /* 13px */
  font-weight: 600;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.section__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);                    /* 28 → 40px */
}

/* 深色区块上的标题配色反转 */
.section__head--invert .section__num   { color: var(--c-accent); }
.section__head--invert .section__title { color: var(--c-invert-ink); }


/* ==========================================================================
   4. 吸顶导航栏
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;                                         /* 顶部通栏 */
  z-index: 100;
  background: transparent;                                   /* 初始透明 */
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-reveal) var(--ease-out),
              border-color var(--dur-reveal) var(--ease-out),
              backdrop-filter var(--dur-reveal) var(--ease-out);
}

/* 滚动后（JS 添加 .is-scrolled）：白底 + 毛玻璃 + 细线 */
.nav.is-scrolled {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--c-line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--nav-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 品牌名（左侧姓名） */
.nav__brand {
  position: relative;                                        /* 承载 .is-active 的下划线（::after 绝对定位） */
  flex: none;
  padding-block: 6px;                                        /* 与 .nav__links a 一致，使两者下划线同高 */
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-title);
}
.nav__brand:hover { color: var(--c-accent); }

/* 导航链接组 */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  min-width: 0;                                              /* 关键：允许 flex 项收缩，否则会撑宽整页 */
  overflow-x: auto;                                          /* 窄屏可横向滑动 */
  scrollbar-width: none;                                     /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;
}
.nav__links::-webkit-scrollbar { display: none; }            /* WebKit 隐藏滚动条 */

.nav__links a {
  position: relative;
  flex: none;
  padding-block: 6px;
  font-size: .875rem;                                        /* 14px */
  color: var(--c-muted);
  white-space: nowrap;
}

.nav__links a:hover { color: var(--c-ink); }

/* 当前所在章节高亮（JS 添加 .is-active） */
.nav__links a.is-active { color: var(--c-ink); font-weight: 500; }

/* 强调色下划线：导航链接与品牌名共用（品牌名指向 #top，位于 Hero 区时同样亮起） */
.nav__links a.is-active::after,
.nav__brand.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
}


/* ==========================================================================
   5. Hero 区
   ========================================================================== */
.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;                                         /* 回退值（旧浏览器） */
  min-height: 100svh;                                        /* 移动端安全视口高度 */
  padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-7);
  background: var(--c-bg);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 820px;
}

/* 岗位标签：强调色的唯一轻量用法 */
.hero__eyebrow {
  margin-bottom: var(--sp-3);
  color: var(--c-accent);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
}

/* 姓名：全站最大字号，与正文形成 4~6 倍层级对比 */
.hero__name {
  font-size: clamp(3rem, 9vw, 5.5rem);                       /* 48 → 88px */
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
}

/* 一句话简介 */
.hero__tagline {
  max-width: 34em;
  margin-top: var(--sp-3);
  color: var(--c-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);               /* 17 → 20px */
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}


/* ==========================================================================
   6. 章节骨架
   ========================================================================== */
.section {
  padding-block: var(--section-y);
  background: var(--c-bg);
}

/* 浅灰底色章节：让页面产生明暗节奏（白 / 灰交替） */
.section--soft { background: var(--c-bg-soft); }


/* ==========================================================================
   7. 各章节内容
   ========================================================================== */

/* ---- 7.1 关于我：3 行概述 ---- */
.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);                                          /* 每行之间的呼吸感 */
  /* 用 px 而非 em：em 会按继承的 17px 计算，比 p 自身的 19px 小，反而提前换行。
     1000px = 容器内容宽度，三句话在桌面端各自占满一行、不折行 */
  max-width: 1000px;
}

.about__body p {
  font-size: clamp(1.0625rem, 1.4vw, 1.125rem);              /* 17 → 18px */
  line-height: 1.9;
  color: var(--c-ink);
}

/* ---- 7.2 教育背景：时间 | 学校 / 专业 | 学位 ---- */
.edu {
  border-top: 1px solid var(--c-line);
}

.edu__item {
  display: grid;
  grid-template-columns: 190px 1fr auto;                     /* 三栏对齐成表格感 */
  align-items: center;                                       /* 时间 / 学校 / 学位徽标一行居中 */
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}

.edu__time {
  color: var(--c-faint);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.edu__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
}

.edu__school {
  font-size: 1.25rem;
}

.edu__major {
  color: var(--c-muted);
  font-size: .9375rem;
}

.edu__degree {
  padding: 4px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  color: var(--c-muted);
  font-size: .8125rem;
  white-space: nowrap;
}

/* ---- 7.3 工作经历：时间线排版 ---- */
.timeline {
  position: relative;
  padding-left: var(--sp-4);                                 /* 为左侧竖线与圆点留位 */
}

/* 时间线主轴（1px 竖线） */
.timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 1px;
  background: var(--c-line);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--sp-7);                               /* 两段经历之间的间隔 */
}
.timeline__item:last-child { padding-bottom: 0; }

/* 时间线节点圆点（9px 实心，圆心压在 1px 竖线中心上） */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(var(--sp-4) * -1 - 4px);                        /* 32 + 4 → 圆点居中于竖线 */
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* 公司 / 职位 / 时间 */
.timeline__head {
  display: grid;
  grid-template-columns: auto 1fr;                           /* 第二行放时间 */
  align-items: baseline;
  gap: 2px var(--sp-3);
}

.timeline__company { font-size: 1.375rem; }                  /* 22px */

.timeline__role {
  color: var(--c-muted);
  font-size: .9375rem;
}

.timeline__time {
  grid-column: 2;
  color: var(--c-faint);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

/* 核心职责 */
.timeline__duty {
  margin-top: var(--sp-2);
  max-width: 44em;
  color: var(--c-ink);
}

/* 核心成果列表 */
.outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  max-width: 48em;
}

.outcomes li {
  position: relative;
  padding-left: 18px;
  color: var(--c-muted);
  font-size: .9375rem;                                       /* 15px：比正文略小，突出职责句 */
  line-height: 1.75;
}

.outcomes li strong { color: var(--c-ink); }

/* 成果条目前的强调色小圆点 */
.outcomes li::before {
  content: "";
  position: absolute;
  top: .66em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: .38;
}

/* ---- 7.4 项目经历：卡片布局 ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));          /* 桌面端两列 */
  gap: var(--sp-3);
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-bg);
  box-shadow: var(--shadow-card);
  /* hover 动效：上浮 4px + 阴影加深 */
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: #dcdce0;
}

.card__head {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}

.card__title {
  font-size: 1.1875rem;                                      /* 19px */
  line-height: 1.4;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: 6px;
  color: var(--c-faint);
  font-size: .8125rem;
}

.card__sep {                                                  /* 元信息之间的分隔点 */
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* 卡片内文：dt / dd 两栏，标签列固定宽度保证跨卡片对齐 */
.card__body {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-2);
  margin-top: var(--sp-3);
}

.card__body dt {
  color: var(--c-faint);
  font-size: .8125rem;
  line-height: 2;                                            /* 行盒高度≈dd，首行视觉对齐 */
}

.card__body dd {
  color: var(--c-muted);
  font-size: .9375rem;
  line-height: 1.75;
}

/* ---- 7.5 工作技能：标签展示 ---- */
.skills {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.skills__group {
  display: grid;
  grid-template-columns: 140px 1fr;                          /* 左：分组名 / 右：标签 */
  gap: var(--sp-3);
  align-items: start;
}

.skills__title {
  padding-top: 8px;
  color: var(--c-muted);
  font-size: .9375rem;
  font-weight: 500;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 9px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: .9375rem;
  line-height: 1.4;
  cursor: default;
  /* hover 动效：背景变强调色 + 文字变白 */
  transition: background-color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}

.tag:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  transform: translateY(-1px);
}


/* ==========================================================================
   8. 底部：联系方式 + 版权
   ========================================================================== */
.contact {
  padding-block: var(--section-y) var(--sp-5);
  background: var(--c-ink);                                  /* 深色收尾，形成视觉重量 */
  color: var(--c-invert-ink);
}

.contact__lead {
  max-width: 34em;
  color: var(--c-invert-mute);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
}

/* 联系方式大号链接 */
.contact__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-top: var(--sp-5);
}

.contact__link {
  display: inline-block;
  color: var(--c-invert-ink);
  font-size: clamp(1.5rem, 4vw, 2.5rem);                     /* 24 → 40px */
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}

.contact__link:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* 版权栏 */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--c-invert-mute);
  font-size: .8125rem;
}

.footer__top:hover { color: var(--c-invert-ink); }


/* ==========================================================================
   9. 动效：滚动入场
   - 依赖 <html class="js">，无 JS 时内容默认可见（渐进增强）
   - 章节标题：左侧淡入 + 轻微上移，0.3s ease-out
   - 用 animation 而非 transition：animation 只在动画期间生效，结束后属性回落到
     层叠值，因此不会占用 .card 自身的 transform / transition。若改用 transition，
     .js .reveal.is-visible 的权重 (0,3,0) 会压过 .card:hover 的 (0,2,0)，
     卡片 hover 上浮失效、阴影加深也会丢掉 0.2s 过渡（已实测确认）。
   ========================================================================== */
.js .reveal {
  opacity: 0;                                                /* 未入场：只隐藏，不占 transform */
  will-change: opacity, transform;                           /* 动画期间提示浏览器提前合成 */
}

.js .reveal.is-visible {
  opacity: 1;
  /* fill-mode: backwards —— 延迟期内保持起始态，动画结束后不继续占据属性 */
  animation: reveal-in var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal-in {
  from { opacity: 0; transform: translate(-12px, 16px); }    /* 左侧 12px、下方 16px 起步 */
  to   { opacity: 1; transform: none; }                      /* 归位 */
}


/* ==========================================================================
   10. 响应式
   ========================================================================== */

/* ---- 平板及以下（≤ 900px）---- */
@media (max-width: 900px) {
  .cards { grid-template-columns: minmax(0, 1fr); }          /* 项目卡片改单列 */
}

/* ---- 手机（≤ 720px）---- */
@media (max-width: 720px) {
  :root {
    --section-y: clamp(60px, 10vh, 88px);
    --nav-h: 52px;
  }

  body { font-size: 16px; }                                  /* 正文降到 16px */

  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 64px) 56px; }

  .hero__actions .btn { flex: 1 1 auto; }                     /* 手机上按钮等宽排列 */

  /* 章节标题：序号转为标题上方的小标签 */
  .section__head { flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }

  /* 教育条目：时间独占一行，学校与学位并排 */
  .edu__item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
  }
  .edu__time { grid-column: 1 / -1; }

  /* 技能分组：改为纵向堆叠 */
  .skills__group { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .skills__title { padding-top: 0; }

  /* 卡片内文：dt 与 dd 各占一行 */
  .card__body { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .card__body dt { line-height: 1.7; }
  .card__body dd + dt { margin-top: var(--sp-2); }            /* 拉开不同分组的间距 */

  .card { padding: var(--sp-3); }

  .timeline { padding-left: var(--sp-3); }

  /* 工作经历头部：公司、职位、时间纵向排列 */
  .timeline__head { grid-template-columns: minmax(0, 1fr); }
  .timeline__time { grid-column: 1; }
}


/* ==========================================================================
   11. 无障碍：尊重“减弱动态效果”系统偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* 入场元素直接呈现最终状态：animation: none 同时消掉动画延迟，
     否则上面的 animation-duration 只压时长，fill-mode: backwards 仍会在
     延迟期（最长 180ms）内把元素按回透明，出现"先空一拍再闪现" */
  .js .reveal { opacity: 1; animation: none !important; }
}