/* ============================================================
   咕嘿嘿 · personal-site
   视觉规格唯一来源：DESIGN.md
   颜色只出自 :root 变量，间距只出自 8 倍数体系
   ============================================================ */

:root{
  /* 颜色（四色封顶） */
  --paper:#F6F1E7;
  --ink:#2D2A26;
  --ink-mute:#6F6960;
  --accent:#BE3C2D;
  --gold:#A88E58;
  --rule:#D8D2C4;

  /* 字体 */
  --font-serif:"Songti SC","STZhongsong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --font-sans:"PingFang SC","HarmonyOS Sans","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* 布局 */
  --pad-x:clamp(24px,6vw,96px);
  --max-text:720px;
  --max-wide:1080px;
  --gap-section:96px;

  /* 字号梯度（四级） */
  --fs-hero:clamp(40px,7vw,68px);
  --fs-section:28px;
  --fs-card:20px;
  --fs-body:17px;
  --fs-note:13px;
}

@media (max-width:768px){
  :root{ --gap-section:64px; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.75;
}

/* ---------- 首屏 ---------- */

.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:24px;
  padding:96px var(--pad-x) var(--gap-section);
}

.hero__name{
  margin:0;
  font-family:var(--font-serif);
  font-size:var(--fs-section);
  letter-spacing:.08em;
  color:var(--accent);
}

.hero__claim{
  margin:0;
  max-width:var(--max-text);
  font-family:var(--font-serif);
  font-size:var(--fs-hero);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
  /* 窄屏换行时避免末行只剩一个字（孤字） */
  text-wrap:balance;
}

.hero__en{
  margin:0;
  max-width:var(--max-text);
  font-size:var(--fs-card);
  letter-spacing:.06em;
  color:var(--ink-mute);
}

.hero__hint{
  margin:24px 0 0;
  font-size:var(--fs-note);
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--ink-mute);
}

/* 向下箭头用 CSS 画，不用字符「↓」（字符在 13px 下渲染成细竖条） */
.hero__hint::after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  margin:8px auto 0;
  border-right:1.5px solid var(--ink-mute);
  border-bottom:1.5px solid var(--ink-mute);
  transform:rotate(45deg);
}

/* ---------- 板块 ---------- */

.section{
  max-width:var(--max-wide);
  margin:0 auto;
  padding:var(--gap-section) var(--pad-x);
}

.section + .section{
  padding-top:0;
}

.section__title{
  margin:0;
  font-family:var(--font-serif);
  font-size:var(--fs-section);
  font-weight:600;
  text-align:center;
  letter-spacing:.04em;
}

.section__title::after{
  content:"";
  display:block;
  width:32px;
  height:1px;
  margin:16px auto 0;
  background:var(--gold);
}

.section__lead{
  max-width:var(--max-text);
  margin:24px auto 0;
  text-align:center;
  color:var(--ink-mute);
}

/* ---------- 项目卡 ---------- */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:48px 0 0;
  padding:0;
  list-style:none;
}

.card{
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--rule);
  transition:border-color .2s;
}

.card:hover{
  border-color:var(--ink-mute);
}

.card__name{
  margin:0;
  font-family:var(--font-serif);
  font-size:var(--fs-card);
  font-weight:600;
  letter-spacing:.02em;
}

.card__what{
  margin:12px 0 0;
}

.card__why{
  margin:12px 0 0;
  color:var(--ink-mute);
}

.card__tags{
  margin:auto 0 0;
  padding-top:24px;
  font-size:var(--fs-note);
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--ink-mute);
}

/* ---------- 关于我 ---------- */

.about{
  max-width:var(--max-text);
  margin:48px auto 0;
  text-align:center;
}

.about p{
  margin:0;
  text-wrap:balance;
}

.about p + p{
  margin-top:16px;
}

/* ---------- 联系方式 ---------- */

.contact{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
  margin:48px 0 0;
  padding:0;
  list-style:none;
}

.contact__item{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.contact__label{
  font-size:var(--fs-note);
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--ink-mute);
}

.contact__value{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:4px;
  transition:text-decoration-color .2s;
}

.contact__value:hover{
  text-decoration-color:var(--accent);
}

a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

/* ---------- 404 页（复用 .hero 的居中结构） ---------- */

.nf__back{
  margin:24px 0 0;
}

/* ---------- 页脚 ---------- */

.footer{
  border-top:1px solid var(--rule);
  padding:32px var(--pad-x);
  text-align:center;
}

.footer__text{
  margin:0;
  font-size:var(--fs-note);
  line-height:1.5;
  color:var(--ink-mute);
}

/* 窄屏：项目卡收成一列（必须放在 .cards 基础规则之后，否则被覆盖） */
@media (max-width:768px){
  .cards{ grid-template-columns:1fr; }
  .contact{ flex-direction:column; align-items:center; gap:16px; }
}

/* ---------- 动效 ---------- */

/* 首屏入场：淡入 + 自下浮起 12px，0.5s，无弹跳 */
@keyframes heroIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

.hero{
  animation:heroIn .5s ease-out both;
}

/* 项目卡滚动进入：初始隐藏（仅在 JS 可用时，见 index.html 的 js 类），
   由 main.js 用 IntersectionObserver 打上 .is-in，只触发一次 */
.js .card{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease-out,transform .4s ease-out,border-color .2s;
}

.js .card.is-in{
  opacity:1;
  transform:none;
}

/* 关闭动效：必须放在上面两条 .js .card 规则之后才生效 */
@media (prefers-reduced-motion:reduce){
  .hero{ animation:none; }
  .js .card{
    opacity:1;
    transform:none;
    transition:border-color .2s;
  }
}