/* ============================================================
   样式表：控制网站的长相（颜色、字号、间距、排版）
   和 index.html 分开写，是为了"内容"和"外观"互不干扰。

   本文件分三块，从上往下读：
     1. 配色变量（改颜色只看这里）
     2. 页面骨架（左一大竖块 + 右两横块）
     3. 各个小零件的样式
   ============================================================ */


/* ============================================================
   1. 配色：黄 + 绿，低饱和度
   所有颜色集中在这里，改这里 = 全站换色。
   每个颜色的饱和度都控制在 40% 以下，所以柔和、不刺眼；
   对比度也都验过，文字不会看不清。
   ============================================================ */
:root {
  /* ---------- 深色暖橄榄（当前启用） ---------- */
  --bg: #191C16;
  /* 页面底色：带一点绿味的深墨色 */
  --surface: #212619;
  /* 大块（三块）的底色 */
  --surface-2: #262B1E;
  /* 块里面的小卡片底色，比大块略亮 */
  --border: #39402E;
  /* 边框颜色 */

  --text: #E3E5D5;
  /* 正文颜色：偏暖的米白，不是纯白，所以不刺眼 */
  --text-soft: #CFD3C0;
  /* 段落正文，比 --text 稍暗一点 */
  --muted: #9CA289;
  /* 次要文字（灰绿色） */

  --green: #93AE7C;
  /* 绿色：链接、卡片悬停边框用 */
  --green-strong: #A9C48F;
  /* 亮一点的绿：小标题、名字用 */
  --yellow: #CDB97B;
  /* 黄色：强调文字、标签文字、小装饰块 */
  --yellow-soft: #2E2B1C;
  /* 暗淡的黄：标签的底色 */
  --on-green: #1A1D14;
  /* 绿色底上的文字（深色） */

  --navbar-bg: rgba(25, 28, 22, 0.86);
  /* 顶部导航条的半透明底色 */

  --radius: 16px;
  /* 大块圆角 */
  --radius-sm: 12px;
  /* 小块圆角 */
}

/* ============================================================
   想换成「浅色米黄」配色？把下面这一整段外面的注释符号去掉，
   同时删掉（或注释掉）上面那段深色的 :root 即可。
   这些颜色的对比度也都验过，不会看不清。

:root {
  --bg: #FAF7EC;
  --surface: #FFFDF6;
  --surface-2: #F3EFE0;
  --border: #E2DAC4;
  --text: #33332A;
  --text-soft: #4A4A3C;
  --muted: #6E6B57;
  --green: #4F6B3C;
  --green-strong: #3F5A33;
  --yellow: #8A6D1F;
  --yellow-soft: #F0E6C0;
  --on-green: #FFFDF6;
  --navbar-bg: rgba(250, 247, 236, 0.86);
  --radius: 16px;
  --radius-sm: 12px;
}
   ============================================================ */


/* ============================================================
   2. 全局基础
   ============================================================ */

/* 内边距和边框都算进元素宽度，布局不容易出错 */
* {
  box-sizing: border-box;
}

html {
  /* 点导航链接时平滑滚动过去，而不是瞬间跳过去 */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* 去掉浏览器默认的页面外边距 */
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  /* 行高 1.75 倍字高，中文读起来更透气 */
  -webkit-font-smoothing: antialiased;
}

/* 用鼠标选中文字时，底色用柔和的黄 */
::selection {
  background: var(--yellow);
  color: var(--on-green);
}

a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  color: var(--green-strong);
  text-decoration: underline;
}

/* 键盘 Tab 键选中链接时的外框，不看鼠标也能操作 */
a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 所有小标题统一：绿色 + 前面一个黄色小方块 */
h2 {
  font-size: 19px;
  color: var(--green-strong);
  margin: 0 0 14px;
  letter-spacing: .3px;
}

h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--yellow);
  vertical-align: middle;
  /* 让方块和文字视觉上对齐 */
}

/* 从导航跳过来时，留出顶部吸顶栏的高度，标题才不会被挡住 */
section[id] {
  scroll-margin-top: 80px;
}


/* ============================================================
   3. 页面骨架：按草图分成"左一大块 + 右两小块"
   ============================================================ */

.page {
  max-width: 1160px;
  margin: 0 auto;
  /* auto = 水平居中 */
  padding: 44px 24px 72px;
}

/* 两栏网格：这是整个排版的核心 */
.bento {
  display: grid;
  /* 左栏 : 右栏 ≈ 0.64 : 1，跟草图的 441 : 686 一致
     想让左栏更宽就调大 0.64（比如 0.8） */
  grid-template-columns: 0.64fr 1fr;
  /* 行间距 28px（右栏两块之间），列间距 64px（左右两栏之间） */
  gap: 28px 64px;
  align-items: stretch;
  /* 两栏高度拉齐，所以左块和右栏的上边、下边是对齐的 */
}

/* 右栏：两个横块上下叠放 */
.column {
  display: grid;
  /* 上下两块各占一半高度。想成 2:1 就写 2fr 1fr */
  grid-template-rows: 1fr 1fr;
  gap: 28px;
}

/* 一个"块"的共同外观（三个块都用这个） */
.block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
}

/* 让网格里的块可以被压缩到比内容更窄。
   不加这一条，块里的长内容（比如一排技能标签）会把整个网格撑宽，
   手机上就会横向溢出、右边的内容被屏幕切掉。 */
