/* Layout: an edited manuscript. A book grid with a left margin for rule numbers and chapter numerals,
   a ~62ch text column, and a right margin for sidenotes. Code exhibits run across text + right margin.
   One spot colour, the editor's red pencil, used only for editorial marks. */
:root {
  --paper: #fcfcfa;
  --ink: #161616;
  --ink-2: #3b4652;
  --muted: #6e737b;
  --hair: #dedfdb;
  --exhibit: #f2f2ef;
  --pencil: #cf2e1d;
  --pencil-line: rgba(207, 46, 29, 0.55);
  --link: #161616;

  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --grotesk: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text: 37rem;
  --margin-l: 7.5rem;
  --margin-r: 13.5rem;
  --gap: 2.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131314;
    --ink: #ecebe7;
    --ink-2: #b4c1cf;
    --muted: #8e939b;
    --hair: #2b2c2f;
    --exhibit: #1b1c1e;
    --pencil: #ff6b57;
    --pencil-line: rgba(255, 107, 87, 0.6);
    --link: #ecebe7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131314;
  --ink: #ecebe7;
  --ink-2: #b4c1cf;
  --muted: #8e939b;
  --hair: #2b2c2f;
  --exhibit: #1b1c1e;
  --pencil: #ff6b57;
  --pencil-line: rgba(255, 107, 87, 0.6);
  --link: #ecebe7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.58;
  font-optical-sizing: auto;
  font-kerning: normal;
  hanging-punctuation: first;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--pencil); color: var(--paper); }

/* ---------- running head ---------- */
.running-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  max-width: calc(var(--margin-l) + var(--text) + var(--margin-r) + 2 * var(--gap) + 32px);
  margin: 0 auto; padding: 1.1rem 16px;
  font: 600 0.72rem/1 var(--grotesk); letter-spacing: 0.16em; text-transform: uppercase;
}
.running-head a { color: var(--ink); text-decoration: none; }
.running-head .where { color: var(--muted); display: flex; align-items: center; gap: 1.1rem; }
.running-head .where a { color: var(--muted); }
.running-head .where a:hover { color: var(--pencil); }
button.theme {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
}
button.theme:hover { color: var(--pencil); }
@media (max-width: 40rem) {
  .running-head .where > span { display: none; }
}

/* ---------- page grid ---------- */
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(16px, 1fr)
    [ml-start] var(--margin-l) [ml-end text-start] minmax(0, var(--text)) [text-end mr-start] var(--margin-r) [mr-end]
    minmax(16px, 1fr) [full-end];
  column-gap: var(--gap);
  padding-block: 2rem 5rem;
}
.page > * { grid-column: text; }
.page > pre, .page > .pair, .page > .table-wrap { grid-column: text-start / mr-end; }
.page > .rule, .page > .opener, .page > .cheat { grid-column: ml-start / mr-end; }

@media (max-width: 68rem) {
  .page { grid-template-columns: [full-start] 16px [ml-start ml-end text-start] minmax(0, 1fr) [text-end mr-start mr-end] 16px [full-end]; column-gap: 0; }
}

/* ---------- chapter opener ---------- */
.opener { display: grid; grid-template-columns: subgrid; align-items: end; margin: 2.5rem 0 1.5rem; }
.opener .numeral {
  grid-column: 1; justify-self: end;
  font: 700 7.5rem/0.8 var(--grotesk); font-stretch: 75%; color: var(--pencil);
  font-variant-numeric: lining-nums; letter-spacing: -0.02em;
}
.opener .titles { grid-column: 2 / 4; }
.opener h1 { margin: 0; }
.opener .lede { margin: 0.9rem 0 0; }
@media (max-width: 68rem) {
  .opener { display: block; }
  .opener .numeral { display: block; justify-self: start; font-size: 4.5rem; margin-bottom: 0.6rem; }
}

h1, h2, h3 { font-family: var(--grotesk); text-wrap: balance; }
h1 {
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height: 0.95; font-weight: 700;
  font-stretch: 75%; letter-spacing: -0.012em;
}
.lede {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.45rem; line-height: 1.35; color: var(--ink-2); max-width: 30em;
}
h2 {
  font-size: 1.55rem; line-height: 1.15; font-weight: 700; font-stretch: 87.5%;
  margin: 3.4rem 0 0.7rem; padding-top: 1.1rem; border-top: 1px solid var(--ink);
}
h3 {
  font-size: 0.82rem; line-height: 1.3; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 2.1rem 0 0.3rem;
}
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.2em; }
li { margin: 0.3rem 0; }
li::marker { color: var(--muted); }
strong, b { font-weight: 650; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--pencil-line); text-decoration-thickness: 1.5px; text-underline-offset: 0.16em; }
a:hover { color: var(--pencil); text-decoration-color: var(--pencil); }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 3px; }

code { font-family: var(--mono); font-size: 0.8em; font-weight: 500; color: var(--ink-2); }
pre {
  margin: 1.4rem 0 1.8rem; padding: 1.15rem 1.3rem; background: var(--exhibit); overflow-x: auto;
  font-size: 0.82rem; line-height: 1.62;
}
pre code { font-size: inherit; font-weight: 400; color: var(--ink); padding: 0; background: none; }

