/* me.ychmmmt.com — 个人页
   ─────────────────────────────────────────────────────────────────
   自带一份色板与字体栈，不引用主站的 website.css：两个站点是独立部署的，
   跨站引样式会让个人页的可用性挂在主站上，而且主站改版会无声地改掉这里。
   数值与主站保持一致，是为了看起来出自同一个人之手 —— 那是有意的重复。 */

:root {
  --ground:    #FAF8F3;
  --surface:   #FFFFFF;
  --ink:       #1B1813;
  --line:      rgba(27, 24, 19, .13);
  --line-soft: rgba(27, 24, 19, .06);
  --gold:      #9C7A2A;
  --gold-wash: rgba(156, 122, 42, .09);
  --shadow-sm: 0 1px 2px rgba(27,24,19,.05), 0 4px 12px rgba(27,24,19,.05);

  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", "Noto Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --shell: 720px;
  --pad: clamp(20px, 6vw, 40px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #14120E;
    --surface:   #1A1713;
    --ink:       #F3EEE3;
    --line:      rgba(243, 238, 227, .15);
    --line-soft: rgba(243, 238, 227, .07);
    --gold:      #C9A758;
    --gold-wash: rgba(201, 167, 88, .11);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(48px, 12vh, 96px) var(--pad) 48px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell); margin: 0 auto; }

h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.25; }
h2 { font-size: 17px; margin-bottom: 10px; }

a { color: inherit; }
a:hover { color: var(--gold); }

.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

.intro { margin: 14px 0 0; font-size: 16px; opacity: .85; }

.block { margin-top: 44px; }

/* 作品卡片。个人页上「我做了什么」比「我是谁」更有说服力，所以它排在最前
   而且是唯一有边框的块 —— 视觉重量给产出物，不给自我介绍。 */
.work {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.work:hover { border-color: var(--gold); transform: translateY(-1px); }
.work b { font-family: var(--serif); font-size: 18px; display: block; }
.work span { display: block; margin-top: 2px; font-size: 13px; opacity: .7; }
.work p { margin: 12px 0 0; font-size: 14px; opacity: .85; }
.work em {
  display: inline-block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--gold);
}

.values { margin: 0; padding: 0; list-style: none; }
.values li {
  position: relative;
  padding-left: 18px;
  margin-top: 8px;
  font-size: 14px;
  opacity: .85;
}
.values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.links a {
  display: inline-block;
  padding: 6px 13px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.links a:hover { border-color: var(--gold); }

.foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.9;
  opacity: .6;
}
.foot a { text-decoration: none; }
.foot p { margin: 0; }

/* 语言切换：右上角，不抢主视觉 */
.lang {
  position: absolute;
  top: clamp(18px, 4vh, 28px);
  right: var(--pad);
  font-size: 12px;
  letter-spacing: .04em;
}
.lang a { text-decoration: none; opacity: .5; }
.lang a:hover, .lang a[aria-current="page"] { opacity: 1; }
.lang a + a { margin-left: 10px; }