:root {
  color-scheme: light;
  --color-surface: #faf9f7;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #efedea;
  --color-border: #ddd9d3;
  --color-border-strong: #7a736a;
  --color-ink: #1c2429;
  --color-ink-soft: #55616a;
  --color-link: #005b82;
  --color-focus: #00658f;
  --font-sans: "Atkinson Hyperlegible", Verdana, Geneva, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Lexend", Verdana, Geneva, ui-sans-serif, system-ui, sans-serif;
}

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("fonts/lexend-latin.woff2") format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/opendyslexic-400.woff2") format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/opendyslexic-700.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { font-size: 112.5%; }
body { margin: 0; padding: 2rem 1rem; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans); line-height: 1.6; letter-spacing: 0.012em; word-spacing: 0.05em; text-align: left; }
main { max-width: 66ch; margin: 0 auto; padding: 0 1rem; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; letter-spacing: 0.005em; text-wrap: balance; }
p, li { text-wrap: pretty; }
ul, ol { padding-left: 1.4em; }
p, ul, ol, blockquote { margin: 0 0 1.2em; }
em, i { font-style: normal; font-weight: 700; }
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.figure { text-align: center; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--color-border); padding: 0.5em 0.7em; text-align: left; vertical-align: top; }
blockquote { border-left: 3px solid var(--color-border); margin-left: 0; padding: 0.2em 0 0.2em 1em; background: var(--color-surface-sunken); color: var(--color-ink-soft); }

/* reading control axes: typeface, letter spacing, text size */
html[data-font="lexend"] { --font-sans: "Lexend", Verdana, Geneva, ui-sans-serif, sans-serif; }
html[data-font="verdana"] { --font-sans: Verdana, Geneva, ui-sans-serif, system-ui, sans-serif; --font-display: Verdana, Geneva, ui-sans-serif, system-ui, sans-serif; }
html[data-font="opendyslexic"] { --font-sans: "OpenDyslexic", Verdana, Geneva, ui-sans-serif, sans-serif; --font-display: "OpenDyslexic", Verdana, Geneva, ui-sans-serif, sans-serif; }
html[data-font="opendyslexic"] body { line-height: 1.75; }
html[data-spacing="wide"] body { letter-spacing: 0.05em; word-spacing: 0.1em; line-height: 1.75; }
html[data-spacing="wider"] body { letter-spacing: 0.09em; word-spacing: 0.18em; line-height: 1.95; }
html[data-size="large"] { font-size: 125%; }
html[data-size="larger"] { font-size: 137.5%; }

/* reading controls markup, in the .reading-bar above main */
.reading-bar { max-width: 66ch; margin: 0 auto; padding: 1rem 1rem 0; }
.reading summary { font-weight: 700; cursor: pointer; }
.reading select, .reading button { min-height: 44px; font: inherit; border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-ink); }
.reading button { border-radius: 999px; padding: 0 1rem; }
.reading select { padding: 0 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* print: the paper, never the site chrome. site/make-pdf.sh prints through
   this block, and G-19 proves the hidden strings are absent from the PDF. */
@media print {
  @page { size: Letter; margin: 20mm; }
  body { background: #ffffff; color: #000000; padding: 0; font-size: 11.5pt; }
  main { padding: 0; }
  .reading-bar, .comment-invite, .paper-download,
  .comment-section, #comment-float, #comment-panel { display: none !important; }
  .table-wrap { overflow: visible; }
  h1, h2, h3 { break-after: avoid; }
  .figure, tr, blockquote { break-inside: avoid; }
  a { color: #000000; }
}

#comment-panel { max-width: 40rem; width: calc(100vw - 2rem); border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-ink); }
#comment-panel button, #comment-panel input, #comment-panel textarea, #comment-panel label { font: inherit; color: inherit; }
#comment-panel button, #comment-panel input, #comment-panel textarea { min-height: 44px; }
#comment-panel button { min-width: 44px; border-radius: 999px; padding: 0 1rem; border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); }
#comment-panel label { display: block; margin: 1em 0 0.3em; }
#comment-panel textarea, #comment-panel input { width: 100%; margin: 0 0 0.3em; }
#comment-panel textarea { min-height: 8em; }
#comment-panel #comment-submit, #comment-panel #comment-cancel { margin-top: 1em; }
#comment-passage { background: var(--color-surface-sunken); padding: 0.5em 0.8em; }
#comment-count { color: var(--color-ink-soft); }
#comment-status, #comment-email-error { font-weight: 700; }
#comment-float { position: absolute; min-height: 44px; min-width: 44px; z-index: 2; font: inherit; }
.comment-section { min-height: 44px; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; color: var(--color-link); }
/* The intro block is a direct child of <body>, which has no max-width, so it
   needs the reading column main and .reading-bar already set for themselves. */
.paper-intro { max-width: 66ch; margin: 0 auto; padding: 0 1rem; }
.comment-invite { background: var(--color-surface-sunken); padding: 0.6em 0.9em; font-family: var(--font-sans); }