/* ==========================================================================
   jasonclau.com — one stylesheet for the whole site.
   Design intent: restrained, typographic, fast. No JavaScript.

   Typeface: Georgia (system font — nothing to download, nothing to host).
   Ships natively on macOS, Windows, and iOS; Android/Linux visitors fall
   back to their system serif (typically Noto Serif), which is acceptable.
   Chinese characters render in each system's native serif CJK face.
   Georgia has exactly two weights, regular (400) and bold (700); every
   font-weight in this file uses one of those two, deliberately.
   The /fonts/ directory and any @font-face blocks are intentionally gone.
   ========================================================================== */

:root {
  --paper: #fdfcf8;
  --ink: #21201d;
  --muted: #6e675e;
  --line: #e4dfd6;
  --accent: #8c3b2e;         /* madder red — links only */
  --accent-hover: #6d2c22;
  --measure: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171614;
    --ink: #e8e4dc;
    --muted: #a09888;
    --line: #33302b;
    --accent: #d08a77;
    --accent-hover: #e0a695;
  }
}

* { box-sizing: border-box; }

html {
  font-size: 106.25%; /* 17px base — sized for Georgia's large x-height */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Times New Roman",
    "Songti SC", "Noto Serif CJK SC", SimSun, serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* ---- links ---- */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  padding: 0.5rem 1rem;
}
.skip:focus { left: 0; z-index: 10; }

/* ---- header & nav ---- */
.site-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--accent); }

/* On the home page the h1 carries the name; remove the wordmark from the
   layout entirely (not just visually) so the nav sits flush right. */
body.home .wordmark { display: none; }
body.home .site-header { justify-content: flex-end; }

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-size: 0.92rem;
}
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-header nav a:hover { color: var(--accent); }
.site-header nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* ---- main ---- */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  width: 100%;
  flex: 1;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2.5rem 0 0.5rem;
}

h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 1.75rem 0 0.25rem;
}

p { margin: 0 0 1.1rem; }

ul { padding-left: 1.2rem; }
li { margin-bottom: 0.5rem; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

.muted { color: var(--muted); }

.smallcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

/* ---- home ---- */
.role {
  color: var(--muted);
  margin-bottom: 2.25rem;
  font-size: 0.98rem;
}

.rule {
  width: 34px;
  height: 3px;
  background: var(--accent);
  border: 0;
  margin: 0 0 1.25rem;
}

/* Regular weight on purpose: at this size Georgia bold would shout;
   the size and position carry the emphasis. */
.thesis {
  font-size: 1.55rem;
  line-height: 1.4;
  font-weight: 400;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.home-links {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
.home-links li { margin-bottom: 0.4rem; }

/* ---- entry lists (writing index) ---- */
.entry { margin-bottom: 1.75rem; }
.entry .when {
  color: var(--muted);
  font-size: 0.88rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}
.entry p { margin: 0.15rem 0 0; }

/* ---- essay ---- */
article.essay { max-width: 38rem; }

article.essay .dek {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  margin: 0.25rem 0 0.75rem;
}

article.essay .meta {
  font-size: 0.88rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

article.essay p { margin-bottom: 1.35rem; }

/* Section headings: centered small caps (Georgia has no true small caps;
   the browser synthesizes them from capitals — acceptable at this size).
   Space above deliberately exceeds space below, so each heading binds to
   the text it introduces. */
article.essay h2 {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: 1.05rem;
  text-align: center;
  margin: 3rem 0 1.75rem;
}

article.essay .kicker { font-weight: 400; }

/* The single remaining section mark, before the closing paragraph. */
.sep {
  text-align: center;
  color: var(--muted);
  letter-spacing: 0.5em;
  margin: 2.75rem 0 2.75rem 0.5em;
  font-size: 0.95rem;
}

.cite-block {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.cite-block .essay-ref {
  font-size: 0.82rem;
  color: var(--muted);
}
.cite-block details { margin-top: 0.75rem; }
.cite-block summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}
.cite-block pre {
  font-size: 0.72rem;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  color: var(--muted);
}

/* ---- footer ---- */
.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.25rem;
  width: 100%;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ---- small screens ---- */
@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  .thesis { font-size: 1.3rem; }
  .site-header { padding-top: 1.5rem; }
}