/* Integration layer for the author's finished standalone appreciation pages. */
@font-face {
  font-family: "Jianshang Serif";
  src: url("fonts/jianshang-serif-complete-v64.woff2?v=20260913-1") format("woff2");
  font-style: normal;
  font-weight: 250 900;
  font-display: block;
}

@font-face {
  font-family: "Jianshang Reading Kai";
  src: url("fonts/jianshang-reading-kai.woff2?v=20260913-1") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}

@font-face {
  font-family: "Jianshang Reading FangSong";
  src: url("fonts/jianshang-reading-fangsong.woff2?v=20260913-1") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --paper: var(--page, #f0eadd);
  --paper-2: var(--feature, #f0eadd);
  --line: var(--border, rgba(120, 80, 65, .22));
  --editorial-cn: "Jianshang Serif", "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --source-han-cn: "Jianshang Serif", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --reading-kai-cn: "Jianshang Reading Kai", "Kaiti SC", "STKaiti", serif;
  --reading-fangsong-cn: "Jianshang Reading FangSong", "FangSong", "STFangsong", serif;
  --songti-cn: "Songti SC", "STSong", "SimSun", serif;
  --reading-cn: var(--editorial-cn);
  --reading-weight: 400;
}

html[data-reading-font="source-han"] {
  --reading-cn: var(--reading-kai-cn);
  --reading-weight: 300;
}

html[data-reading-font="sans"] {
  --reading-cn: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --reading-weight: 400;
}

html[data-reading-font="original"] {
  --reading-cn: var(--reading-fangsong-cn);
  --reading-weight: 400;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 124px;
}

a[x-apple-data-detectors],
a[href^="tel:"],
a[href^="sms:"] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

html body {
  font-family: var(--editorial-cn);
  font-weight: 400;
  font-synthesis: none;
}

/* Keep the finished reading header in the first paint. Older standalone
   articles used to show their legacy series pill, then swap to the full site
   navigation after JavaScript ran. The shared reading header is intentionally
   one row: brand, settings and account only. */
.inner-site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.inner-site-nav {
  position: relative;
  display: flex;
  width: min(100% - 40px, 1120px);
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: auto;
}

.inner-site-brand {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--editorial-cn);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
  text-decoration: none;
  white-space: nowrap;
}

.inner-site-brand img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.inner-site-links {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}

.inner-site-links a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .inner-site-nav {
    width: min(100% - 32px, 1120px);
    min-height: 58px;
    height: 58px;
  }

  .inner-site-brand {
    padding-right: 146px;
    font-size: 19px;
  }

  .inner-site-brand img {
    width: 38px;
    height: 34px;
  }

  .inner-site-links {
    position: absolute;
    top: 0;
    right: 0;
    width: 138px;
    height: 58px;
    gap: 6px;
  }

  .inner-site-links a {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding: 0;
    background: color-mix(in srgb, var(--paper) 88%, white 12%);
    font-size: 12px;
  }

  .inner-site-settings { width: 50px; }
  .inner-site-theme { width: 82px; }
}

@media (max-width: 380px) {
  .inner-site-nav { width: min(100% - 28px, 1120px); }
  .inner-site-brand { padding-right: 132px; }
  .inner-site-links { width: 126px; }
  .inner-site-settings { width: 44px; }
  .inner-site-theme { width: 76px; }
}

html body :where(h1, h2, h3, h4, h5, h6, .chapter-kicker, .inline-label, .video-label, .video-value, .video-value-small, .signed-by, .signed-date) {
  font-family: var(--editorial-cn);
  font-synthesis: none;
}

html body :where(p, li, blockquote, figcaption),
html body :where(p, li, blockquote, figcaption) :where(a, strong, em, span) {
  font-family: var(--reading-cn);
  font-weight: var(--reading-weight);
  font-synthesis: none;
}

html body .meta-main,
html body .meta-note,
html body .series,
html body button {
  font-family: var(--reading-cn);
  font-synthesis: none;
}

@media (max-width: 760px) {
  :root,
  html[data-reading-font="serif"] {
    --reading-cn: var(--editorial-cn);
    --reading-weight: 400;
  }

  html[data-reading-font="source-han"] {
    --reading-cn: var(--reading-kai-cn);
    --reading-weight: 300;
  }

  html[data-reading-font="sans"] {
    --reading-cn: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    --reading-weight: 400;
  }

  html[data-reading-font="original"] {
    --reading-cn: var(--reading-fangsong-cn);
    --reading-weight: 400;
  }

  html body,
  html body :where(a, button, span, strong, em, h1, h2, h3, h4, h5, h6) {
    font-family: var(--editorial-cn) !important;
    font-synthesis: none !important;
  }

  html body :where(p, li, blockquote, figcaption),
  html body :where(p, li, blockquote, figcaption) :where(a, strong, em, span) {
    font-family: var(--reading-cn) !important;
  }
}