/* ═══════════════════════════════════════════════════════════════════
   A biography. Set to be read.

   No theme. No concept. No accent gimmick. The life is the subject;
   the typography's only job is to get out of its way. This is a book,
   and a well-set book is the opposite of a template — the craft is in
   the reading, not in the decoration.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper: #fdfcf9;   /* barely-warm white — calm, almost no colour */
  --ink:   #23201b;   /* warm near-black, printer's ink */
  --soft:  #5f594f;   /* secondary — captions, the quiet notes */
  --faint: #908979;   /* meta */
  --rule:  #e6e0d4;   /* hairline */

  --serif: 'Literata', Georgia, 'Times New Roman', serif;

  /* three sizes, only three */
  --t-read:  1.25rem;    /* 20px — the reading size */
  --t-small: 0.875rem;   /* 14px — contents, captions, meta */
  --t-big:   clamp(2.5rem, 7vw, 4.25rem);  /* the cover name; chapter numerals */

  --measure: 34rem;      /* ~66 characters */
}

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

html {
  font-size: 16px;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "onum" 1, "kern" 1;   /* old-style figures */
}

body {
  font-family: var(--serif);
  font-size: var(--t-read);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
}

::selection { background: #e9e3d4; }

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 7rem) 1.5rem 8rem;
}

/* ── Cover ─────────────────────────────────────────────────────── */

.cover { margin-bottom: clamp(4rem, 12vw, 9rem); }
.cover h1 {
  font-family: var(--serif);
  font-size: var(--t-big);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.cover .sub {
  font-size: var(--t-read);
  font-style: italic;
  color: var(--soft);
  margin-top: 1.4rem;
  max-width: 28rem;
  line-height: 1.45;
}
.cover .meta {
  font-size: var(--t-small);
  color: var(--faint);
  margin-top: 2rem;
  letter-spacing: 0.01em;
}
.cover .also {
  font-size: var(--t-small);
  font-style: italic;
  margin-top: 0.9rem;
}
.cover .also a {
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.cover .also a:hover { color: var(--ink); border-color: var(--soft); }

/* ── Preface ───────────────────────────────────────────────────── */

.preface { margin-bottom: clamp(3.5rem, 10vw, 7rem); }
.preface p { margin-top: 1.1em; }
.preface p:first-child { margin-top: 0; }

/* ── Contents ──────────────────────────────────────────────────── */

.contents {
  margin-bottom: clamp(4rem, 12vw, 8rem);
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.contents h2 {
  font-size: var(--t-small);
  font-weight: 400;
  font-style: italic;
  color: var(--faint);
  margin-bottom: 1.4rem;
}
.contents ol { list-style: none; }
.contents li { margin: 0; }
.contents a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contents a:hover .c-title { text-decoration: underline; text-underline-offset: 3px; }
.contents .c-num {
  font-variant-numeric: oldstyle-nums;
  color: var(--faint);
  font-style: italic;
  width: 2.2rem;
  flex-shrink: 0;
}
.contents .c-title { flex: 1; }
.contents .c-years {
  font-size: var(--t-small);
  color: var(--faint);
  font-variant-numeric: oldstyle-nums;
  white-space: nowrap;
}

/* ── Chapters ──────────────────────────────────────────────────── */

.chapter { margin-top: clamp(4.5rem, 13vw, 9rem); scroll-margin-top: 2rem; }
.chapter:first-of-type { margin-top: 0; }

.chapter-head { margin-bottom: 2.2rem; }
.chapter-num {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--faint);
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.04em;
}
.chapter-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
  text-wrap: balance;
}

/* book-style continuous prose: first-line indent, no inter-para gap.
   A template never indents. A book always does. */
.chapter p {
  text-indent: 1.5em;
  text-wrap: pretty;
  hyphens: auto;
}
.chapter p:first-of-type,
.chapter p.flush { text-indent: 0; }

/* the opening line of each chapter, set apart */
.chapter p.lead-line { text-indent: 0; }
.chapter p.lead-line::first-line { font-variant-caps: small-caps; letter-spacing: 0.02em; }

/* a quiet editorial note — where memory and record were checked.
   No colour, no box. Just a smaller, set-apart aside. */
.onrecord {
  display: block;
  font-size: var(--t-small);
  color: var(--soft);
  font-style: italic;
  line-height: 1.5;
  margin: 1.6rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--rule);
  text-indent: 0;
  max-width: 30rem;
}
.onrecord .tag {
  font-style: normal;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-right: 0.5em;
}

/* a section break within a chapter */
.brk { text-align: center; color: var(--faint); margin: 2.4rem 0; text-indent: 0; }

em { font-style: italic; }
.chapter em, .preface em { color: var(--ink); }

/* a Thai / Chinese inline term keeps its own face gracefully */
.term { font-feature-settings: normal; }

/* ── Footer ────────────────────────────────────────────────────── */

footer {
  margin-top: clamp(5rem, 14vw, 9rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-variant-numeric: oldstyle-nums;
}
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.totop { display: block; margin-top: 3rem; font-size: var(--t-small); font-style: italic; color: var(--faint); text-decoration: none; text-indent: 0; }
.totop:hover { color: var(--soft); }

/* ── Mobile — same book, rescaled, still comfortable to read ────── */

@media (max-width: 640px) {
  :root { --t-read: 1.1875rem; }   /* 19px — still a real reading size */
  main { padding: 2.5rem 1.25rem 5rem; }
  .contents a { gap: 0.75rem; }
}