: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%; scroll-padding-bottom: var(--bar-h, 0px); }
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; }
/* Source URLs are plain text inside numbered list items. */
/* Long tokens (DOIs, domains) in any list or paragraph must wrap, or a phone scrolls sideways. */
main { overflow-wrap: anywhere; }
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; max-width: 100%; }

@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, .paper-home, .comment-invite, .paper-download,
  .comment-section, #comment-float, .draft-card,
  #review-bar, #review-round { display: none !important; }
  .table-wrap { overflow: visible; }
  h1, h2, h3 { break-after: avoid; }
  .figure, tr, blockquote { break-inside: avoid; }
  a { color: #000000; }
}

/* draft cards in the reading column */
.draft-card { width: 100%; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-link); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.75rem 0 1.25rem; overflow-wrap: break-word; }
.draft-card p { margin: 0 0 0.5em; }

/* lift cards into the margin only when the paper and rail fit on screen */
@media screen {
  body.rail main { position: relative; margin-left: max(1rem, calc((100vw - 66ch - 24rem) / 2)); }
  /* the settings bar and the invitation move with the paper, so their left edges stay aligned */
  body.rail .reading-bar, body.rail .paper-intro { margin-left: max(1rem, calc((100vw - 66ch - 24rem) / 2)); }
  body.rail .draft-card { position: absolute; left: calc(100% + 2rem); width: 22rem; margin: 0; }
}

/* shared controls for draft cards, round bar, and review dialog */
.draft-card button, .draft-card textarea, .draft-card input, .draft-card label,
#review-bar button, #review-bar textarea, #review-bar input, #review-bar label,
#review-round button, #review-round textarea, #review-round input, #review-round label {
  font: inherit; color: inherit; letter-spacing: inherit; word-spacing: inherit; line-height: inherit;
}
.draft-card button, .draft-card input, .draft-card textarea,
#review-bar button, #review-bar input, #review-bar textarea,
#review-round button, #review-round input, #review-round textarea {
  min-height: 44px;
}
.draft-card button, #review-bar button, #review-round button {
  min-width: 44px; border-radius: 999px; padding: 0 1rem; border: 1px solid var(--color-border-strong); background: var(--color-surface-raised);
}
.draft-card textarea, #review-round textarea { width: 100%; min-height: 6em; }
.draft-card label, #review-round label { display: block; margin: 0.75em 0 0.3em; }
.draft-card textarea, #review-round textarea, #review-round input { width: 100%; margin: 0 0 0.5em; border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); padding: 0.5rem; }
.draft-card button, #review-round button { margin: 0.25rem 0.5rem 0.25rem 0; }

/* round bar fixed to window foot */
#review-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--color-surface-raised); border-top: 1px solid var(--color-border-strong); padding: 0.5rem 1rem; display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: center; z-index: 10; }
#review-bar[hidden] { display: none; }
body:has(#review-bar:not([hidden])) { padding-bottom: var(--bar-h, 0px); }

#review-bar p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#review-bar button { flex-shrink: 0; }
@media (max-width: 40rem) {
  #review-prev, #review-next { display: none; }
  #review-open { flex: 1 1 55%; min-width: 0; padding: 0 0.5rem; }
  #review-bar-count { flex: 1 1 45%; }
}

/* review round dialog */
#review-round { max-width: 40rem; width: calc(100vw - 2rem); border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-ink); }
#review-round ol, #review-list { padding-left: 0; list-style: none; }
#review-round li { border-top: 1px solid var(--color-border); padding: 1rem 0; margin: 0; }
#review-round li:first-child { border-top: none; }
#review-round li p:first-child { font-weight: 700; }
#review-status, .review-error { font-weight: 700; }
#review-title { font-size: 1.25em; font-weight: 700; }

/* highlight for drafted comment passages */
::highlight(comment-draft) { background-color: #fff3b0; color: inherit; }

/* visible focus indication for controls */
.draft-card:focus, .draft-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.draft-card button:focus-visible, #review-bar button:focus-visible, #review-round button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
#comment-float { position: static; 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); }

/* the summary's way into the paper: one button, and the PDF as a plain link beside it */
.summary-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1.6em; }
.summary-cta a { display: inline-flex; align-items: center; min-height: 44px; }
.summary-cta-paper { padding: 0 1.25rem; border-radius: 999px; background: var(--color-link); color: var(--color-surface-raised); font-weight: 700; text-decoration: none; }
.summary-cta-paper:hover { text-decoration: underline; }
/* the summary's quoted line is its headline claim, so it is set large rather than muted */
.pull-quote { background: none; border: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 0.7em 0; margin: 1.6em 0; color: var(--color-ink); font-family: var(--font-display); font-size: 1.35em; font-weight: 500; line-height: 1.35; }
.pull-quote p { margin: 0; }

@media print { ::highlight(comment-draft) { background: none; } }