/* ============================================================
   Black and white. No colour anywhere, deliberately — the only
   emphasis available is weight, size, rule and space, which is
   the constraint that keeps a research page honest.

   Dark mode inverts the two values and nothing else.
   ============================================================ */

:root{
  --ink:#111;
  --ink-2:#555;
  --ink-3:#888;
  --paper:#fff;
  --rule:#e0e0e0;
  --rule-2:#c8c8c8;
  --mark:#f0f0f0;

  /* --measure is the PROSE width. Measured, it renders 56-57 characters a
     line, and because every type size in this file is in rem that number
     holds from 900px to 2560px — the root grows at large viewports, the
     column grows with it, and the line length does not move. Spare
     viewport goes into type size, never into longer lines. */
  --measure:44rem;

  /* The index is a board plus a list, so it needs its own width: the
     list capped at its own measure, with the board sitting outside it
     rather than eating into it. */
  --shell:56rem;
  --board-w:12rem;
  --board-gap:3.25rem;
  --list-measure:36rem;

  /* The drawing width every figure's viewBox is authored at: the measure
     (44rem = 704px) minus the wrap's 24px of padding each side. Changing
     --measure without redrawing the figures to match will rescale them and
     shrink their labels with them, so the two values move together. */
  --fig-w:656px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8e8e8;
    --ink-2:#a8a8a8;
    --ink-3:#7a7a7a;
    --paper:#0c0c0c;
    --rule:#262626;
    --rule-2:#3a3a3a;
    --mark:#1c1c1c;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
              "Apple SD Gothic Neo","Noto Serif KR",serif;
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-variant-numeric:tabular-nums;
}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 24px}
.wrap.wide{max-width:var(--shell)}

/* ── masthead ─────────────────────────────────────────── */

header.site{padding:56px 0 0}
.site-name{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.8125rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
  text-decoration:none; display:inline-block;
}

/* On the front page the wordmark is the wordmark; everywhere else the same
   element is a back-link and has to stay out of the way. Tracking loosens
   as size drops, so it tightens here to keep the letterfit even. */
.site-name.home{
  font-size:1.75rem; letter-spacing:.10em; line-height:1.1;
}
/* Below 1280px there is no left panel, so a post's only route to the
   author page would be a link inside a hidden rail. This carries it in
   the header instead, and steps aside where the rail takes over. */
.hdr-about{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; margin-left:18px;
}
.hdr-about:hover{color:var(--ink)}
@media (min-width:1280px){ .hdr-about{display:none} }

/* The positioning line. Sits directly under the wordmark and reads as
   part of it, which is why it repeats the wordmark's tracking rather
   than the body's. */
.site-tag{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-top:7px;
}

.site-sub{
  font-size:0.9375rem; color:var(--ink-2); margin-top:14px; max-width:34rem;
}
.site-sub + .site-sub{margin-top:11px}
.site-sub strong{color:var(--ink); font-weight:600}

/* the bifurcation strip — see blog/index.html for what it is and why */
.ca{
  display:block; width:100%; height:112px; margin:34px 0 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.ca-note{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3); margin-top:8px; line-height:1.6;
}

/* ── two-column shell ─────────────────────────────────────
   Left: a category board that grows as subjects are added.
   Right: the posts. One column on a phone, board first.
   ------------------------------------------------------- */

/* One column by default, two only once there is room for the board AND a
   full-measure list beside it. The board used to sit inside the prose
   measure, which left the list at 49 characters on every desktop and then
   snapped it to 79 at the phone breakpoint. */
.shell{display:grid; gap:34px; align-items:start; margin:40px 0 0}

@media (min-width:900px){
  .shell{
    grid-template-columns:var(--board-w) minmax(0,1fr);
    gap:var(--board-gap);
  }
  .board{position:sticky; top:36px}
}
.board-lbl{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.6875rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  padding-bottom:8px; border-bottom:1px solid var(--rule); display:block;
}
.board ul{list-style:none; margin:0; padding:0}
/* a second group in the board gets air above its label, so the two read
   as sections rather than as one list with a stray heading in it */
.board ul + .board-lbl{margin-top:30px}
.board li{margin:0; border-bottom:1px solid var(--rule)}
.board a{
  display:block; padding:11px 0; text-decoration:none;
  font-size:0.9375rem; line-height:1.4; color:var(--ink);
}
.board a:hover{text-decoration:underline; text-underline-offset:3px}
.board .n{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3); margin-left:6px;
}

/* ── a category, and what it is about ─────────────────────
   The board is a set of links; this is where the reader lands when they
   follow one. Without it the five posts arrive with no statement of what
   they have in common, and the through-line has to be inferred.
   ------------------------------------------------------- */

