/*
 * Typography notes
 * - Each language gets its own setting. English: Newsreader, 20px/1.7, ragged right, hyphenated.
 *   Chinese: Noto Serif SC, 18px/2.0, justified, strict line breaking (no ，。at a line start).
 *   Latin words inside Chinese text use Noto Serif SC's own Latin, which is drawn to sit with the Han.
 * - build.py/typeset.py already fix the characters (full-width punctuation, quarter-em gaps between
 *   Han and Latin), so the browser's own autospacing is turned off to avoid doubling it.
 */
:root {
  --ink: #1d1b19; --body: #34302c; --muted: #6a645d; --line: #ebe8e4; --rule: #d9d4cd; --bg: #ffffff; --hover: #b4361f;
  --hike: #0f7a5a; --dive: #2b5fd9; --write: #c2366b;
  --en: Newsreader, "Noto Serif SC", Georgia, serif;
  --zh: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  --sans: Inter, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-autospace: no-autospace; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--en);
  font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[lang|="zh"] { font-family: var(--zh); }
.content [lang|="en"], .content[lang|="en"] { font-family: var(--en); }
::selection { background: rgba(194, 54, 107, .16); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--hover); }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.c-hike { color: var(--hike); } .c-dive { color: var(--dive); } .c-write { color: var(--write); }
.meta { font-family: var(--sans); font-size: 13px; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
h1, h2, h3 { text-wrap: balance; }

/* Header */
header.site { padding: 72px 0 40px; text-align: center; border-bottom: 1px solid var(--line); }
header.site .name { font-family: var(--en); font-size: 44px; font-weight: 600; letter-spacing: -0.015em; }
.tagline { margin: 10px 0 0; font-family: var(--en); font-size: 19px; font-style: italic; color: var(--muted); }
header.site nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 24px; margin-top: 28px; font-family: var(--sans); font-size: 14px; font-weight: 500; }
header.site nav a { padding: 6px 0; }
header.site nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Hand-drawn title marks */
.mark { padding: 0 4px; margin: 0 -2px; background-repeat: no-repeat; background-size: 100% 0.5em; background-position: 0 92%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .25s ease; }
a.mark:hover { background-size: 100% 0.62em; color: var(--ink); }
.mark-hike { background-image: url(mark-hike.svg); }
.mark-dive { background-image: url(mark-dive.svg); }
.mark-write { background-image: url(mark-write.svg); }

/* Feed */
.entry { padding: 44px 0; border-bottom: 1px solid var(--line); }
.entry .meta, .post .meta { margin: 0 0 14px; }
.cat { font-weight: 600; }
.entry h2 { margin: 0; font-size: 34px; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; }
.entry h2:lang(zh) { font-size: 30px; line-height: 1.4; letter-spacing: .03em; }
.excerpt { margin: 16px 0 0; font-size: 19px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.excerpt:lang(zh) { font-size: 17px; line-height: 1.95; letter-spacing: .02em; text-align: justify; line-break: strict; }
.more { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.more a { font-weight: 600; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 40px 0; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.listing { margin: 48px 0 0; font-size: 40px; font-weight: 600; letter-spacing: -0.01em; }

/* Archive */
.archive { padding: 32px 0 8px; border-bottom: 1px solid var(--line); }
.archive h2 { margin: 0 0 8px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.archive ul { list-style: none; margin: 0; padding: 0; }
.archive li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 10px 0; font-size: 19px; }
.archive li a:lang(zh) { font-size: 17px; letter-spacing: .02em; }

/* Post title */
.post { padding: 48px 0 0; }
.post h1 { margin: 0; font-size: 46px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.post h1:lang(zh) { font-size: 40px; line-height: 1.35; letter-spacing: .04em; }

/* Body text: English */
.content { margin-top: 40px; font-size: 20px; line-height: 1.7; color: var(--body);
  font-variant-numeric: oldstyle-nums proportional-nums; overflow-wrap: break-word; }
.content p, .content li { margin: 0 0 1.05em; text-wrap: pretty; }
.content :lang(en), .content:lang(en) { hyphens: auto; -webkit-hyphens: auto; text-align: left; letter-spacing: 0; }

/* Body text: Chinese */
.content:lang(zh), .comment-body:lang(zh) {
  font-size: 18px; line-height: 2; letter-spacing: .02em; text-align: justify;
  line-break: strict; word-break: normal; hanging-punctuation: allow-end last;
  font-variant-numeric: lining-nums proportional-nums;
}
.content:lang(zh) p { margin-bottom: 1.25em; }
.content:lang(zh) p:lang(en):not(.signoff):not(.caption) { font-size: 19px; line-height: 1.8; }

/* Section headings (## 壹): centered between two hairlines */
.content h2 { display: flex; align-items: center; justify-content: center; gap: 1em;
  margin: 2.8em 0 1.5em; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ink); letter-spacing: .1em; }
.content h2:lang(zh) { letter-spacing: .4em; }
.content h2::before, .content h2::after { content: ""; flex: 0 0 2.4em; height: 1px; background: var(--rule); }
.content h2:lang(zh)::after { margin-left: -.4em; }
.content h3 { margin: 2em 0 .6em; font-size: 1.05em; color: var(--ink); }

.content blockquote { margin: 1.6em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--rule); color: var(--muted); }
.content blockquote:lang(en) { font-style: italic; }
.content blockquote:lang(zh), .content:lang(zh) blockquote { font-family: var(--kai); font-style: normal; }
.content strong { font-weight: 600; color: var(--ink); }
.content a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule);
  text-decoration-thickness: 1px; text-underline-offset: .22em; }
