@charset "UTF-8";
/* ===========================
   Layer 3: About 关于页专用样式
   Hero / 正文排版 / 技能标签云 / 简历按钮 / 底部
   仅在 about.html 中引入
   复用 post.css 的排版系统 (post-content 类)
   =========================== */


/* ========== Hero Section (全宽沉浸式) ========== */
.about-hero {
  background-image: url(../assets/images/bg-pattern.png);
  background-size: 180px 300px;
  background-repeat: repeat;
  background-position: top left;
  border-bottom: 2px solid #000;
  padding: 48px 32px 36px;
  position: relative;
  overflow: hidden;
}

/* 可读性遮罩: 让文字在复杂背景上清晰 */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
}

.about-hero-title {
  font-family: "PC98", "MS PGothic", "Unifont", monospace;
  font-size: 34px;
  font-weight: bold;
  color: #000;
  margin: 0 0 8px;
  text-shadow:
    2px 2px 0 rgba(249, 189, 221, 0.5),
    0 0 20px rgba(255, 255, 255, 0.8);
}

.about-hero-slogan {
  font-family: "MS PGothic", "Unifont", sans-serif;
  font-size: 14px;
  color: #5a3e4b;
  margin: 0 0 18px;
  line-height: 1.7;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.about-hero-deco {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 160px;
}

.about-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c44569;
  flex-shrink: 0;
}

.about-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, #c44569, #f9bddd, #b4dffb);
}


/* ========== 正文容器 (日记本/档案袋风格) ========== */
.about-body {
  padding: 28px 24px 20px;
  /* 无毛玻璃, 背景直通 */
  background-image: url(../assets/images/about-backgrand.jpg);
  background-size: 180px 320px;
  background-repeat: repeat;
  background-position: top left;
}

.about-article {
  max-width: 720px;
  margin: 0 auto;
  /* 不加 background 和 backdrop-filter, 实现"档案袋"感 */
}


/* ========== 复用 post-content 排版系统 ========== */

/*
 * 以下样式以 .about-content 为前缀，与 post-content 完全对应
 * 保持 18px 字号和 1.8 行高的阅读体验
 */

.about-content {
  font-family: "MS PGothic", "Unifont", "Hiragino Kaku Gothic Pro", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #2a1a2e;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* 极浅噪点纹理 —— 纸质感 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23fdfbfc'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23f7f0f3' fill-opacity='0.4'/%3E%3C/svg%3E");
  padding: 20px 24px;
  border-radius: 12px;
}


/* ---- 标题: H1-H4 (粉色装饰线) ---- */
.about-content h1,
.about-content h2,
.about-content h3,
.about-content h4 {
  font-family: "PC98", "MS PGothic", "Unifont", monospace;
  color: #1a0e1e;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  line-height: 1.35;
  position: relative;
}

.about-content > :first-child {
  margin-top: 0;
}

.about-content h1 {
  font-size: 24px;
  padding-bottom: 8px;
  border-bottom: 3px solid #f9bddd;
}

.about-content h2 {
  font-size: 20px;
  padding-bottom: 6px;
  padding-left: 14px;
  border-bottom: 2px solid #f9e0ec;
}

.about-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 4px;
  height: 1em;
  background: linear-gradient(180deg, #f9bddd, #c44569);
  border-radius: 2px;
}

.about-content h3 {
  font-size: 17px;
  padding-left: 12px;
  color: #3b2b3b;
}

.about-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 6px;
  height: 6px;
  background: #c44569;
  border-radius: 50%;
}

.about-content h4 {
  font-size: 15px;
  font-weight: bold;
  color: #5a3e4b;
  padding: 0 !important;
  margin-bottom: 0 !important;
  display: block !important;
  transform: none !important;
}

.about-content h4::after {
  display: none !important;
}


/* ---- 段落 ---- */
.about-content p {
  font-size: 14px;
  margin: 0 0 1em;
  line-height: 1.8;
}


/* ---- 加粗 / 斜体 ---- */
.about-content strong {
  color: #1a0e1e;
  font-weight: 700;
}

.about-content em {
  font-style: italic;
  color: #6b4e6e;
}


/* ---- 超链接 ---- */
.about-content a {
  color: #d46493;
  text-decoration: none;
  border-bottom: 1px dashed #e8a0b4;
  transition: color 0.2s, border-color 0.2s;
}

.about-content a:hover {
  color: #c44569;
  border-bottom-color: #c44569;
  border-bottom-style: solid;
}


/* ---- 列表 ---- */
.about-content ul,
.about-content ol {
  padding-left: 1.8em;
  margin: 0 0 1em;
}

.about-content li {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 0.3em;
}

.about-content li::marker {
  color: #c44569;
}


/* ---- 分割线 ---- */
.about-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f9bddd, #54a96f, transparent);
  margin: 2em 0;
}


/* ---- 引用块 ---- */
.about-content blockquote {
  margin: 1.2em 0;
  padding: 14px 18px;
  border-left: 4px solid #c44569;
  background: rgba(249, 189, 221, 0.08);
  border-radius: 0 8px 8px 0;
  position: relative;
}

.about-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 10px;
  font-size: 40px;
  font-family: Georgia, serif;
  color: rgba(196, 69, 105, 0.15);
  line-height: 1;
  pointer-events: none;
}

.about-content blockquote p {
  font-size: 13.5px;
  color: #5a3e4b;
  font-style: italic;
  margin-bottom: 0.4em;
}