.cat{max-width:var(--list-measure)}
.cat-title{
  font-size:1.25rem; font-weight:600; line-height:1.3; margin:0 0 8px;
}
.cat-desc{
  font-size:1rem; color:var(--ink-2); margin:0 0 4px;
  padding-bottom:22px; border-bottom:1px solid var(--rule-2);
}

/* ── index post list ──────────────────────────────────── */

.list{margin:0; list-style:none; max-width:var(--list-measure)}
.list li{
  padding:26px 0; border-top:1px solid var(--rule);
}
/* the category description already closes with a rule, at every width */
.list li:first-child{border-top:none}
.list li:last-child{border-bottom:1px solid var(--rule)}
.entry-date{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3); letter-spacing:.06em;
}
.entry-title{
  display:block; margin:6px 0 8px;
  font-size:1.3125rem; line-height:1.35; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.entry-title:hover{text-decoration:underline; text-underline-offset:3px}
.entry-sub{color:var(--ink-2); font-size:1rem}
.entry-tags{
  margin-top:10px;
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3);
}

/* ── post ─────────────────────────────────────────────── */

article{margin:44px 0 0}
.post-date{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3); letter-spacing:.06em;
}
h1{
  font-size:1.9375rem; line-height:1.24; font-weight:600;
  letter-spacing:-.01em; margin:10px 0 14px; text-wrap:balance;
}
.standfirst{
  font-size:1.125rem; color:var(--ink-2); line-height:1.65;
  padding-bottom:26px; border-bottom:1px solid var(--rule);
}

h2{
  font-size:1.25rem; font-weight:600; line-height:1.35;
  margin:42px 0 12px; text-wrap:balance;
}
h3{
  font-size:1.0625rem; font-weight:600; margin:28px 0 8px;
}
p{margin:0 0 18px}
p.lede{font-size:1.125rem}

a{color:var(--ink); text-underline-offset:2px}

strong{font-weight:600}
em{font-style:italic}

ul,ol{margin:0 0 18px 1.3em}
li{margin:0 0 8px}

blockquote{
  margin:22px 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--rule-2); color:var(--ink-2);
}
blockquote p:last-child{margin-bottom:0}

code{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.87em; background:var(--mark); padding:1px 5px; border-radius:3px;
}
pre{
  background:var(--mark); border:1px solid var(--rule);
  padding:14px 16px; margin:22px 0; overflow-x:auto; border-radius:4px;
}
pre code{background:none; padding:0; font-size:0.8125rem; line-height:1.62}

table{
  width:100%; border-collapse:collapse; margin:24px 0; font-size:0.9375rem;
  display:block; overflow-x:auto;
}
th,td{
  text-align:left; padding:9px 14px 9px 0;
  border-bottom:1px solid var(--rule); vertical-align:top;
}
th{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3);
}
td.num{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

hr{border:none; border-top:1px solid var(--rule); margin:38px 0}

/* ── figures ──────────────────────────────────────────────
   Diagrams are inline SVG drawn in `currentColor`, so they take the ink
   value and invert with the theme without a second asset.

   They are drawn at --fig-w so the viewBox scale is 1 and a user unit is
   a CSS pixel. That is what makes the `font-size` attributes inside the
   SVG mean what they say. Below that width the figure SCROLLS rather than
   scaling: scaling the viewBox shrinks every label with it, which is how
   an earlier version of this shipped 14px labels that rendered at four
   and a half pixels on a phone.
   ------------------------------------------------------- */

figure{margin:30px 0}
.fig-scroll{overflow-x:auto; overflow-y:hidden}
/* Fixed at the authored width and centred, never stretched. Growing the
   figure with the root would scale its labels past the body text; letting
   it shrink is the 4.4px bug. So on a scaled-up display the figure simply
   sits a little narrower than the prose, centred, which reads as chosen. */
figure svg{
  display:block; width:var(--fig-w); height:auto;
  margin-inline:auto; color:var(--ink);
}
figcaption{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3); line-height:1.6; margin-top:10px;
}

/* a claim the reader can check, set apart from the prose around it */
.measured{
  border:1px solid var(--rule-2); padding:16px 18px; margin:24px 0;
  border-radius:4px;
}
.measured .lbl{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:8px;
}
.measured p:last-child{margin-bottom:0}

/* the thing I got wrong, or the thing this does not cover */
.caveat{
  border-left:2px solid var(--ink); padding:2px 0 2px 18px; margin:24px 0;
}
.caveat .lbl{
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); font-weight:600; display:block; margin-bottom:6px;
}
.caveat p:last-child{margin-bottom:0}

.footnotes{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:0.9375rem; color:var(--ink-2);
}
.footnotes ol{margin-left:1.2em}

