/* Text is STIX Two Text, the companion of the math face, so prose and formulas are one design on every platform.
   OFL subsets (fonts/OFL.txt), self-hosted: 26-29 KB per style. Naming the faces "STIX Two Text" serves the figures too. */
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/stix-two-text-regular.woff2") format("woff2"); }
@font-face { font-family: "STIX Two Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/stix-two-text-italic.woff2") format("woff2"); }
@font-face { font-family: "STIX Two Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/stix-two-text-semibold.woff2") format("woff2"); }
/* Math uses STIX Two Math: installed on Apple systems, else the subset in fonts/ (43 KB, fetched only by pages with math).
   It also supplies the few signs STIX Two Text lacks (≤ ≥ ⌊ ⌋) wherever prose uses them. */
@font-face {
  font-family: "Site Math"; font-display: swap;
  src: local("STIX Two Math"), local("STIXTwoMath-Regular"), url("fonts/stix-two-math.woff2") format("woff2");
}

/* Warm paper and ink; links in amber. Every text colour meets WCAG AA on its background. */
:root {
  color-scheme: light dark;
  --bg: #faf6ee; --fg: #24201a; --muted: #6b6356; --rule: #e4dccd; --code: #f3eee3; --link: #94540f; --mark: #f1dcb4;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1915; --fg: #e8e1d3; --muted: #a59c8c; --rule: #37322a; --code: #23201b; --link: #e5ad5e; --mark: #5a4320; }
}

/* 17 px on a phone, about 20 px at 1280 px, 23.5 px on a 1920 px projector; the measure grows with it. */
html { font-size: clamp(1.0625rem, .75rem + .6vw, 1.5rem); background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  max-width: 33rem; margin: 0 auto; padding: 3.5rem 1.25rem 3rem;
  font: 1rem/1.6 "STIX Two Text", "Site Math", Georgia, serif;
  font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
/* Light text on a dark ground blooms with subpixel-style smoothing; thin it back to the light mode's weight. */
@media (prefers-color-scheme: dark) { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }
::selection { background: var(--mark); }

h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; margin: .5rem 0 .6rem; text-wrap: balance; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 2.6rem 0 .5rem; text-wrap: pretty; }
h1 + p:not(.meta), h2 + p { margin-top: 0; }
p { margin: 0 0 1rem; text-wrap: pretty; }
em { font-style: italic; }
strong { font-weight: 600; }

a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: .06em; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
h2 a { color: inherit; text-decoration-color: var(--link); text-decoration-thickness: .06em; }

.meta, .note { color: var(--muted); font-size: .875rem; line-height: 1.55; }
body > .meta:first-child { margin-bottom: 1.25rem; }
h1 + .meta { margin-bottom: 2rem; }
.versions { list-style: none; padding: 0; margin: 0 0 1rem; }
.versions li + li { margin-top: .75rem; }
.versions .note { margin-top: .2rem; }

/* Math: STIX Two Math at the text's size, so x-heights and strokes match. */
math { font-family: "Site Math", math; }
/* A displayed formula never scrolls: a long one also comes broken after its relation (.narrow), shown in place of the
   one line (.wide) on a phone, and the posting kit refuses a page where a formula is wider than the window. */
.display { margin: 1.1rem 0; padding: .15em 0; }
math[display="block"] { display: block; display: block math; }
.display > math.narrow { display: none; }
math.narrow > mtable > mtr > mtd { math-style: normal; text-align: left; padding: .15em 0; }
math.narrow > mtable > mtr + mtr > mtd { padding-left: 3em; }
@media (max-width: 520px) { .display > math.wide { display: none; } .display > math.narrow { display: block; display: block math; } }
/* Punctuation after a superscript tucks under it, as in print: "below 41²." rather than "41² ." */
.nobr > math:is(:has(> msup:last-child), :has(> mrow:last-child > msup:last-child)) { margin-inline-end: -.08em; }
/* Chromium sizes a radical by its widest glyph variant but draws the smallest, leaving a gap after √q.
   app-region is a Chromium-only property, so this reaches no other engine. */
@supports (app-region: drag) { msqrt:not(:has(mfrac, munder, mover, munderover, msqrt)) { margin-inline-end: -.418em; } }

details { margin: 0 0 1rem; }
summary { cursor: pointer; color: var(--link); width: fit-content; }
pre {
  font: .75rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--code); border-radius: 4px;
  margin: .6rem 0 0; padding: .8rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}

figure { margin: 2rem 0; }
figure svg { display: block; margin: 0 auto 1rem; }
figure text { font-family: "STIX Two Text", "Site Math", Georgia, serif; }
figcaption { font-size: .875rem; line-height: 1.55; }
figcaption .fig { font-weight: 600; }
.sources { padding-left: 1.1rem; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.sources li + li { margin-top: .5rem; }
.sources li::marker { color: var(--muted); }
.nobr { white-space: nowrap; }

footer { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .8125rem; line-height: 1.55; }

@media (max-width: 520px) {
  body { padding-top: 2rem; }
  figure svg { width: calc(100% + 1.5rem); margin-inline: -.75rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.15rem; margin-top: 2.2rem; }
  p, figcaption, .note { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 3; }
  a { hyphens: manual; -webkit-hyphens: manual; }
}

@page { margin: 2cm 2.4cm; }
@media print {
  :root { --bg: #fff; --fg: #000; --muted: #444; --rule: #bbb; --code: #fff; --link: #000; }
  html { font-size: 11pt; }
  body { max-width: 36em; padding: 0; }
  a { text-decoration: none; }
  h2 { break-after: avoid; }
  figure, math[display="block"], li { break-inside: avoid; }
  pre { border: 1px solid var(--rule); }
  details::details-content { content-visibility: visible; display: contents; }
  summary { color: var(--fg); font-weight: 600; list-style: none; }
}