.bento > *,
.column > * {
  min-width: 0;
}


/* ============================================================
   4. 左栏：关于我（头像 + 名字 + 简介 + 联系）
   ============================================================ */

/* 圆形头像。想换成真照片：在 index.html 里把它换成 <img class="avatar" ...> */
.avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--yellow-soft);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  /* 让里面的字水平垂直都居中 */
  font-size: 26px;
  color: var(--yellow);
  margin-bottom: 20px;
}

/* 换成真照片时，图片按比例裁切填满，不会变形 */
img.avatar {
  object-fit: cover;
  display: block;
}

.eyebrow {
  /* "你好，我是"这行小字 */
  margin: 0 0 2px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--yellow);
}

.name {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 42px);
  /* 字号随屏幕宽度缩放，手机上不会撑破 */
  color: var(--green-strong);
  letter-spacing: -.5px;
  line-height: 1.3;
}

.tagline {
  margin: 10px 0 28px;
  color: var(--muted);
  font-size: 16px;
}

.block-about p {
  /* 正文段落：颜色比标题浅一点，读起来不压眼 */
  color: var(--text-soft);
  font-size: 15px;
  margin: 0 0 12px;
}

/* 只在"联系我"这种后接小标题的地方留大间距，
   标题和它下面的正文之间保持默认的 14px */
.block-about p + h2 {
  margin-top: 28px;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li {
  padding: 5px 0;
  font-size: 15px;
  color: var(--text-soft);
}


/* ============================================================
   5. 右上：我的喜好
   ============================================================ */

.block-hobbies {
  /* 竖着排，并让整块内容在垂直方向居中
     —— 这块内容少，右栏又要和左边的大块等高，
     不居中就会在下面空出一大片。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block-lead {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--muted);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  /* 一行放不下就自动换行 */
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag {
  background: var(--yellow-soft);
  border: 1px solid var(--border);
  color: var(--yellow);
  padding: 8px 17px;
  border-radius: 999px;
  /* 够大的圆角 = 胶囊形状 */
  font-size: 14px;
}

/* ------------------------------------------------------------
   按钮样式的链接（.btn）
   注意：它的标签仍然是 <a>，不是 <button>。
   因为要做的事情是"跳到另一个页面"，用链接才是正确的做法；
   <button> 自己不会跳转，必须额外写 JavaScript 命令它。
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  /* 既能设内外边距，又不会独占一整行 */
  align-self: flex-start;
  /* 父块是竖排 flex，不加这句按钮会被拉满整个块宽 */
  margin-top: 22px;
  padding: 10px 22px;
  border-radius: 999px;
  /* 胶囊形状 */
  background: var(--green);
  color: var(--on-green);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}

.btn:hover {
  background: var(--green-strong);
  color: var(--on-green);
  text-decoration: none;
  /* 去掉链接默认的下划线 */
  transform: translateY(-2px);
  /* 鼠标移上去轻轻浮起 */
}

.btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}


/* ============================================================
   6. 右下：作品卡片
   ============================================================ */

.card-grid {
  display: grid;
  /* 每列最少 150px，块变宽就自动多排一列 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  /* 竖着排，方便把"查看详情"推到底部 */
  transition: border-color .15s ease, transform .15s ease;
}

.card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  /* 鼠标移上去轻轻浮起 */
}

.card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--text);
}

.card p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  flex: 1;
  /* 占满剩余空间，卡片高度不齐时链接仍对齐底部 */
}

.card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}

.card-link:hover {
  color: var(--yellow);
}


/* ============================================================
   7. 顶部导航条 + 页脚
   ============================================================ */

.navbar {
  position: sticky;
  /* 滚动时吸在顶部 */
  top: 0;
  z-index: 10;
  padding: 14px 24px;
  background: var(--navbar-bg);
  /* 半透明 */
  backdrop-filter: blur(10px);
  /* 毛玻璃效果 */
  border-bottom: 1px solid var(--border);
}

/* 让导航条里的内容宽度和 .page 一致，logo 才会和内容块左边缘对齐 */
.navbar-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.logo {
  font-weight: 700;
  font-size: 17px;
  color: var(--yellow);
}

.navbar nav {
  display: flex;
  gap: 22px;
}

.navbar nav a {
  color: var(--muted);
  font-size: 15px;
}

.navbar nav a:hover {
  color: var(--green-strong);
  text-decoration: none;
}

.footer {
  border-top: 1px solid var(--border);
  padding: 28px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.footer p {
  margin: 0;
}


/* ============================================================
   8. 小屏幕适配
   窗口变窄时，两栏会自动变成上下一条，不会挤在一起。
   ============================================================ */

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
    /* 改成单栏 */
    gap: 24px;
  }

  .column {
    grid-template-rows: auto auto;
    /* 右栏两块恢复成由内容决定高度 */
  }
}

@media (max-width: 560px) {
  .page {
    padding: 24px 16px 48px;
  }

  .block {
    padding: 22px 20px;
  }

  .navbar {
    padding: 12px 16px;
  }

  .navbar nav {
    gap: 14px;
  }

  .navbar nav a {
    font-size: 14px;
  }

  .card-grid {
    grid-template-columns: 1fr;
    /* 手机上作品卡片一行一个 */
  }
}