.content a:hover { color: var(--hover); text-decoration-color: currentColor; }

/* Images, captions, sign-offs */
.content img { display: block; max-width: 100%; height: auto; margin: 2em auto 0; border-radius: 4px; }
.content p:has(> img) { margin: 0 0 2em; text-align: center; }
.content .caption { margin: -1.2em 0 2.2em; font-family: var(--sans); font-size: 13px; line-height: 1.6;
  letter-spacing: .02em; color: var(--muted); text-align: center; }
.content .signoff { margin-top: 2em; font-family: var(--sans); font-size: 14px; color: var(--muted);
  text-align: right; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; }

/* Embeds */
.content iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; margin: 0 auto; }
.content center, .content p[style] { text-align: center; }

/* GPX */
.gpx-map { height: 440px; border-radius: 12px; border: 1px solid var(--line); background: #f3f4f1; }
.gpx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.gpx-stats dt { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gpx-stats dd { margin: 4px 0 0; font-family: var(--en); font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: lining-nums; }
.gpx-stats dd span { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.gpx-profile { margin: 24px 0 0; }
.gpx-profile figcaption { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.gpx-profile svg { display: block; width: 100%; height: 96px; }
.gpx-profile .fill { fill: var(--hike); fill-opacity: .12; }
.gpx-profile .line { fill: none; stroke: var(--hike); stroke-width: 2; vector-effect: non-scaling-stroke; }
.content a.button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; margin-right: 10px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 500; }
.content a.button:hover { background: var(--hike); color: #fff; }

/* Comments & adjacent */
.comments { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.comments h2 { margin: 0 0 16px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.comment { padding: 12px 0; font-size: 17px; line-height: 1.7; }
.comment .meta { margin: 0 0 4px; }
.comment p { margin: 0; }
.adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--line); }
.adjacent a { display: flex; flex-direction: column; gap: 6px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.adjacent a :lang(zh) { font-size: 17px; letter-spacing: .02em; }
.adjacent .next { text-align: right; }

footer.site { padding: 32px 0 64px; border-top: 1px solid var(--line); text-align: center; font-family: var(--sans); font-size: 13px; color: var(--muted); }

@media (max-width: 560px) {
  header.site { padding: 48px 0 28px; }
  header.site .name { font-size: 34px; }
  .entry h2 { font-size: 28px; }
  .entry h2:lang(zh) { font-size: 25px; }
  .post h1 { font-size: 36px; }
  .post h1:lang(zh) { font-size: 32px; }
  .excerpt, .content { font-size: 18px; }
  .content:lang(zh), .excerpt:lang(zh) { font-size: 17px; line-height: 1.95; }
  .gpx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gpx-map { height: 320px; }
}