/* ===== Matthew Hong — blog =====
   Loaded only by /blog/ pages, on top of theme.css + styles.css.
   Two-font palette: EB Garamond for display, Palatino for reading.
   Mono (IBM Plex Mono) stays for dates, code, and eyebrows so the blog
   still reads as part of the same site.
   Palatino is a system font — real Palatino on macOS, Palatino Linotype
   on Windows, Georgia elsewhere. Accepted tradeoff: zero bytes. */

:root {
  --font-display: 'EB Garamond', Garamond, Georgia, serif;
  --font-read: Palatino, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Georgia, serif;

  --fs-read:      18px;    /* Palatino body — sized for long-form, not CV scanning */
  --leading-read: 1.66;
  --measure:      660px;   /* 612px text column inside the shared page padding */
}

/* Post pages narrow the entire wrap rather than just the article, so the
   back-link, body, and footer all align to the same left edge. The index
   stays at the site's 760px — it is a nav surface, not a reading one. */
.wrap--read { max-width: var(--measure); }

/* top bar: back-link left, theme toggle right */
.top--nav { justify-content: space-between; align-items: center; }
.back {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.back:hover { color: var(--accent); }

/* ---------- index (/blog/) ---------- */
.blog-list { display: flex; flex-direction: column; }
.blog-row {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px;
  padding: 9px 0; align-items: baseline;
}
.blog-row .d { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-muted); }
.blog-row .t {
  font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 500; line-height: 1.3;
  color: var(--text);
}
a.t:hover { color: var(--accent); }
.blog-empty { font-size: var(--fs-meta); color: var(--text-muted); }

/* ---------- post body ---------- */
.post {
  font-family: var(--font-read);
  font-size: var(--fs-read);
  line-height: var(--leading-read);
  color: var(--text);        /* long-form wants the darkest ink, not --text-body */
  margin-top: var(--space-xl);
}
.post h1, .post h2, .post h3 {
  font-family: var(--font-display);
  font-weight: 500;              /* lighter display — separates from Palatino's heavier stroke */
  color: var(--text);
}
.post h1 { font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.005em; margin-bottom: 5px; }
.post h2 { font-size: 1.42em; line-height: 1.25; margin: 1.85em 0 0.45em; }
.post h3 { font-size: 1.12em; margin: 1.5em 0 0.35em; }

.post .meta {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--text-muted); margin-bottom: var(--space-lg);
}

.post p { margin-bottom: 1.05em; text-align: justify; hyphens: auto; }
.post .essay-key-phrase { font-size: calc(1em + 1pt); }
.post ul, .post ol { margin: 0 0 1.05em 1.35em; }
.post li { margin-bottom: 0.4em; }
.post .practice-list li { margin-bottom: 0.8em; }
.post .citation, .post .reference-number { font-variant-numeric: lining-nums tabular-nums; }
.post .citation { white-space: nowrap; scroll-margin-top: var(--space-lg); }
.post .citation:hover, .post .reference-number:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.post .citation:target { background: var(--accent-light); }
.post blockquote {
  margin: 1.4em 0; padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  color: var(--text-muted); font-style: italic;
}
.post code {
  font-family: var(--font-mono); font-size: 0.82em;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.post pre {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-md);
  overflow-x: auto; margin: 1.3em 0;
}
.post pre code { background: none; border: 0; padding: 0; font-size: 0.84em; line-height: 1.6; }
.post hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.post figure { margin: 1.6em 0; }
.post img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.post figcaption {
  font-family: var(--font-mono); font-size: var(--fs-fine);
  color: var(--text-muted); text-align: center; margin-top: 8px;
}

