/* One light theme, one reading column, upright type only. Sizes in rem so a reader's browser font setting scales the page. */
:root {
  color-scheme: light;
  --bg: #fdfdfb;
  --ink: #1c1d1f;
  --muted: #4a4f57;
  --rule: #dcdcd5;
  --link: #1d4f91;
  --tint: #f2f2ee;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.7;
  font-synthesis: none;
  font-kerning: normal;
}
@media (max-width: 600px) { body { font-size: 1.125rem; line-height: 1.65; } }
i, cite, q, blockquote { font-style: normal; }
em { font-style: italic; }
::selection { background: #cfe0f5; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* About 70 characters per line on a desktop screen. */
.top, main, .foot { max-width: 32em; margin: 0 auto; }

.top { padding: 3.6em 0 1.8em; border-bottom: 1px solid var(--rule); }
h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; font-size: 2.25em; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.byline { margin: 0.9em 0 0; font-family: var(--sans); font-size: 0.9em; color: var(--muted); }
.byline a { color: var(--muted); }
.question { margin: 0 0 1em; font-size: 1.4em; line-height: 1.38; font-weight: 400; text-wrap: balance; }


h2, h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; scroll-margin-top: 16px; text-wrap: balance; }
h2 { font-size: 1.55em; line-height: 1.25; margin: 2.3em 0 0.75em; }
h3 { font-size: 1.15em; line-height: 1.35; margin: 1.9em 0 0.6em; }
h2, h3 { display: flex; align-items: baseline; }
h2 .n, h3 .n { flex: none; font-family: var(--sans); font-weight: 600; font-size: 0.72em; color: var(--muted); font-variant-numeric: tabular-nums; }
h2 .n { min-width: 1.9em; }
h3 .n { min-width: 2.6em; font-size: 0.8em; }
main > section:first-child h2 { margin-top: 1.5em; }
p { margin: 0 0 1em; }
p, li, td { text-wrap: pretty; }
/* Subscripts and formulas must not change the line spacing or break across lines. */
sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
.math { white-space: nowrap; }


.table { overflow-x: auto; margin: 1.2em 0 1.5em; }
table { border-collapse: collapse; width: 100%; font-size: 0.8em; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 0.45em 0.7em 0.45em 0; border-bottom: 1px solid var(--rule); }
th { font-family: var(--sans); font-weight: 600; color: var(--muted); border-bottom-color: var(--muted); }
.claims { margin: 0 0 1em; padding-left: 1.5em; }
.claims li { margin: 0 0 1em; padding-left: 0.2em; }

.cites { white-space: nowrap; font-family: var(--sans); font-size: 0.82em; color: var(--muted); }
.cites a { text-decoration: none; }
.cites a:hover { text-decoration: underline; }

.refs ol { list-style: none; margin: 0; padding: 0; }
.refs li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); margin: 0 0 0.7em; font-size: 0.85em; line-height: 1.5; scroll-margin-top: 16px; }
.refs li .n { font-family: var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.refs li:target { background: #fff3c4; outline: 4px solid #fff3c4; }
.refs li a { overflow-wrap: anywhere; }

/* The smaller size is set on the paragraphs so that the footer keeps the width of the column. */
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 2.5em; padding: 1em 0 2.1em; border-top: 1px solid var(--rule); font-family: var(--sans); }
.foot p { margin: 0; font-size: 0.85em; }

/* The switch between the three views: three radio buttons drawn as one button, so it works without scripts.
   Without :has() support every view shows, in page order. On a phone the three parts share the width,
   and the third label drops "Open in". */
.switch { position: relative; display: flex; width: fit-content; margin: 1.1em 0 0; border: 1px solid var(--link); border-radius: 6px; overflow: hidden; font-family: var(--sans); font-size: 0.9em; line-height: 1.4; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch label { padding: 0.45em 1em; color: var(--link); font-weight: 600; cursor: pointer; white-space: nowrap; }
.switch label + input + label { border-left: 1px solid var(--link); }
.switch input:checked + label { background: var(--link); color: #fff; cursor: default; }
.switch:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 560px) {
  .switch { width: 100%; }
  .switch label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 0.45em 0.5em; text-align: center; white-space: normal; }
  .switch .wide { display: none; }
}
body:has(#v-short:checked) main, body:has(#v-short:checked) [data-version="ai"] { display: none; }
body:has(#v-full:checked) [data-version="short"], body:has(#v-full:checked) [data-version="ai"] { display: none; }
body:has(#v-ai:checked) main, body:has(#v-ai:checked) [data-version="short"] { display: none; }

/* The short version is set larger, for a five-minute read; 29.1em at 1.1 times the size is the 32em column of the page. */
[data-version="short"] { max-width: 29.1em; margin: 0 auto; padding-top: 1.7em; font-size: 1.1em; }
[data-version="short"] strong { font-weight: 600; }
[data-version="short"] .more { margin-top: 1.6em; padding-top: 1em; border-top: 1px solid var(--rule); color: var(--muted); }

/* The view that hands the essay to an assistant: one prompt per language, a copy button and two links. */
[data-version="ai"] { max-width: 32em; margin: 0 auto; padding-top: 1.7em; }
[data-version="ai"] .lang { display: flex; align-items: center; gap: 0.6em; margin: 0 0 0.8em; font-family: var(--sans); font-size: 0.9em; }
[data-version="ai"] select { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 0.3em 0.5em; }
.prompt { margin: 0 0 2em; }
.prompt[hidden] { display: none; }
.prompt .box { margin: 0 0 0.8em; padding: 0.9em 1.1em; background: var(--tint); border: 1px solid var(--rule); border-radius: 4px; font-family: var(--sans); font-size: 0.9em; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.acts { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0; font-family: var(--sans); font-size: 0.9em; }
.acts a, .acts button { display: inline-block; padding: 0.4em 1em; border: 1px solid var(--link); border-radius: 6px; background: #fff; color: var(--link); font: inherit; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.acts button { background: var(--link); color: #fff; }
.acts a:hover { background: var(--tint); }
[data-version="ai"] .note { color: var(--muted); font-size: 0.85em; font-family: var(--sans); line-height: 1.5; }

/* The block at the end of each version that says how to cite the essay. */
.cite { margin: 2.5em 0 1em; padding-top: 0.2em; border-top: 1px solid var(--rule); }
.cite h2 { font-size: 1.15em; margin: 1.2em 0 0.6em; }
.cite p { font-size: 0.9em; }
.cite a { overflow-wrap: anywhere; }
.cite pre { margin: 0 0 0.8em; padding: 0.8em 1em; background: var(--tint); border: 1px solid var(--rule); border-radius: 4px; overflow-x: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.72em; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The note on where the text comes from, under each version. */
.colophon { margin: 2em 0 1em; font-family: var(--sans); font-size: 0.85em; line-height: 1.5; color: var(--muted); }
.colophon a { color: var(--muted); }

.pop { position: absolute; z-index: 10; max-width: min(26rem, calc(100vw - 32px)); padding: 0.7em 0.9em; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); font-family: var(--serif); font-size: 1rem; line-height: 1.45; }
.pop .n { margin-right: 0.4em; font-family: var(--sans); color: var(--muted); }

@media print {
  body { background: #fff; font-size: 11pt; padding: 0; }
  .pop { display: none; }
  a { color: inherit; text-decoration: none; }
  h2, h3 { break-after: avoid; }
}