.about-content blockquote p:last-child {
  margin-bottom: 0;
}


/* ---- 行内代码 ---- */
.about-content code {
  font-family: "Consolas", "Source Code Pro", "Menlo", monospace;
  font-size: 0.9em;
  background: #f8f0f4;
  color: #c44569;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #f0e0e8;
  word-break: break-word;
}


/* ---- 代码块 (复用 post.css VS Code 风格) ---- */
.code-block {
  position: relative;
  margin: 1.2em 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #d4d4d4;
  background: #fafafa;
}

.code-block pre {
  margin: 0;
  padding: 16px 16px 14px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  background: transparent;
}

.code-block pre code {
  font-family: "Consolas", "Source Code Pro", "Menlo", monospace;
  font-size: 13px;
  color: #1e1e1e;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

.code-lang {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  font-family: "PC98", "MS PGothic", "Unifont", monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  background: #e8e8e8;
  color: #666;
  border-radius: 0 0 6px 0;
  line-height: 1.5;
}

.code-copy-btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  font-family: "PC98", "MS PGothic", "Unifont", monospace;
  padding: 2px 12px;
  background: #e8e8e8;
  color: #666;
  border: none;
  border-radius: 0 0 0 6px;
  cursor: url(../assets/items/select.png), pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1.5;
}

.code-copy-btn:hover {
  background: #f9bddd;
  color: #fff;
}

.code-copy-btn.copied {
  background: #c44569;
  color: #fff;
}


/* ---- 图片 ---- */
.about-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e0cfd6;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 auto;
}

.about-content img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(196, 69, 105, 0.12);
}

.post-figure {
  margin: 1.5em 0;
  text-align: center;
}

.post-figure figcaption {
  font-size: 12px;
  color: #999;
  font-style: italic;
  margin-top: 8px;
  line-height: 1.4;
}


/* ========== 技能标签云 ========== */
.about-skills-section {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 20px;
}

.about-skills-title {
  font-family: "PC98", "MS PGothic", "Unifont", monospace;
  font-size: 15px;
  color: #2a1a2e;
  margin: 0 0 14px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-skills-title::before {
  content: "⚡";
  font-size: 16px;
}

.about-skills-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 22px;
  border: 2px dashed #f9bddd;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
}

.about-skill {
  display: inline-block;
  font-family: "MS PGothic", "Unifont", sans-serif;
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid #e8a0b4;
  border-radius: 16px;
  background: transparent;
  color: #c44569;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: default;
}

.about-skill:hover {
  background: #f9bddd;
  color: #fff;
  border-color: #c44569;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(196, 69, 105, 0.15);
}

/* 分类微调: 不同分类可用不同色调 */
.about-skill[data-cat="hardware"] {
  border-color: #a0c4e8;
  color: #4a7fb5;
}

.about-skill[data-cat="hardware"]:hover {
  background: #a0c4e8;
  color: #fff;
  border-color: #4a7fb5;
}

.about-skill[data-cat="math"] {
  border-color: #c5b3e6;
  color: #7b5ea7;
}

.about-skill[data-cat="math"]:hover {
  background: #c5b3e6;
  color: #fff;
  border-color: #7b5ea7;
}

.about-skill[data-cat="maker"] {
  border-color: #a8d8a8;
  color: #4a8a4a;
}

.about-skill[data-cat="maker"]:hover {
  background: #a8d8a8;
  color: #fff;
  border-color: #4a8a4a;
}


/* ========== 简历下载按钮 ========== */
.about-resume-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 0;
  text-align: center;
}

.about-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "PC98", "MS PGothic", "Unifont", monospace;
  font-size: 13px;
  padding: 10px 28px;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  color: #2a1a2e;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s;
}

.about-resume-btn:hover {
  background: #f9bddd;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.about-resume-btn svg {
  flex-shrink: 0;
}


/* ========== 底部结尾 ========== */
.about-end {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 12px;
}

.about-end-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0cfd6, transparent);
}

.about-end-text {
  font-family: "MS PGothic", "Unifont", sans-serif;
  font-size: 11px;
  color: #bba3ad;
  white-space: nowrap;
}


/* ========== 响应式 ========== */

@media (max-width: 768px) {
  .left-col {
    display: none;
  }

  .col.right {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border: none;
  }

  /* Hero 缩小 */
  .about-hero {
    padding: 32px 16px 24px;
  }

  .about-hero-title {
    font-size: 26px;
  }

  .about-hero-slogan {
    font-size: 13px;
  }

  /* 正文 */
  .about-body {
    padding: 20px 12px 16px;
  }

  .about-content {
    padding: 16px 16px;
    font-size: 14px;
  }

  .about-content h1 { font-size: 20px; }
  .about-content h2 { font-size: 17px; }
  .about-content h3 { font-size: 15px; }

  /* 技能云 */
  .about-skills-cloud {
    padding: 14px 16px;
    gap: 6px;
  }

  .about-skill {
    font-size: 11px;
    padding: 3px 10px;
  }

  .about-skills-title {
    margin-left: 16px;
  }

  /* 简历 */
  .about-resume-section {
    padding: 20px 16px 0;
  }

  /* 代码块 */
  .code-block pre {
    font-size: 12px;
    padding: 12px;
  }

  /* 底部 */
  .about-end {
    padding: 20px 16px 8px;
  }
}