/* Unframed pencil illustrations blend into the paper in either theme. */
.post .sketch { margin: 2em 0; scroll-margin-top: var(--space-lg); }
.post .sketch img {
  width: 100%; max-width: 560px; margin: 0 auto;
  border: 0; border-radius: 0; mix-blend-mode: multiply;
}
.post .sketch figcaption {
  font-family: var(--font-read); font-size: 0.85em; font-style: italic;
  margin-top: var(--space-sm);
}
[data-theme="dark"] .post .sketch img { filter: invert(1); mix-blend-mode: screen; }
.post .study-drawings {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg); max-width: 560px; margin: 0 auto;
}
.post .study-drawing { min-width: 0; margin: 0; }
.post .study-drawing-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 240px; padding-top: 60px;
}
.post .study-drawing-art > img { width: auto; height: auto; max-width: 100%; max-height: 180px; }
.post .study-drawing figcaption { font-size: 0.8em; line-height: 1.4; font-style: normal; }
/* Informal notes sit beside the drawings, clear of the participants' annotations. */
.post .study-note {
  position: absolute; top: 0; left: 6%;
  font-family: 'Reenie Beanie', 'Bradley Hand', 'Segoe Print', cursive;
  font-size: clamp(20px, 3.8vw, 23px); font-weight: 400; line-height: 0.9;
  color: #000; white-space: nowrap; transform: rotate(-6deg);
}
.post .note-lettering { display: block; letter-spacing: -0.01em; transform: skewX(-3deg); }
.post .note-fragment { display: inline-block; transform: translateY(0.8px) rotate(-6deg); }
.post .note-fragment:nth-of-type(even) { transform: translateY(-0.7px) rotate(8deg); }
.post .note-second-line { display: block; transform: translateX(4px) rotate(-4deg); }
[data-theme="dark"] .post .study-note { color: var(--text); }
.post .study-note svg {
  position: absolute; top: 100%; left: 50%; width: 34px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.post .study-drawing--mule .study-note { top: 70px; left: 10%; }
.post .study-drawing--fur .study-note { top: 25px; left: auto; right: 12%; transform: rotate(4deg); }
.post .study-drawing--fur .study-note svg { left: -30px; width: 64px; height: 50px; }
.post .study-drawing--feathers .study-drawing-art { container-type: inline-size; }
.post .study-drawing--feathers .study-note { top: 24px; left: -12px; transform: rotate(-7deg); }
.post .study-drawing--feathers .study-note svg {
  /* Clear both our label and the participant's handwritten notes. */
  top: calc(100% + 12px);
  left: calc(50% - 18px);
  width: clamp(12px, calc(38cqw - 52px), 50px); height: 44px;
}
.post .study-drawing--feathers .study-note path { vector-effect: non-scaling-stroke; }
.post .study-drawing--scales .study-note { top: 38px; left: auto; right: 3%; transform: rotate(3deg); }
.post .study-drawing--scales .study-note svg { left: -22px; width: 42px; height: 30px; transform: scaleX(-1); }
.post .study-drawing--scales .study-note path { vector-effect: non-scaling-stroke; }
/* Hide the printed panel letters in the blank margins, preserving the drawings. */
.post .study-drawing--fur .study-drawing-art > img { clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 6% 70%, 0 70%); }
.post .study-drawing--feathers .study-drawing-art > img { clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 10% 85%, 0 85%); }
.post .study-drawing--scales .study-drawing-art > img { clip-path: inset(0 0 0 3%); }

/* footnotes / endnotes */
.post .notes { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--border); font-size: 0.9em; }
.post .notes h2 { margin-top: 0; font-size: 1.3em; }
.post .notes ol { margin-left: 1.2em; }
.post .notes li { margin-bottom: 0.75em; scroll-margin-top: var(--space-lg); }
.post .notes li:target { background: var(--accent-light); }
.post .notes .bibliography { list-style: none; margin-left: 0; line-height: 1.5; }
.post .bibliography li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: 0.5em; }
.post .reference-number { text-align: right; align-self: start; }

@media (max-width: 600px) {
  .blog-row { grid-template-columns: 74px 1fr; gap: var(--space-sm); }
  .blog-row .t { font-size: 1.18rem; }
  .post h1 { font-size: 1.75rem; }
  .post p { text-align: start; hyphens: manual; }
}