/* ============================================================
 * Ported from the "Modern scholarly" design handoff.
 * LaTeX-paper aesthetic: Computer Modern on cream paper, sepia
 * ink, airy spacing, sepia accent on numbers and the wordmark
 * dot. Sans-serif chrome for legibility at small sizes.
 *
 * Computer Modern is self-hosted under /fonts/ (woff format,
 * sourced from https://github.com/aaaakshat/cm-web-fonts). All
 * faces declare `font-display: swap` so text shows immediately
 * in the fallback stack and is upgraded once CM loads.
 * ============================================================ */

/* Computer Modern Serif — body text */
@font-face {
  font-family: "Computer Modern Serif";
  src: url("/fonts/cmunrm.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Serif";
  src: url("/fonts/cmunbx.woff") format("woff");
  font-weight: bold;   font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Serif";
  src: url("/fonts/cmunti.woff") format("woff");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Serif";
  src: url("/fonts/cmunbi.woff") format("woff");
  font-weight: bold;   font-style: italic; font-display: swap;
}

/* Computer Modern Sans — chrome (nav, eyebrows, stamps, meta, colophon) */
@font-face {
  font-family: "Computer Modern Sans";
  src: url("/fonts/cmunss.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Sans";
  src: url("/fonts/cmunsx.woff") format("woff");
  font-weight: bold;   font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Sans";
  src: url("/fonts/cmunsi.woff") format("woff");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Sans";
  src: url("/fonts/cmunso.woff") format("woff");
  font-weight: bold;   font-style: italic; font-display: swap;
}

/* Computer Modern Typewriter — code */
@font-face {
  font-family: "Computer Modern Typewriter";
  src: url("/fonts/cmuntt.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Typewriter";
  src: url("/fonts/cmuntb.woff") format("woff");
  font-weight: bold;   font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Typewriter";
  src: url("/fonts/cmunit.woff") format("woff");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Computer Modern Typewriter";
  src: url("/fonts/cmuntx.woff") format("woff");
  font-weight: bold;   font-style: italic; font-display: swap;
}

:root {
  /* Type stack */
  --cm-serif: "Computer Modern Serif", "Latin Modern Roman", "CMU Serif", Cambria, Georgia, serif;
  --cm-sans:  "Computer Modern Sans",  "Latin Modern Sans",  "CMU Sans Serif", "Helvetica Neue", sans-serif;
  --cm-mono:  "Computer Modern Typewriter", "Latin Modern Mono", "CMU Typewriter Text", ui-monospace, Menlo, monospace;

  /* Palette */
  --paper:        #faf3e0;  /* page background — cream */
  --paper-soft:   #f1e7c8;  /* code block background */
  --ink:          #2b2520;  /* primary body text — sepia ink */
  --ink-muted:    rgba(43, 37, 32, 0.78);
  --ink-soft:     rgba(43, 37, 32, 0.7);
  --ink-quiet:    rgba(43, 37, 32, 0.55);
  --ink-faint:    rgba(43, 37, 32, 0.35);
  --rule:         rgba(43, 37, 32, 0.15);
  --rule-soft:    rgba(43, 37, 32, 0.1);
  --accent:       #b8814a;  /* sepia accent — section §, wordmark dot */
  --accent-deep:  #6b3a1a;  /* link hover, stamp tag */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--cm-serif);
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
}

a         { color: inherit; text-decoration: none; transition: color 120ms ease; }
a:hover   { color: var(--accent-deep); }

.site {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 80px 88px;
}

@media (max-width: 720px) {
  .site { padding: 40px 24px 56px; }
}

/* — Masthead — */
.masthead       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; gap: 24px; flex-wrap: wrap; }
.blogname       { font-family: var(--cm-sans); font-weight: 600; font-size: 17px; letter-spacing: 0.02em; margin: 0; }
.blogname a     { color: inherit; }
.blogname .dot  { color: var(--accent); margin: 0 2px; }
.blogname i     { font-family: var(--cm-serif); font-style: italic; font-weight: normal; letter-spacing: 0; }
.topnav         { display: flex; gap: 28px; font-family: var(--cm-sans); font-size: 14px; flex-wrap: wrap; }
.topnav a       { color: rgba(43, 37, 32, 0.6); }
.topnav a.on    { color: var(--ink); }
.topnav a:hover { color: var(--accent-deep); }

/* — Page header (home, categories, about) — */
.page-header  { margin-bottom: 36px; }
.eyebrow      { font-family: var(--cm-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 14px; }
.eyebrow a    { color: inherit; }
.page-title   { font-size: 36px; line-height: 1.15; margin: 0 0 12px; font-weight: normal; }
.page-sub     { font-style: italic; color: var(--ink-soft); font-size: 16px; max-width: 520px; margin: 0; }

/* — Post list (home, category) — */
.post-list                   { list-style: none; padding: 0; margin: 0; }
.post-row                    { padding: 28px 0; border-bottom: 1px solid var(--rule-soft); }
.post-row:last-child         { border-bottom: none; }
.post-row .stamp             { font-family: var(--cm-sans); font-size: 12px; letter-spacing: 0.08em; color: rgba(43, 37, 32, 0.5); margin-bottom: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.post-row .stamp .tag        { color: var(--accent-deep); }
.post-row .stamp .tag:hover  { color: var(--accent); }
.post-row .title             { font-size: 22px; line-height: 1.25; margin: 0 0 8px; font-weight: normal; }
.post-row .abstract          { font-size: 15.5px; color: var(--ink-muted); margin: 0; max-width: 580px; }

/* — Category index — */
.category-list           { list-style: none; padding: 0; margin: 0; }
.category-list li        { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); display: flex; align-items: baseline; gap: 14px; }
.category-list li:last-child { border-bottom: none; }
.category-list .name     { font-size: 18px; }
.category-list .count    { font-family: var(--cm-sans); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* — Article body — */
h1.article-title  { font-size: 38px; line-height: 1.14; margin: 0 0 14px; font-weight: normal; max-width: 620px; }
.article-meta     { font-family: var(--cm-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-quiet); margin-bottom: 40px; display: flex; gap: 18px; flex-wrap: wrap; }
.article-meta a   { color: inherit; }
.article-meta a:hover { color: var(--accent-deep); }

.prose            { max-width: 620px; }
.prose h2,
.prose h2.section { font-size: 16px; font-family: var(--cm-sans); font-weight: 600; margin: 36px 0 14px; letter-spacing: 0.02em; }
.prose h2 .num    { color: var(--accent); margin-right: 10px; font-weight: normal; }
.prose p          { margin: 0 0 16px; }
.prose p.lede     { font-size: 18.5px; line-height: 1.55; color: rgba(43, 37, 32, 0.85); margin-bottom: 20px; }
.prose pre        { background: var(--paper-soft); padding: 16px 20px; font-family: var(--cm-mono); font-size: 13.5px; line-height: 1.55; overflow-x: auto; margin: 18px 0 22px; border-radius: 4px; }
.prose code       { font-family: var(--cm-mono); font-size: 0.92em; }
.prose pre code   { font-size: inherit; background: none; padding: 0; }
.prose blockquote { border-left: 2px solid var(--rule); margin: 16px 0; padding: 0 0 0 16px; color: var(--ink-muted); font-style: italic; }
.prose ul,
.prose ol         { margin: 0 0 16px; padding-left: 1.4em; }
.prose li         { margin-bottom: 6px; }
.prose img        { max-width: 100%; height: auto; }
.prose hr         { border: none; border-top: 1px solid var(--rule); margin: 32px 0; }

/* — About page portrait — */
.about-figure         { display: flex; gap: 28px; margin-bottom: 32px; align-items: flex-start; flex-wrap: wrap; }
.about-figure .frame  { width: 120px; height: 150px;
  background: repeating-linear-gradient(135deg, rgba(43,37,32,0.08), rgba(43,37,32,0.08) 4px, transparent 4px, transparent 9px);
  border: 1px solid rgba(43, 37, 32, 0.2); flex-shrink: 0; }
.about-figure .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-figure .intro  { flex: 1; min-width: 240px; }
.about-figure .intro > :first-child { margin-top: 0; }

/* — Pagination — */
.pagination       { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule-soft); font-family: var(--cm-sans); font-size: 13px; color: var(--ink-quiet); }
.pagination a     { color: var(--ink); }
.pagination a:hover { color: var(--accent-deep); }
.pagination .spacer { flex: 1; }
.pagination .status { letter-spacing: 0.04em; }

/* — Colophon (per-page footer) — */
.colophon         { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--cm-sans); font-size: 12px; color: rgba(43, 37, 32, 0.5); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.colophon a       { color: inherit; }
.colophon a:hover { color: var(--accent-deep); }