/* ---------- rules: number in the left margin, reasoning as a sidenote ---------- */
.rule { display: grid; grid-template-columns: subgrid; margin: 1.8rem 0 2rem; align-items: start; }
.rule .rp {
  grid-column: 1; justify-self: end; margin-top: 0.42rem;
  font: 700 0.78rem/1 var(--grotesk); letter-spacing: 0.14em; color: var(--pencil);
}
.rule .stmt {
  grid-column: 2; margin: 0;
  font: 650 1.4rem/1.3 var(--serif); letter-spacing: -0.005em;
  text-decoration: underline; text-decoration-color: var(--pencil-line); text-decoration-thickness: 2px;
  text-underline-offset: 0.24em;
}
.rule .why {
  grid-column: 3; margin: 0.25rem 0 0;
  font-size: 0.92rem; line-height: 1.45; font-style: italic; color: var(--muted);
}
.rule.plain .stmt { grid-column: 2 / 4; }
@media (max-width: 68rem) {
  .rule { display: block; }
  .rule .rp { display: block; justify-self: start; margin: 0 0 0.5rem; }
  .rule .why { margin-top: 0.7rem; padding-left: 0.9rem; border-left: 2px solid var(--pencil-line); }
}

/* ---------- examples: the draft is struck through, the revision stands ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; margin: 1.6rem 0 2rem; }
.pair figure { margin: 0; min-width: 0; }
.pair figcaption {
  font: 700 0.72rem/1 var(--grotesk); letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 0.55rem;
}
.pair .before figcaption { color: var(--pencil); }
.pair .before figcaption::after { content: " · struck"; font-weight: 500; }
.pair .after figcaption { color: var(--ink); margin-top: 1rem; }
.pair .after figcaption::after { content: " · revised"; font-weight: 500; color: var(--muted); }
.pair pre { margin: 0; }
.pair .before pre {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.9px), var(--pencil-line) calc(50% - 0.9px), var(--pencil-line) calc(50% + 0.9px), transparent calc(50% + 0.9px)),
    var(--exhibit);
}
.pair .before pre code, .pair .before pre code * { color: var(--muted) !important; font-weight: 400 !important; }

/* ---------- cover ---------- */
.kicker { font: 600 0.72rem/1.5 var(--grotesk); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0; }
.cover-title {
  font: 700 clamp(4.2rem, 2rem + 11vw, 10.5rem)/0.82 var(--grotesk); font-stretch: 75%;
  letter-spacing: -0.02em; margin: 0.6rem 0 2.6rem;
}
.cover-title .mark { color: var(--pencil); }

.cheat { list-style: none; margin: 1rem 0 2rem; padding: 0; counter-reset: rp; display: grid; grid-template-columns: subgrid; }
.cheat li {
  grid-column: 1 / -1; counter-increment: rp; display: grid; grid-template-columns: subgrid;
  align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--hair); margin: 0;
}
.cheat li::before {
  content: counter(rp, decimal-leading-zero); grid-column: 1; justify-self: end;
  font: 700 2.4rem/0.9 var(--grotesk); font-stretch: 75%; color: var(--pencil);
}
.cheat li p { grid-column: 2; margin: 0; color: var(--ink-2); }
.cheat li b { color: var(--ink); font-weight: 650; }
.cheat li a {
  grid-column: 3; font: 600 0.72rem/1.6 var(--grotesk); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.cheat li a::before { content: "→ "; }
.cheat li a:hover { color: var(--pencil); }
@media (max-width: 68rem) {
  .cheat { display: block; }
  .cheat li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.9rem; }
  .cheat li::before { font-size: 1.9rem; justify-self: start; grid-row: span 2; }
  .cheat li a { grid-column: 2; margin-top: 0.4rem; }
}

ol.toc { list-style: none; padding: 0; margin: 0.6rem 0 2rem; counter-reset: ch; }
ol.toc li { counter-increment: ch; display: flex; align-items: baseline; gap: 0.6rem; margin: 0; padding: 0.42rem 0; }
ol.toc li::before { content: counter(ch); min-width: 1.6rem; font: 700 1.05rem/1 var(--grotesk); font-stretch: 75%; color: var(--pencil); }
ol.toc li a { text-decoration: none; color: var(--ink); }
ol.toc li a:hover { color: var(--pencil); }
ol.toc li .leader { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-0.3em); min-width: 1.5rem; }
ol.toc li .rules { font: 600 0.72rem/1 var(--grotesk); letter-spacing: 0.12em; color: var(--muted); white-space: nowrap; }

.colophon { font-size: 0.92rem; color: var(--muted); font-style: italic; border-top: 1px solid var(--hair); padding-top: 1rem; margin-top: 3rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.4rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; line-height: 1.45; }
th, td { text-align: left; padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { font: 700 0.7rem/1.4 var(--grotesk); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }

/* ---------- end matter ---------- */
nav.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4.5rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); }
nav.pager a { text-decoration: none; color: var(--ink); font: 700 1.35rem/1.15 var(--grotesk); font-stretch: 87.5%; }
nav.pager a:hover { color: var(--pencil); }
nav.pager span { display: block; margin-bottom: 0.4rem; font: 600 0.7rem/1 var(--grotesk); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
nav.pager .next { grid-column: 2; text-align: right; }
footer.site { margin-top: 2.5rem; font-size: 0.88rem; font-style: italic; color: var(--muted); }

/* ---------- syntax: ink, weight and one blue-grey; no rainbow ---------- */
.hljs-keyword, .hljs-built_in, .hljs-literal { font-weight: 600; }
.hljs-string, .hljs-number { color: var(--ink-2); }
.hljs-comment { color: var(--muted); font-style: italic; }
.hljs-title.function_, .hljs-title.class_ { font-weight: 600; }
.hljs-meta { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .running-head, nav.pager { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  pre { white-space: pre-wrap; }
}