.post-nav{
  margin:52px 0 0; padding-top:22px; border-top:1px solid var(--rule);
  font-size:0.9375rem;
}

/* ── footer ───────────────────────────────────────────── */

footer.site{
  margin:64px 0 0; padding:22px 0 56px; border-top:1px solid var(--rule);
  font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.75rem; color:var(--ink-3); line-height:2;
}
footer.site a{color:var(--ink-2)}

/* ── contents rail ────────────────────────────────────────
   Hidden until there is genuinely empty margin to put it in, and then
   fixed beside the column rather than inside it, so the prose keeps the
   exact width and position it has at every other size — no reflow, and
   the figures do not move.

   The breakpoint is where the arithmetic stops fitting: the rail needs
   half the viewport to exceed half the measure plus the rail, its gap
   and a margin. Below 1280 that puts its left edge off-screen.
   ------------------------------------------------------- */

.rail{display:none}

@media (min-width:1280px){
  /* A column, so that only the contents list scrolls. With the whole rail
     scrolling, the author group fell off the bottom on any post with a
     long table of contents — visible on a tall window, gone on a short
     one, which is the worst of both. */
  .rail{
    display:flex; flex-direction:column; position:fixed; top:118px;
    left:calc(50% - (var(--measure) / 2) - 15rem);
    width:13rem; max-height:76vh;
  }
  .rail > .rail-list:not(.rail-foot){overflow-y:auto; min-height:2.5rem}
  .rail > .rail-lbl,
  .rail > .rail-foot{flex:none}
  .rail-lbl{
    font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
    font-size:0.6875rem; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-3);
    display:block; padding-bottom:8px; border-bottom:1px solid var(--rule);
  }
  .rail-lbl-2{margin-top:26px}
  .rail-list{margin:0; padding:0; list-style:none; counter-reset:rail}
  .rail-list li{margin:0; counter-increment:rail}
  .rail-list a{
    display:block; padding:7px 0 7px 22px; position:relative;
    font-size:0.875rem; line-height:1.35;
    color:var(--ink-3); text-decoration:none;
  }
  .rail-list a::before{
    content:counter(rail); position:absolute; left:0; top:7px;
    font-family:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
    font-size:0.6875rem; color:var(--ink-3);
  }
  .rail-list a:hover{color:var(--ink)}
  .rail-list a[aria-current]{color:var(--ink); font-weight:600}

  /* The author group is not part of the numbered contents. These have the
     same specificity as the .rail-list rules above, so they have to come
     after them — placed before, the number came back. */
  .rail-foot li{counter-increment:none}
  .rail-foot a{padding-left:0}
  .rail-foot a::before{content:none}
}

/* ── large screens ────────────────────────────────────────
   On a wide display the answer is not a longer line — 78 characters is
   already the ceiling — it is bigger type. Every width here is in rem,
   so raising the root grows the column and the text together and the
   characters-per-line does not move. The page occupies a similar share
   of a 27-inch display as of a laptop, instead of shrinking into a strip.

   Must stay above the mobile block, which is required to come last.
   ------------------------------------------------------- */

/* Only the ROOT moves here. Every other size in this file is in rem, so
   body, lede, headings and captions all follow in proportion and the
   hierarchy holds. Restating body in this block multiplies the two: it
   produced a body larger than its own lede at 1500px and above. */
@media (min-width:1500px){ html{font-size:17px} }
@media (min-width:1900px){ html{font-size:18px} }

/* ── mobile ───────────────────────────────────────────────
   The floor is 14px at phone widths. Small mono type is fine
   on a desktop and unreadable on a phone, so every class that
   sits under 14px above is raised here.
   ------------------------------------------------------- */

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  header.site{padding-top:36px}
  /* The single-column shell, the static board and the list's first rule
     are now the DEFAULT rather than a phone override — the two-column
     form only switches on above 900px. Restating them here would be
     three rules that no longer change anything. */
  h1{font-size:26px}
  h2{font-size:19px}
  .standfirst{font-size:17px}
  .entry-title{font-size:19px}
  /* The bifurcation needs vertical room to read as a shape rather than a
     smudge; at 64px the period-doubling was a thick line. */
  .ca{height:82px}
  pre code{font-size:14px}
  table{font-size:14px}
  .site-name,.site-tag,.hdr-about,.ca-note,.entry-date,.entry-tags,.post-date,
  .board-lbl,.board .n,.measured .lbl,.caveat .lbl,th,
  figcaption,footer.site{font-size:14px}

  /* `code` is .87em, which lands at 13.92px against a 16px body — under the
     floor by eight hundredths of a pixel. Pin it rather than nudging the
     ratio, so the value does not drift back under when the body size moves. */
  code{font-size:14px}
}