/* QinYue琴悦 — 个人站点
   杂志左对齐版面：刊头左起，正文右移 132px，留白不对称。
   品牌蓝 #05a4ed 只出现在两处：分节线的起笔、节标题前的编号。
   无导航、无卡片、无脚本。 */

:root {
  --ink:     #2b2b2b;  /* 标题 / 条目名 */
  --body:    #4f4f4f;  /* 正文 */
  --soft:    #6a6a6a;  /* 条目说明 */
  --muted:   #6e6e6e;  /* 刊头 / 节标题 / 声明（加深以保可读）*/
  --faint:   #b5b5b5;  /* 页脚 */
  --bg:      #fbfbfa;
  --rule:    #e6e6e3;
  --brand:   #05a4ed;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--body);
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── 刊头（含背景图）────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
  opacity: 0.42;
}

/* 顶部完全不遮，到 80% 高度渐变成纯背景色，滚过刊头即退出 */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(251, 251, 250, 0) 0%,
    rgba(251, 251, 250, 0.12) 45%,
    rgba(251, 251, 250, 0.78) 80%,
    #fbfbfa 100%);
}

.masthead {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 70px;
}

.wordmark {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;   /* 抵消末字后多出的字距 */
  color: var(--body);
  margin-bottom: 40px;
}

.statement {
  font-size: 58px;
  line-height: 1.26;
  letter-spacing: 0.01em;
  font-weight: normal;   /* 作为 h1 时避免浏览器默认加粗 */
  color: var(--ink);
}

/* ── 分节 ───────────────────────────────── */

section {
  border-top: 1px solid;
  border-image: linear-gradient(to right,
    var(--brand) 0%,
    var(--brand) 14%,
    rgba(5, 164, 237, 0.35) 34%,
    var(--rule) 62%,
    var(--rule) 100%) 1;
  padding: 44px 0 58px;
}

/* 正文整体右移，与刊头左边缘形成不对称留白 */
.body {
  max-width: 560px;
  margin-left: 132px;
}

h2 {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 22px;
}

h2 .num {
  color: var(--brand);
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-right: 11px;
}

p + p { margin-top: 14px; }

/* ── 「我在做什么」下的三条 ─────────────── */

.items { margin-top: 28px; }

.item + .item { margin-top: 22px; }

.item dt {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 3px;
}

.item dd {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--soft);
}

/* ── 声明 / 状态 ────────────────────────── */

.disclaimer,
.status {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
}

/* ── 页脚 ───────────────────────────────── */

footer {
  margin-top: auto;
  padding: 0 24px 34px;
  text-align: center;
  font-size: 12px;
  line-height: 2;
  color: var(--faint);
}

footer a {
  color: var(--faint);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover { color: var(--brand); }

/* ── 刊头入场（克制，仅首屏一次）────────── */

@keyframes qyFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wordmark  { animation: qyFadeUp 0.6s ease-out both; }
.statement { animation: qyFadeUp 0.7s 0.15s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .statement { animation: none; }
}

/* ── 窄屏降级 ───────────────────────────── */

/* 平板：标题收小，右移量减半 */
@media (max-width: 1024px) {
  .wrap { padding: 0 32px; }

  .statement { font-size: 44px; }

  .body { margin-left: 66px; }
}

/* 手机：塌成单栏，与 ①② 一样 */
@media (max-width: 640px) {
  .wrap { padding: 0 24px; }

  .masthead {
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .wordmark  { margin-bottom: 28px; }
  .statement { font-size: 30px; }

  section { padding: 34px 0 44px; }

  .body { margin-left: 0; }

  h2 { margin-bottom: 18px; }
}