/* The blog (pages written by scripts/blog.mjs), in the home page's reading room: paper.css gives the fonts and base,
   looks/sage-split.css the palette (day sage, night green-charcoal) and the Light · Dark toggle; this file only lays
   out the blog. Same geometry as the home page: a slim sticky rail at --ix with a hairline, the column starting at
   --text-x, the gutter between them holding what sage-split hangs there (heading numerals, and here the
   footnotes as sidenotes). A post widens and centres its column instead, and its rail fades while you read.
   Narrow screens: the rail becomes a top bar, notes go to the end. Classes are b-*. */

[data-page="blog"] {
  --gut: calc(var(--text-x) - var(--ix));     /* the gutter, from the rail's hairline to the text */
  --measure: 38rem;
  --sn-w: min(15rem, calc(var(--gut) - 72px));
}
.b-body { font: 400 17.5px/1.72 var(--sans); }
/* A post reads in a wider column, centred on the screen (never nearer the rail than 72px), so the rail can step back. */
[data-page="blog"]:has(.b-body--post) {
  --measure: 42rem;
  --gut: max(72px, calc((100vw - var(--measure)) / 2 - var(--ix)));
}
.b-body--post { font-size: 18px; }
.b-skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 6px 12px; background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; }
.b-skip:focus { top: 12px; }

