/*
 * The Writing index and every essay: the page frame, the page header
 * (eyebrow, h1, lede, byline), the listing, the essay column and the
 * editorial data colors.
 *
 * Load order: /vendor/modern-normalize.css → /theme.css → /site.css →
 * /blog/blog.css → the essay's own stylesheet. The shared header, footer,
 * skip link, focus ring, eyebrow, section label, callout and tables come from
 * site.css. Page CSS is unlayered and outranks site.css whatever the
 * specificity, so every element rule here is scoped under .blog or .essay,
 * where it cannot reach the shared chrome. The one exception is the print
 * reset on body, which only drops the paper ground.
 */

/*
 * Editorial data colors (theme proposal §2), measured against paper
 * --surface. They live with the essays, never in theme.css, and chrome never
 * borrows one. Series 1 and 2 differ by only 1.17:1 in luminance, so series 2
 * is always drawn dashed 7 4 and the reference line dashed 3 4; series 3 and 4
 * need a marker shape. The blog is paper only, so print uses this set too;
 * the night set (#ec8a67, #62b995, #7e9be9, #deb870, reference #838078) waits
 * for a dark chart.
 */
:root {
  --data-1: #b83e22; /* solid; the same hex as --accent-text, on purpose */
  --data-2: #326758; /* dashed 7 4 */
  --data-3: #346aac; /* marker shape required */
  --data-4: #a47726; /* marker shape required */
  --data-ref: #85867a; /* dashed 3 4 */
  --data-grid: #deded5;
}

.blog {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
  padding-block: var(--section);
}

/* Page header. The eyebrow is typed in sentence case; site.css uppercases it. */
.blog-header h1 {
  margin: var(--space-4) 0 var(--space-5);
  font-weight: var(--weight-bold);
}

.blog-header h1 em {
  color: var(--accent-text);
  font-style: normal;
}

.blog-header .section-label {
  margin-left: var(--space-4);
}

.blog-header .lede {
  max-width: var(--prose);
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-lg);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--text-xs);
}

/* The index: one entry per essay, newest first, between --line rules. */
.writing-list {
  max-width: var(--prose);
  margin: var(--space-7) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.writing-list li {
  border-top: 1px solid var(--line);
}

.writing-entry {
  display: block;
  padding-block: var(--space-6);
  text-decoration: none;
}

.writing-entry time {
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.writing-entry h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-weight: var(--weight-bold);
  text-underline-offset: 0.18em;
}

.writing-entry:hover h2 {
  text-decoration: underline 2px var(--accent);
}

.writing-entry p {
  margin: 0;
  color: var(--ink-2);
}

/* The essay column: prose size, 68ch, 1.7 (1.8 under :lang(zh)). */
.essay {
  max-width: var(--prose);
  margin-inline: auto;
  font-size: var(--text-prose);
  line-height: var(--leading-prose);
}

.essay .blog-header {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.essay p {
  margin: var(--space-4) 0;
}

.essay section {
  margin-top: var(--space-7);
}

.essay h2 {
  margin: 0 0 var(--space-4);
}

/* Section numbers: "01" ahead of each h2. */
.essay h2 > span {
  margin-right: var(--space-4);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: middle;
}

.essay h3 {
  margin: var(--space-2) 0;
}

/* The one thesis line per essay carries the 3px vermilion rule. */
.thesis {
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.ref {
  margin-left: var(--space-1);
  color: var(--accent-text);
  font-size: var(--text-xs);
  line-height: 1;
  text-decoration: none;
  vertical-align: super;
}

.ref:hover {
  text-decoration-line: underline;
}

.note,
.essay figcaption {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* Numbered sources close every essay. */
.sources {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
}

.sources h2 {
  font-size: var(--text-base);
  letter-spacing: 0;
}

.sources ol {
  padding-left: var(--space-5);
}

.sources li {
  padding-block: var(--space-1);
  scroll-margin-top: var(--space-5);
}

.sources li span {
  display: block;
}

.sources details {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.sources summary {
  cursor: pointer;
}

.sources .sign-off {
  margin-top: var(--space-6);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

@media (max-width: 620px) {
  .thesis {
    font-size: var(--text-lg);
  }
}

@media print {
  .skip-link,
  .site-header,
  .site-footer {
    display: none;
  }

  body {
    background: none;
  }

  .blog {
    width: auto;
    padding-block: 0;
  }

  .essay {
    max-width: none;
    font-size: 11pt;
  }

  .essay .blog-header h1 {
    font-size: 32pt;
  }

  .essay section {
    margin-top: var(--space-5);
  }

  .essay a {
    color: inherit;
  }
}