/* ==========================================================================
   Scriptum Mistiviae
   Monochrome typesetting: no accent color anywhere. Hierarchy is carried by
   size, weight, and space alone, the way a well-set book does it.
   ========================================================================== */

/* CJK companion faces, cascaded after the Latin stacks so Chinese and English
   share one weight and rhythm rather than reading as two different documents. */
@font-face {
  font-family: "sans-chinese";
  src: local("WenQuanYi Micro Hei"), local("PingFang SC"), local("Noto Sans SC"), local("Noto Sans CJK SC"), local("Source Han Sans CN"), local("Microsoft YaHei"), local("PingFang TC"), local("Noto Sans TC"), local("Noto Sans CJK TC"), local("Source Han Sans TW"), local("Microsoft JhengHei"), local("sans-serif");
  unicode-range: U+2000-FFFF
}

@font-face {
  font-family: "serif-chinese";
  src: local("Songti SC"), local("STSong"), local("Source Han Serif SC"), local("Source Han Serif CN"), local("Noto Serif CJK SC"), local("Noto Serif SC"), local("SimSun"), local("NSimSun"), local("MingLiU"), local("PMingLiU"), local("serif");
  unicode-range: U+2000-FFFF
}

:root {
  /* Palatino: a humanist face drawn from broad-nib calligraphy — the right
     register for a site whose name means "the writings of". */
  --face-text: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua",
    "URW Palladio L", "P052", Georgia, "Times New Roman", "SiteSerifBody", "Songti SC", "STSong", "SimSun", serif;
  --face-heading-text: "SiteSerifHeading", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua",
    "URW Palladio L", "P052", Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
  --face-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", sans-chinese, monospace;

  --ink: #17191d;
  --ink-soft: #4d525a;
  --ink-faint: #8c9199;
  --paper: #fcfcfd;
  --rule: #e2e4e8;
  --wash: #f2f3f5;
}

html {
  height: 100%;
}

body {
  font-family: var(--face-text);
  font-size: 1.15em;
  line-height: 1.78;
  color: var(--ink);
  background-color: var(--paper);
  max-width: 39rem;
  margin: 0 auto;
  padding: 2.2rem 1.5rem 3rem;
  min-height: 100%;
  overflow-wrap: break-word;
  text-autospace: normal;
}

/* --- Masthead ----------------------------------------------------------- */

/* On an index the title stands alone, so it needs its own room below; an
   article overrides this, because the date line follows it closely. */
body > h1:first-of-type {
  text-align: center;
  letter-spacing: 0.01em;
  font-size: 1.75em;
  font-weight: 500;
  text-indent: 0.14em; /* offset the trailing letter-space, keeps it optically centered */
  margin: 0 0 2.6rem;
}

/* The nav runs across the top, above the title block. */
p:has(> .masthead-nav) {
  text-align: center;
  margin: 0 0 2.4rem;
}

p:has(> .note),
p:has(> .pubdate) {
  text-align: center;
  margin: 0 0 2.2rem;
}

.masthead-nav,
.note,
.pubdate {
  color: var(--ink-faint);
  font-size: 0.8em;
  letter-spacing: 0.06em;
}

/* --- Article -------------------------------------------------------------
   A post carries a date line; the title is then a document title rather than
   the site's wordmark, so it drops the wide wordmark letterspacing. */

body:has(.pubdate) > h1:first-of-type {
  font-size: 1.75em;
  font-weight: 400;
  text-indent: 0;
  line-height: 1.4;
  margin-bottom: 0.7rem;
}

body:has(.pubdate) {
  padding-bottom: 2rem;
}

body:has(.pubdate) p {
  text-align: justify;
}

body:has(.pubdate) p:has(> .masthead-nav),
body:has(.pubdate) p:has(> .pubdate) {
  text-align: center;
}

.masthead-nav a {
  color: var(--ink-soft);
  padding: 0 0.15em;
}

/* --- Contents ------------------------------------------------------------
   Date sits in a fixed marginal column, title in its own column. A title that
   wraps to several lines stays aligned as one block against that margin,
   rather than trailing back under the date. */

