/* blog.css — /blog/ and /blog/<slug>/.
 *
 * Loaded AFTER styles.css, which supplies the tokens, the body face, the reset
 * and the footer. Nothing here introduces a colour, a radius or a type size
 * that is not already in the profile page's ramp:
 *
 *   d3  the hub heading and a post title   32 -> 46 px   Sung 600
 *   d4  a heading inside a post            26 -> 34 px   Sung 600
 *   b1  the prose                          19 px         Hei 400
 *   b2  the hub's one-line excerpt         17 px         Hei 400
 *   l1  the date, the language tag         13 px         Hei 400, tracked
 *
 * The page is one column and nothing sits outside it: no sidebar, no related
 * posts, no share row, no newsletter block, no tag cloud. The only chrome on a
 * post is the line back to the hub and, where one exists, the line to the
 * paired-language twin.
 */

/* ===================================================== the reading column
   704 px with the page's 32 px gutters is 640 px of text: about 34 Chinese
   characters, or 70 Latin ones, at the 19 px body size — the same measure the
   profile page reads at, held over a page that is nothing but text. */
.col {
  max-width: 704px;
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-block: clamp(44px, 7vw, 84px) clamp(56px, 8vw, 96px);
}

.crumb {
  margin: 0 0 clamp(28px, 5vw, 44px);
  font-size: var(--t-l1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--hot); text-decoration: underline; text-underline-offset: 4px; }

/* ==================================================================== hub */
.hub__top { margin-bottom: clamp(30px, 5vw, 48px); }

.hub__h {
  margin: 0 0 10px;
  font-family: var(--sung);
  font-weight: 600;
  font-size: var(--t-d3);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.hub__h-en {
  font-family: var(--hei);
  font-size: var(--t-b2);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-left: .5em;
  vertical-align: .3em;
}
.hub__lede { margin: 0; font-size: var(--t-b2); color: var(--mute); }

.hub { list-style: none; margin: 0; padding: 0; }
.hub__i {
  padding-block: clamp(22px, 3.4vw, 30px);
  border-top: 1px solid var(--line);
}
.hub__i:last-child { border-bottom: 1px solid var(--line); }

.hub__t {
  margin: 0 0 8px;
  font-family: var(--sung);
  font-weight: 600;
  font-size: clamp(21px, 1.5vw, 25px);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.hub__t a {
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color .18s var(--ease);
}
.hub__t a:hover { color: var(--hot); text-decoration: underline; }

.hub__m {
  margin: 0 0 8px;
  font-size: var(--t-l1);
  letter-spacing: .06em;
  color: var(--mute);
}
/* The language tag is a fact about the post, not a filter — it is set beside
   the date, in the same quiet type, with one separator. */
.hub__tag::before { content: "·"; margin-inline: .6em; }

.hub__x { margin: 0; font-size: var(--t-b2); line-height: 1.65; color: var(--mute); }

/* =================================================================== post */
.post__h {
  margin: 0 0 12px;
  font-family: var(--sung);
  font-weight: 600;
  font-size: var(--t-d3);
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.post__m {
  margin: 0 0 clamp(30px, 5vw, 46px);
  font-size: var(--t-l1);
  letter-spacing: .06em;
  color: var(--mute);
}

.post__nav {
  margin-top: clamp(44px, 6vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: var(--t-b3);
  letter-spacing: .03em;
}
.post__nav a {
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .18s var(--ease);
}
.post__nav a:hover { color: var(--hot); text-decoration: underline; text-underline-offset: 4px; }

/* ================================================================== prose
   Sam's own writing, rendered from the markdown unchanged. Every rule here is
   about reading it: one measure, one rhythm, hairlines instead of boxes. */
.prose { font-size: var(--t-b1); line-height: 1.78; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p { margin: 0 0 1.35em; }

.prose h2 {
  margin: 2.1em 0 .6em;
  font-family: var(--sung);
  font-weight: 600;
  font-size: var(--t-d4);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.prose h3 {
  margin: 1.9em 0 .5em;
  font-family: var(--sung);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.4;
}
.prose h4 {
  margin: 1.7em 0 .4em;
  font-size: var(--t-b1);
  font-weight: 600;
  letter-spacing: .01em;
}

.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.prose a:hover { color: var(--hot); text-decoration-color: var(--hot); }

.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li > ul, .prose li > ol { margin: .45em 0 0; }

.prose blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 2px solid var(--line);
  color: var(--mute);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* A picture inside a post breaks the column's gutters and nothing else. It is
   never cropped by CSS: the file ships at the ratio it was made at. */
.prose img {
  width: 100%;
  height: auto;
  margin: 1.8em 0;
  background: var(--plate);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--plate);
  padding: .12em .34em;
}
.prose pre {
  margin: 1.6em 0;
  padding: 18px 20px;
  background: var(--plate);
  overflow-x: auto;
  font-size: var(--t-b3);
  line-height: 1.6;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: var(--t-b2);
}
.prose th, .prose td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { font-weight: 600; letter-spacing: .02em; }

@media (max-width: 860px) {
  .prose { line-height: 1.75; }
  .prose pre { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
}