/* The interim reading style, until themes arrive in S4. */
:root {
  --bg: #fbfaf7;
  --ink: #1f1e1c;
  --muted: #62605a;
  --accent: #8a3b12;
  --banner: #fff1d6;
  --banner-ink: #5a3500;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a;
    --ink: #e9e7e2;
    --muted: #a8a59d;
    --accent: #f0a577;
    --banner: #3a2a0c;
    --banner-ink: #ffd99a;
  }
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
 *, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.125rem/1.65 Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
}

a { color: var(--accent); }
.staff-banner { margin: 0; padding: .6rem 1rem; background: var(--banner); color: var(--banner-ink); font-family: system-ui, sans-serif; font-size: .95rem; }
.masthead, main, .colophon { max-width: 40rem; margin: 0 auto; padding: 0 1rem; }
.masthead { padding-top: 1.5rem; font: 700 1.25rem/1.2 system-ui, sans-serif; }
.masthead a { color: var(--ink); text-decoration: none; }
main { padding-block: 2rem; overflow-wrap: break-word; }
h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }
.colophon { color: var(--muted); font-size: .9rem; padding-bottom: 2rem; }

/* Published writing (slice 3) */
.pieces { list-style: none; padding: 0; }
.pieces li { margin-bottom: 2rem; }
.pieces h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
.pieces a { text-decoration: none; }
.meta { color: var(--muted); font-size: .9rem; font-family: system-ui, sans-serif; }
.subtitle { margin-top: -.5rem; font-size: 1.2rem; color: var(--muted); }
.preview-banner { background: var(--banner); color: var(--banner-ink); padding: .5rem .75rem; border-radius: 8px; font-family: system-ui, sans-serif; }
.reading h2, .reading h3 { line-height: 1.25; margin-top: 2rem; }
.reading img, .reading video { max-width: 100%; height: auto; }
.reading figure { margin: 1.5rem 0; }
.reading figcaption { font-size: .9rem; color: var(--muted); }
.reading blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--muted); color: var(--muted); }
.reading table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: .95rem; }
.reading th, .reading td { border: 1px solid var(--muted); padding: .35rem .6rem; text-align: left; }
.reading pre { overflow-x: auto; padding: .75rem; border-radius: 8px; background: rgba(127, 127, 127, .12); }
.reading code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.reading math[display="block"] { display: block; overflow-x: auto; margin: 1.25rem 0; }
.piece-header, .piece-footer { font-family: system-ui, sans-serif; font-size: .95rem; color: var(--muted); }
.piece-header { border-bottom: 1px solid var(--muted); padding-bottom: .5rem; margin-bottom: 1.5rem; }
.piece-footer { border-top: 1px solid var(--muted); padding-top: .5rem; margin-top: 2rem; }
.errata { margin-top: 2.5rem; border-top: 1px solid var(--muted); padding-top: 1rem; font-size: .95rem; }
.errata del { color: inherit; }
.errata ins { text-decoration: none; font-weight: 600; }
.watermarked { position: relative; }
.watermarked::before {
  content: attr(data-watermark);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 clamp(2rem, 12vw, 6rem)/1 system-ui, sans-serif;
  color: currentColor;
  opacity: .07;
  transform: rotate(-24deg);
  pointer-events: none;
  z-index: 0;
}
.watermarked > * { position: relative; z-index: 1; }

/* chroma, in the two themes */
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt { color: #8250df; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd { color: #0a7d3f; }
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs { color: var(--muted); font-style: italic; }
.chroma .nf, .chroma .nx { color: #0550ae; }
.chroma .m, .chroma .mi, .chroma .mf { color: #953800; }
.chroma .err { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .chroma .k, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt { color: #d2a8ff; }
  .chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd { color: #7ee787; }
  .chroma .nf, .chroma .nx { color: #79c0ff; }
  .chroma .m, .chroma .mi, .chroma .mf { color: #ffa657; }
}

/* The reading page. A theme sets the variables; the reader can override
   the colours and the scale (R6.1). Everything here works without
   JavaScript and from a 320px viewport upward (R6.4, R6.6). */
:root {
  --bg: #fbfaf7;
  --ink: #1f1e1c;
  --accent: #8a3b12;
  --measure: 40rem;
  --font-body: Charter, Cambria, Georgia, serif;
  --font-heading: var(--font-body);
  --reader-scale: 100%;
  --muted: color-mix(in srgb, var(--ink) 62%, var(--bg));
  --rule: color-mix(in srgb, var(--ink) 20%, var(--bg));
  --banner: color-mix(in srgb, var(--accent) 18%, var(--bg));
  color-scheme: light dark;
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; font-size: var(--reader-scale); }
 *, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.125rem/1.65 var(--font-body);
  overflow-wrap: break-word;
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--bg);
  padding: .75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

.masthead, main, .colophon { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-top: 1.5rem;
}
.site-name { font: 700 1.25rem/1.2 var(--font-heading); color: var(--ink); text-decoration: none; }
main { padding-block: 2rem; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); margin: 0 0 1rem; }

.reader-controls > summary {
  cursor: pointer;
  font: .95rem/1 system-ui, sans-serif;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.reader-form {
  display: grid;
  gap: .75rem;
  margin-top: .5rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font: .95rem/1.4 system-ui, sans-serif;
}
.reader-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.reader-form legend { padding: 0; font-weight: 600; }
.reader-form label { display: grid; gap: .35rem; }
.reader-form fieldset label { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.reader-form input[type=color] { width: 4rem; height: 44px; padding: 2px; }
.reader-form input[type=range] { width: 100%; height: 44px; }
.reader-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.reader-form button {
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}
.reader-form button.secondary { background: transparent; color: var(--accent); }
.note { margin: 0; color: var(--muted); }

.staff-banner {
  margin: 0;
  padding: .6rem 1rem;
  background: var(--banner);
  color: var(--ink);
  font: .95rem/1.4 system-ui, sans-serif;
}
.colophon { color: var(--muted); font-size: .9rem; padding-bottom: 2rem; }
.colophon a { color: inherit; }

/* Comments (slice 5) */
.comments { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.comment { margin: 1.5rem 0; }
.comment p { margin: .35rem 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pictures (slice 6). A picture never overflows its column, and keeps the
   shape its width and height attributes declared. */
.reading img { max-width: 100%; height: auto; border-radius: 4px; }
.reading figure { margin: 2rem 0; }
.reading figure img { display: block; width: 100%; }
.reading figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font: .9rem/1.5 var(--font-body);
}

/* The feedback widget (R19.2) and the readers' idea list. */
details.feedback {
  max-width: var(--measure, 44rem);
  margin: 2rem auto 3rem;
  border-top: 1px solid currentColor;
  padding-top: .75rem;
  font-size: .95rem;
}
details.feedback summary { cursor: pointer; font-weight: 600; }
.feedback-form { display: grid; gap: .7rem; margin-top: .8rem; }
.feedback-form textarea, .feedback-form input, .feedback-form select {
  width: 100%;
  font: inherit;
  padding: .4rem;
}
.feedback-form label.row { display: flex; align-items: center; gap: .5rem; }
.feedback-form label.row input { width: auto; }
.feedback-form button { justify-self: start; padding: .4rem 1rem; font: inherit; }
.ideas-list { list-style: none; padding: 0; }
.ideas-list li { margin: 0 0 1.5rem; }
.ideas-list .votes { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ideas-list form.inline { display: inline; }