ul:has(> li > .pdate) {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul:has(> li > .pdate) li {
  display: grid;
  grid-template-columns: 5.6em 1fr;
  align-items: baseline;
  margin: 0;
  padding: 0.38em 0;
}

.pdate {
  color: var(--ink-faint);
  font-size: 0.76em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

@media (max-width: 30rem) {
  ul:has(> li > .pdate) li {
    grid-template-columns: 1fr;
    padding: 0.5em 0;
  }
}

/* --- Homepage: short intro and a handful of destinations ---------------- */

#zhnav,
#ennav {
  text-align: center;
}

#zhnav ul,
#ennav ul {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}

#zhnav li,
#ennav li {
  margin: 0;
  padding: 0.42em 0;
}

/* --- Back-of-book index (friend links) ---------------------------------- */

#lnks {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.25rem;
}

#lnks li {
  margin: 0;
  padding: 0.24em 0;
  break-inside: avoid;
  font-size: 0.94em;
}

@media (max-width: 34rem) {
  #lnks {
    columns: 1;
  }
}

/* --- Body text ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--face-heading-text);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

/* The two levels are separated by size above all: serif CJK faces often ship a
   single weight, so a weight change alone would not read in Chinese. */
h2 {
  margin-top: 3.4rem;
  margin-bottom: 0.85rem;
  font-size: 1.35em;
  letter-spacing: 0.01em;
  color: var(--ink);
}

h3 {
  margin-top: 2.3rem;
  margin-bottom: 0.5rem;
  font-size: 1.05em;
  letter-spacing: 0.03em;
  color: var(--ink);
}

h4,
h5,
h6 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1em;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

p {
  margin: 1.15rem 0;
}

li {
  margin: 0.4rem 0;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

a:visited {
  color: var(--ink);
}

a:hover {
  border-bottom-color: var(--ink);
}

a:focus-visible {
  outline: 2px solid var(--ink-soft);
  outline-offset: 3px;
}

.masthead-nav a,
#lnks a {
  border-bottom: none;
}

.masthead-nav a:hover,
#lnks a:hover {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

*:target {
  background: var(--wash);
}

/* Quotations sit indented from the measure, the way block quotes are set in a
   book — the rule marks the margin rather than boxing the text. */
blockquote {
  font-style: normal;
  margin: 1.6rem 0;
  border-left: 2px solid var(--rule);
  padding: 0.1rem 0 0.1rem 1.3em;
  color: var(--ink-soft);
  font-size: 0.96em;
}

blockquote > p:first-child {
  margin-top: 0;
}

blockquote > p:last-child {
  margin-bottom: 0;
}

/* --- Colophon rule: short and centered, not a full-width divider -------- */

hr {
  border: none;
  height: 1px;
  width: 2.5rem;
  background: var(--rule);
  margin: 3.5rem auto 1.5rem;
}

#email {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8em;
  letter-spacing: 0.05em;
  margin: 0;
}

/* --- Code, tables, figures ---------------------------------------------- */

pre {
  background-color: var(--wash);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.9em 1.05em;
  margin: 1.5rem 0;
  font-family: var(--face-mono);
  font-size: 0.8em;
  line-height: 1.62;
  overflow-x: auto;
  /* Code is never justified, whatever the surrounding prose does. */
  text-align: left;
  tab-size: 4;
}

pre > code {
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

code {
  font-family: var(--face-mono);
}

code:not(pre > code) {
  background-color: var(--wash);
  color: var(--ink);
  border-radius: 2px;
  padding: 0.12em 0.34em;
  font-size: 0.85em;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
  margin: 1.5rem 0;
}

th,
td {
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.7rem;
  text-align: left;
}

thead th {
  border-bottom: 1.5px solid var(--ink-faint);
  font-weight: 600;
}

img {
  max-width: 100%;
  display: block;
  margin: 1.5rem auto;
}

/* A photograph set to the full measure crowds the text; hold it in from the
   margins, at every width. */
body:has(.pubdate) img {
  max-width: 75%;
}

figcaption {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85em;
}

.tag {
  white-space: nowrap;
}

/* Legacy hooks retained for pages that still use them. */
.back {
  background-color: transparent;
  padding: 0;
  font-family: var(--face-text);
  color: var(--ink-faint);
  font-size: 0.9em;
}

.back a {
  color: var(--ink-faint);
  border-bottom: none;
}

.w {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.toc {
  border: 1px solid var(--rule);
  padding: 1rem;
}

code.has-jax {
  -webkit-font-smoothing: antialiased;
  background: inherit !important;
  border: none !important;
  font-size: 100%;
}