/*
 * Binvolutive — the whole stylesheet.
 *
 * The brief: white, simple dark text, editorial rather than decorative. Clean
 * in the modern sense, not the antique one — so a contemporary serif for
 * reading, a sans reserved for small metadata, and almost no colour.
 *
 *   1. tokens
 *   2. reset and base
 *   3. layout: the measure, header, footer
 *   4. index
 *   5. post and prose
 *
 * No frameworks, no webfonts, no JavaScript. Fonts come from the system stack,
 * so nothing is fetched and nothing shifts on load.
 */

/* 1. Tokens -------------------------------------------------------------- */

:root {
  /* A modern serif for prose. `ui-serif` resolves to New York on Apple
     platforms; Charter and Iowan Old Style are the next best installed
     choices. Georgia is the floor, not the target. */
  --font-serif: ui-serif, "New York", "Iowan Old Style", Charter, Cambria,
    Georgia, serif;
  /* Sans is for metadata only — dates, labels. Never for body text. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
    monospace;

  /* The width of the TEXT itself, not the column that contains it — `.wrap`
     adds its gutters on top of this. Roughly 85 characters at the body size.
     This is the one knob to turn if the line length ever feels wrong. */
  --measure: 46rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.75rem;
  --space-5: 3rem;
  --space-6: 5rem;

  /* Bone, not white: a warm off-white reads as paper, where #fff reads as a
     lit panel. Text is near-black and warmed to match — pure #000 on a light
     ground is harsher than it looks. */
  --bg: #faf9f5;
  --text: #191817;
  --text-muted: #6e6b66;
  --rule: #e3dfd6;
  --code-bg: #f1eee7;
}

/* There is deliberately no dark mode. The site is bone in every context, so
   `color-scheme` tells the browser to render form controls and scrollbars
   light too, rather than inheriting a dark system theme and clashing. */
html {
  color-scheme: light;
}

/* 2. Reset and base ------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.125rem; /* 18px */
  line-height: 1.65;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Links are text, not decoration: they keep the body colour and carry a thin
   underline that darkens on hover. No blue anywhere. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 120ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* 3. Layout -------------------------------------------------------------- */

/* The gutters sit outside the measure, so `--measure` stays an honest
   statement about line length rather than shrinking by however much padding
   happens to be applied. */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--space-4));
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.site-header {
  padding-block: var(--space-5) var(--space-4);
}

/* The masthead stays small and quiet. A large title repeated at the top of
   every article competes with the article. */
.site-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.site-name:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.site-tagline {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 0.9375rem;
}

main {
  flex: 1;
  padding-block: var(--space-4) var(--space-6);
}

.site-footer {
  padding-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

/* The one sans-serif element: dates and labels. Uppercase and letterspaced so
   it reads as apparatus rather than as text. */
.post-meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 4. Index --------------------------------------------------------------- */

.post-list {
  list-style: none;
}

/* Hairlines between entries, none above the first or below the last — the
   rules should read as breathing room, not as a table. */
.post-list-item + .post-list-item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.post-list-item .post-meta {
  margin-bottom: var(--space-2);
}

.post-list-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.post-list-title a {
  text-decoration: none;
}

.post-list-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.post-list-summary {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 1.0625rem;
}

/* 5. Post and prose ------------------------------------------------------ */

.post-header {
  margin-bottom: var(--space-4);
}

.post-title {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.021em;
  margin-bottom: var(--space-2);
}

.post-body > * + * {
  margin-top: var(--space-3);
}

.post-body h2,
.post-body h3 {
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-top: var(--space-4);
}

.post-body h2 {
  font-size: 1.375rem;
  font-weight: 600;
}

.post-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.post-body ul,
.post-body ol {
  padding-left: 1.4em;
}

.post-body li + li {
  margin-top: var(--space-1);
}

.post-body blockquote {
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule);
  color: var(--text-muted);
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

.post-body pre {
  background: var(--code-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* A 33rem measure is right for prose and tight for code. Once there is room,
   let the grey box bleed out into the column's padding while the code inside
   stays aligned with the paragraphs — the extra width is bought without
   breaking the text's left edge. */
@media (min-width: 40rem) {
  .post-body pre {
    margin-inline: calc(var(--space-4) * -1);
  }
}

.post-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.post-body img {
  max-width: 100%;
  height: auto;
  display: block;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--space-4);
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.post-body th,
.post-body td {
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}

.post-nav {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* 6. Apparatus: tags, contents, backlinks -------------------------------- */

/* Tags sit under the title as small sans labels — the same register as the
   date, because they are the same kind of thing. */
.tag-list {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.tag {
  color: var(--text-muted);
  text-decoration: none;
}

.tag::before {
  content: "#";
  opacity: 0.55;
}

.tag + .tag {
  margin-left: var(--space-2);
}

.tag:hover {
  color: var(--text);
}

/* A contents list is navigation, not reading: sans, small, quiet, and set off
   by a rule rather than a box. */
.toc {
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

.toc ul {
  list-style: none;
}

.toc li + li {
  margin-top: var(--space-1);
}

.toc-level-3 {
  padding-left: var(--space-3);
}

.toc a {
  color: var(--text-muted);
  text-decoration: none;
}

.toc a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.backlinks {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.backlinks-heading {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.backlinks ul {
  list-style: none;
}

.backlinks li + li {
  margin-top: var(--space-1);
}

/* 7. Link icons ---------------------------------------------------------- */

/* A mark after a link, so its destination is visible before it is clicked.
   Attribute selectors only — no JavaScript, no per-domain icon set, no
   metadata to maintain. Internal links (which start with `/`) get nothing,
   because the absence is the signal. */
.post-body a[href^="http"]::after {
  content: "\2197"; /* north-east arrow */
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.7em;
  vertical-align: 0.35em;
  color: var(--text-muted);
  text-decoration: none;
}

.post-body a[href$=".pdf"]::after {
  content: "PDF";
  margin-left: 0.25em;
  font-family: var(--font-sans);
  font-size: 0.6em;
  letter-spacing: 0.06em;
  vertical-align: 0.3em;
  color: var(--text-muted);
}

/* An anchor to a section on this page is a jump, not a departure. */
.post-body a[href^="#"]::after {
  content: none;
}

/* 8. Footnotes and sidenotes --------------------------------------------- */

/* pulldown-cmark emits each definition where it appears in the source, so a
   footnote written directly after its paragraph is already in the right place
   in the document flow. That is what makes sidenotes possible in CSS alone:
   below, the definitions read as ordinary footnotes; above the breakpoint they
   float out into the margin beside the text that cites them. */

.footnote-reference a {
  text-decoration: none;
  font-size: 0.85em;
  padding-left: 0.1em;
}

.post-body .footnote-definition {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footnote-definition-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  vertical-align: baseline;
}

.footnote-definition p {
  margin: 0;
}

/* The breakpoint is the measure plus a margin column plus its gap — below it
   there is no room, and a sidenote would either overlap the text or push the
   page sideways. */
@media (min-width: 76rem) {
  .post-body .footnote-definition {
    float: right;
    clear: right;
    width: 14rem;
    /* Out past the right edge of the column: the gutter, then the gap. */
    margin-right: calc(-14rem - var(--space-4) - var(--space-4));
    margin-top: 0;
    margin-bottom: var(--space-3);
    font-size: 0.875rem;
  }
}

/* Drafts are only ever visible in a local preview build, but they must be
   unmistakable there — the whole point is knowing which state you are reading.
   No colour: the palette has none, and a border carries it perfectly well. */
.draft-banner {
  margin: 0 0 1rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.draft-flag {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}