/* =========================================================== the room: rail | column */
.b-room { position: relative; display: grid; grid-template-columns: var(--ix) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.b-room::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--ix); width: 1px; background: var(--rule); pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 160px, #000 calc(100% - 200px), transparent);
  mask: linear-gradient(transparent, #000 160px, #000 calc(100% - 200px), transparent);
}
.b-rail {
  grid-column: 1; grid-row: 1; align-self: start;
  position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 2;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px;
  padding: clamp(28px, 5vh, 52px) 14px clamp(24px, 4vh, 40px) var(--edge);
}
.b-mast { display: grid; justify-items: start; gap: 14px; }
/* the masthead, Tianpei’s Blog, in the face the home page sets his name in (paper.css --disp-name-*): back to the index */
.b-home {
  font: var(--disp-name-w) 25px/1.1 var(--disp-name-family); letter-spacing: var(--disp-name-ls);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.b-home::after { content: ""; display: block; width: 28px; height: 1px; margin: .38em 0 0 .05em; background: var(--accent); transition: width .3s ease-out; }
.b-home:hover { color: var(--ink); }
.b-home:hover::after { width: 44px; }
.b-section { font: 500 11px/1.4 var(--leon); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.b-section:hover { color: var(--accent-ink); }

/* the index: as the home page's (.ss-index), with the sage dash on the part you are reading */
.b-index { align-self: center; min-height: 0; overflow-y: auto; margin-left: calc(-1 * var(--edge)); padding-left: var(--edge); scrollbar-width: none; }
.b-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.b-index a {
  position: relative; display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline;
  padding: 4px 0; font-size: 13px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .2s;
}
.b-body--index .b-index a { grid-template-columns: 3.6em 1fr; }
.b-ix-n { font: 400 12px/1 var(--leon); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.b-index a:hover, .b-index a[aria-current] { color: var(--ink); }
.b-index a[aria-current] .b-ix-n { color: var(--accent-ink); }
.b-index a::before {
  content: ""; position: absolute; top: 50%; right: calc(100% + 8px); width: 0; height: 1px; background: var(--accent); transition: width .3s ease-out;
}
.b-index a[aria-current]::before { width: calc(var(--edge) - 14px); max-width: 24px; }
.b-toggle { margin: 0; align-self: end; }

.b-main { grid-column: 2; grid-row: 1; min-width: 0; padding: clamp(96px, 15vh, 160px) var(--edge) 0 var(--gut); }
.b-main > * { max-width: var(--measure); }

/* A post's rail is one quiet group at the top left (name, Home, then its sections), with no hairline beside it; only
   Light · Dark stays at the foot, as on the home page. */
@media (min-width: 1024px) {
  .b-body--post .b-room::before { display: none; }
  .b-body--post .b-index { align-self: start; margin-top: clamp(40px, 7vh, 80px); }
}

/* While you read a post (scrolled down past its title) the rail fades out; it comes back when you
   point at the rail, tab into it (keyboard focus only: a clicked toggle does not hold it), scroll back up, or return
   to the top. blog.js sets .is-reading. */
@media (min-width: 1024px) {
  .b-body--post .b-rail > * { transition: opacity .45s ease; }
  .b-body--post.is-reading .b-rail > * { opacity: 0; }
  .b-body--post.is-reading .b-rail:hover > *, .b-body--post.is-reading .b-rail:has(:focus-visible) > * { opacity: 1; }
}

/* =========================================================== a post */
.b-head { margin: 0 0 clamp(48px, 7vh, 72px); }
.b-title { margin: 0; font: 360 clamp(36px, 3.3vw, 48px)/1.08 var(--leon); letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.b-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 22px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.b-meta time { font: 400 13.5px/1.5 var(--leon); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.b-meta a { color: var(--ink-2); }
.b-dot { padding: 0 .6em; color: var(--rule); }
.b-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 14px; }
.b-tags span {
  padding: 0 8px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 2px;
  font: 500 11px/1.75 var(--sans); letter-spacing: .05em; color: var(--accent-ink);
}
/* the subheadline, right under the title: in the serif italic of the home page's epigraph */
.b-dek { margin: 16px 0 0; font: italic 400 clamp(21px, 1.8vw, 25px)/1.35 var(--serif); color: var(--ink-2); text-wrap: balance; }
.b-draft { margin: 0 0 18px; font: 500 11px/1.4 var(--leon); letter-spacing: .18em; text-transform: uppercase; color: #a3562a; }
.b-cover { margin: 0 0 clamp(48px, 7vh, 72px); }

/* the text. The prose is the containing block for the sidenotes, so nothing inside it may be positioned. */
.b-prose { position: relative; color: var(--ink-2); }
.b-prose > p, .b-prose li, .b-prose blockquote p { text-wrap: pretty; hanging-punctuation: first; }
.b-prose > p { margin: 0 0 1.15em; }
/* Athletics stops at Medium, so weight alone barely shows: bold text also gets a soft sage highlight */
.b-prose strong {
  font-weight: 500; color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent);
  padding: .05em .2em; margin: 0 -.2em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.b-prose del { color: var(--muted); }
.b-prose > h2, .b-prose > h3 { scroll-margin-top: 48px; color: var(--ink); text-wrap: balance; }
.b-prose > h2 { position: relative; margin: 2.6em 0 .7em; font: 450 25px/1.25 var(--leon); letter-spacing: -.012em; }
.b-prose > h3 { margin: 2em 0 .5em; font: 500 19px/1.3 var(--leon); letter-spacing: -.005em; }
.b-prose > :first-child { margin-top: 0; }
/* the heading's number, small and sage, hung just left of the text (the rail shows the same numbers) */
.b-n {
  position: absolute; right: calc(100% + 18px); top: .5em;
  font: 400 12.5px/1 var(--leon); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--accent-ink); text-decoration: none;
}
.b-n:hover { color: var(--ink); }
.b-prose code { padding: .08em .34em; border-radius: 2px; background: var(--wash); font: 400 .84em/1 var(--mono); color: var(--ink); }
.b-code {
  position: relative; margin: 1.8em 0; padding: 20px 22px; overflow-x: auto; tab-size: 2;
  background: var(--mat); box-shadow: 0 0 0 1px var(--mat-line);
  font: 400 13.5px/1.7 var(--mono); color: var(--ink);
}
.b-code code { padding: 0; background: none; font: inherit; }
.b-prose code { font-variant-ligatures: none; }
.b-code[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 7px; right: 10px;
  font: 500 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.b-prose blockquote { margin: 1.8em 0; padding: 2px 0 2px 24px; border-left: 1px solid var(--accent); }
.b-prose blockquote p { margin: 0 0 .7em; font: italic 400 18px/1.62 var(--serif); color: var(--ink-2); }
.b-prose blockquote p:last-child { margin-bottom: 0; }
.b-prose ul, .b-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.b-prose li { margin: .3em 0; padding-left: .25em; }
.b-prose li > ul, .b-prose li > ol { margin: .3em 0 0; }
.b-prose li::marker { color: var(--accent); }
.b-prose ol > li::marker { font: 400 .86em var(--leon); color: var(--accent-ink); }
.b-prose hr { width: 44px; height: 1px; margin: 3em 0; border: 0; background: var(--accent); }
.b-prose img, .b-prose video { max-width: 100%; height: auto; }

/* figures: matted, like the home page's opened teasers */
.b-fig { margin: 2.4em 0; }
.b-mat { padding: 14px; background: var(--mat); box-shadow: 0 0 0 1px var(--mat-line), 0 30px 46px -34px var(--mat-shadow); }
.b-mat img, .b-mat video { display: block; width: 100%; height: auto; background: var(--wash); box-shadow: 0 0 0 1px var(--mat-line); }
.b-fig figcaption { margin: 16px 0 0; font: 400 13px/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.b-raw { margin: 0 0 1.15em; }
.b-raw > .b-fig { margin: 2.4em 0; }

/* tables: open rows on hairlines, as the home page's */
.b-table { margin: 1.8em 0; overflow-x: auto; }
.b-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.b-table th {
  padding: 0 18px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap;
  font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.b-table td { padding: 13px 18px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.b-table th:last-child, .b-table td:last-child { padding-right: 0; }

/* math: KaTeX HTML written by scripts/blog.mjs; katex.min.css is linked only by posts with math and loads before this
   file. Its 1.21em is sized for a serif; beside Athletics 1.1em balances. Colour is inherited, so both themes work.
   Display math is a centred block that scrolls sideways inside itself when it is wider than the column; a soft shadow
   shows at an edge only while there is more to scroll that way (the --bg covers move with the content and hide it). */
.b-prose .katex { font-size: 1.1em; }
.b-prose .katex-display {
  margin: 1.5em 0; padding: .35em 0 .55em; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  background:
    linear-gradient(to right, var(--bg) 50%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 50%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right / 12px 100% no-repeat scroll;
}

/* footnotes: the number in the text;the note beside it (wide) or at the end (narrow) */
.b-fn { line-height: 0; }
.b-fn a { padding: 0 .12em; font: 500 .7em/1 var(--leon); color: var(--accent-ink); text-decoration: none; }
.b-fn a:hover { color: var(--ink); }
.b-sn { display: none; }
.b-notes { margin: 3.4em 0 0; padding: 26px 0 0; border-top: 1px solid var(--rule); }
.b-notes-h { margin: 0 0 14px; font: 500 12px/1.4 var(--leon); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.b-notes ol { margin: 0; padding-left: 1.6em; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.b-notes li { margin: 0 0 .6em; padding-left: .3em; scroll-margin-top: 48px; }
.b-notes li::marker { font: 400 .9em var(--leon); color: var(--accent-ink); }
.b-notes li:target { color: var(--ink-2); }
.b-back { margin-left: .2em; color: var(--accent-ink); text-decoration: none; }
/* Sidenotes need about 15rem + 44px of gutter beside the centred post column: from 1800px. Narrower, notes go to the end. */
@media (min-width: 1800px) {
  .b-sn {
    /* inline: an absolute box keeps the static position of its original display, so the note starts on its reference's line */
    display: inline; position: absolute; left: calc(-1 * (var(--sn-w) + 44px)); width: var(--sn-w);
    margin-top: .25em; font: 400 13px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; transition: color .3s;
  }
  .b-sn-n { margin-right: .55em; font: 500 12px/1 var(--leon); color: var(--accent-ink); }
  .b-sn.is-hot { color: var(--ink); }
  .b-notes { display: none; }
}

/* more writing */
.b-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(80px, 12vh, 120px); padding-top: 26px; border-top: 1px solid var(--rule); }
.b-pg { display: grid; align-content: start; gap: 6px; text-decoration: none; color: var(--ink); }
.b-pg--older { text-align: right; justify-items: end; }
.b-pg-k { font: 500 11px/1.4 var(--leon); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.b-pg-t { font: 450 19px/1.3 var(--leon); letter-spacing: -.008em; text-wrap: balance; }
.b-pg-d { font: 400 12.5px/1.4 var(--leon); letter-spacing: .02em; color: var(--muted); }
.b-pg:hover .b-pg-t { color: var(--accent-ink); }
.b-foot { margin: 56px 0 0; padding: 0 0 72px; font-size: 13.5px; color: var(--muted); }
.b-foot a { color: var(--ink-2); }

/* =========================================================== the index */
.b-head--index { margin-bottom: 0; }
/* one grid for the whole list: the date column is as wide as the longest date, so every title starts on the same line */
.b-list {
  list-style: none; margin: clamp(48px, 7vh, 72px) 0 0; padding: 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(32px, 3vw, 48px);
}
.b-item { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 22px 0 23px; border-bottom: 1px solid var(--rule); }
.b-item::before { content: ""; position: absolute; left: -34px; top: 35px; width: 0; height: 1px; background: var(--accent); transition: width .3s ease-out; }
.b-item:hover::before { width: 22px; }
.b-item-d { padding-top: 5px; font: 400 12.5px/1.4 var(--leon); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--accent-ink); white-space: nowrap; }
.b-item-t { margin: 0; font: 450 20px/1.3 var(--leon); letter-spacing: -.008em; color: var(--ink); text-wrap: balance; }
.b-item-t a { color: inherit; text-decoration: none; }
.b-item-t a:hover { color: var(--accent-ink); }
.b-item-s { margin: 7px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.b-draft-tag { margin-left: 8px; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #a3562a; vertical-align: 3px; }
.b-empty { margin-top: 64px; color: var(--muted); }

/* =========================================================== narrower */
/* A narrow rail (--ix down to 184px) fits the masthead at a smaller size. */
@media (min-width: 1024px) and (max-width: 1279px) { .b-home { font-size: 21px; } }
/* No rail below 1024: a top bar (Tianpei’s Blog, ← Home, Light · Dark), one column. */
@media (max-width: 1023px) {
  .b-room { display: block; }
  .b-room::before, .b-index { display: none; }
  .b-rail {
    position: static; height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    padding: 22px var(--edge); border-bottom: 1px solid var(--rule);
  }
  .b-mast { display: flex; align-items: baseline; gap: 18px; }
  .b-home { font-size: 22px; }
  .b-home::after { display: none; }
  .b-main { max-width: calc(var(--measure) + 2 * var(--edge)); margin: 0 auto; padding: 72px var(--edge) 0; }
  .b-n { position: static; display: block; margin: 0 0 10px; }
  .b-item::before { display: none; }
}
@media (max-width: 720px) {
  .b-body { font-size: 16.5px; line-height: 1.7; }
  .b-rail { padding: 18px var(--edge); }
  .b-home { font-size: 20px; }
  .b-mast { gap: 14px; }
  .b-main { padding-top: 52px; }
  .b-title { font-size: 34px; }
  .b-dek { font-size: 19.5px; }
  .b-tags { margin-left: 0; flex-basis: 100%; margin-top: 8px; }
  .b-prose > h2 { font-size: 22px; }
  .b-code { margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); padding: 16px var(--edge); font-size: 12.5px; }
  .b-prose .katex-display { margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); padding-left: var(--edge); padding-right: var(--edge); }
  .b-mat { padding: 8px; }
  .b-prose blockquote { padding-left: 18px; }
  .b-prose blockquote p { font-size: 17px; }
  .b-list { grid-template-columns: minmax(0, 1fr); }
  .b-item { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0 19px; }
  .b-item-d { padding: 0; }
  .b-item-t { font-size: 18.5px; }
  .b-pager { grid-template-columns: 1fr; gap: 28px; }
  .b-pg--older { text-align: left; justify-items: start; }
  .b-pg--none { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b-index a, .b-index a::before, .b-item::before, .b-home::after, .b-sn { transition: none; }
}