/* 寻找刘涵语
 *
 * ⛔ CHINESE BODY TEXT NEEDS MORE AIR THAN ENGLISH. Han characters are dense and
 * square, with no ascenders or descenders to give the eye a resting line, so the
 * 1.5 line-height that suits English reads as a solid block here. 1.9 is the
 * floor for comfortable reading, and the measure is set in characters (em) not
 * pixels, because a Chinese line holds roughly half as many glyphs per unit width.
 *
 * ⛔ AND NO WEBFONT. Every system that reads Chinese already ships a good face -
 * PingFang on Apple, Microsoft YaHei on Windows, Noto on Android and Linux - and
 * a Chinese webfont is several megabytes because it has to carry thousands of
 * glyphs. Asking for one would make a 128KB site slower than the WordPress it
 * replaced.
 *
 * The subject is a mother's appeal for her daughter. The design stays quiet:
 * paper, ink, one restrained red, and nothing that competes with the words.
 */

:root {
  --paper:  #fbfaf7;
  --card:   #ffffff;
  --ink:    #1c1a17;
  --soft:   #5f5a52;
  --line:   #e3dfd6;
  --accent: #8c2f2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #161513;
    --card:   #1d1b19;
    --ink:    #eceae5;
    --soft:   #a39d93;
    --line:   #33302c;
    --accent: #d98078;
  }
}

:root[data-theme="dark"] {
  --paper:  #161513;
  --card:   #1d1b19;
  --ink:    #eceae5;
  --soft:   #a39d93;
  --line:   #33302c;
  --accent: #d98078;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}

/* ── masthead ─────────────────────────────────────────────────────── */
.top {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.brand {
  display: block;
  max-width: 44em;
  margin: 0 auto;
  padding: 20px 16px;
  color: var(--ink);
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

main {
  max-width: 44em;
  margin: 0 auto;
  padding: 34px 16px 72px;
}

/* ── the front page list ──────────────────────────────────────────── */
.lede {
  margin: 0 0 6px;
  font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: .04em;
}

.posts { list-style: none; margin: 26px 0 0; padding: 0; }

.posts li {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.posts a {
  color: var(--ink);
  text-decoration: none;
}

.posts .t {
  font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  text-wrap: balance;
}

.posts a:hover .t { color: var(--accent); }

.posts time,
.when {
  display: block;
  margin-top: 4px;
  color: var(--soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.posts .ex {
  margin: 8px 0 0;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.8;
}

/* ── a post ───────────────────────────────────────────────────────── */
.post h1 {
  margin: 0;
  font-family: "Songti SC", "Noto Serif SC", "SimSun", serif;
  font-size: 27px;
  line-height: 1.55;
  letter-spacing: .02em;
  text-wrap: balance;
}

.when { margin-bottom: 26px; }

.prose p {
  margin: 0 0 1.35em;
  /* ⛔ NEVER justify Chinese with ragged inline latin - it opens rivers of space
     between characters. Left-aligned is what Chinese screen text expects. */
  text-align: left;
}

.prose strong, .prose b { font-weight: 700; }

/* ⛔ THE IMAGES ARE SCREENSHOTS carrying evidence, and WordPress wrote hard
   width/height attributes far larger than any phone. Overriding both is what
   stops a 1291px screenshot from forcing the page sideways. */
.prose img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  margin: 1.6em auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
}

.prose a { color: var(--accent); }

.foot {
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--soft);
  font-size: 14px;
}

.foot p {
  max-width: 44em;
  margin: 0 auto;
  padding: 20px 16px;
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .lede { font-size: 25px; }
  .post h1 { font-size: 22px; }
}

/* images that were uploaded to a post but never placed in its text, restored
   at the end. The rule marks them as a separate block without putting words
   into the author's mouth. */
.added {
  margin-top: 2.4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
}