/* The stylesheet of the static reading pages under /r/. Values are the app's own: tokens.css
   (meadow), base.css and reader.css (paper sheet), with the night sheet for a dark system setting. */

@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/atkinson-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible'; src: url('/fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-variable-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --page: #f6f3ea;
  --surface: #ffffff;
  --surface-3: #f3efe4;
  --line: #e2dccd;
  --line-2: #d3cbb8;
  --ink: #1f2a1f;
  --ink-2: #3a4437;
  --ink-muted: #5b6357;
  --leaf: #3e7b3a;
  --leaf-2: #79a957;
  --leaf-deep: #2f6e3b;
  --leaf-wash: #e5eed8;
  --lake-deep: #356f8c;
  --sun: #e5ae3c;
  --sun-wash: #fbefcf;
  --clay: #b8662f;
  --on-leaf: #ffffff;
  --focus: #2f6e3b;
  --band-k: #d9677f;
  --band-12: #c98a13;
  --band-34: #3e7b3a;
  --band-5: #2f7196;
  --band-68: #6b5aa6;
  --band-9: #a95a29;
  --shadow-1: 0 1px 2px rgba(35, 45, 30, 0.06), 0 2px 6px rgba(35, 45, 30, 0.05);
  --shadow-2: 0 2px 4px rgba(35, 45, 30, 0.05), 0 10px 24px rgba(35, 45, 30, 0.1);
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --pill: 999px;
  --gutter: clamp(16px, 3.2vw, 36px);
  --reader-size: 20px;
  --reader-lh: 1.7;
  --reader-width: 70ch;
  --sheet: var(--surface);
  --sheet-ink: var(--ink);
  --sheet-muted: var(--ink-muted);
  --sheet-line: var(--line);
  --site: var(--leaf);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0c1627;
    --surface: #17223f;
    --surface-3: #22315a;
    --line: #2b3a64;
    --line-2: #3a4b7a;
    --ink: #eef1fb;
    --ink-2: #cfd6ee;
    --ink-muted: #a3aed0;
    --leaf: #7fd08a;
    --leaf-2: #a6e3a0;
    --leaf-deep: #3f9b58;
    --leaf-wash: #1d3a3a;
    --lake-deep: #8ab8f0;
    --sun: #f2c75c;
    --sun-wash: #3a3423;
    --clay: #f0a070;
    --on-leaf: #0b1426;
    --focus: #a6e3a0;
    --band-k: #f08aa2;
    --band-12: #f2c75c;
    --band-34: #7fd08a;
    --band-5: #7fb8f0;
    --band-68: #b7a6ff;
    --band-9: #f0a070;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.35);
    --sheet: #1c2033;
    --sheet-ink: #e8e9f3;
    --sheet-muted: #aab0cc;
    --sheet-line: #2e3452;
    color-scheme: dark;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 400px at 50% -120px, color-mix(in srgb, var(--site) 12%, transparent), transparent 70%)
      no-repeat,
    var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--leaf-deep);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: var(--sun-wash);
}

.reader-main {
  padding: clamp(14px, 3vw, 40px) var(--gutter) 40px;
}

.art {
  width: min(100%, calc(var(--reader-width) + 120px));
  box-sizing: border-box;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 54px) clamp(18px, 5vw, 64px) clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--sheet);
  color: var(--sheet-ink);
  border: 1px solid var(--sheet-line);
  box-shadow: var(--shadow-2);
}

.art-runhead {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--sheet-line);
}

.rh-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  font-size: 16px;
  color: var(--sheet-muted);
  text-decoration: none;
}

.rh-site:hover {
  color: var(--leaf-deep);
}

.rh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.pill.leaf {
  background: var(--leaf-wash);
  color: var(--leaf-deep);
}

.level {
  --band: var(--band-34);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--band) 14%, var(--surface));
  color: color-mix(in srgb, var(--band) 78%, var(--ink));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.level::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--band);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--band) 25%, transparent);
}

.level[data-band='K'] { --band: var(--band-k); }
.level[data-band='1-2'] { --band: var(--band-12); }
.level[data-band='3-4'] { --band: var(--band-34); }
.level[data-band='5'] { --band: var(--band-5); }
.level[data-band='6-8'] { --band: var(--band-68); }
.level[data-band='9+'] { --band: var(--band-9); }

.art-title {
  padding: 22px 0 6px;
  text-align: center;
}

.art-title h1 {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--sheet-ink);
  font-variation-settings: 'SOFT' 50, 'opsz' 96;
  text-wrap: balance;
}

.art-byline {
  margin-top: 14px;
  color: var(--sheet-muted);
  font-size: 15px;
}

.art-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.chip,
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  padding: 0 18px;
  background: var(--leaf-deep);
  border-color: var(--leaf-deep);
  color: var(--on-leaf);
  font-size: 16px;
}

.btn-primary:hover {
  background: var(--leaf);
  border-color: var(--leaf);
}

.chip:hover {
  border-color: var(--leaf-2);
  color: var(--leaf-deep);
}

.level-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 8px;
  margin: 0;
  padding: 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sheet-ink) 4%, var(--sheet));
  text-align: left;
}

.level-table div {
  display: grid;
  gap: 2px;
}

.level-table .wide {
  grid-column: 1 / -1;
}

.level-table dt {
  color: var(--sheet-muted);
  font-size: 14px;
}

.level-table dd {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.level-table dd .pill {
  margin: 2px 4px 2px 0;
}

.abstract {
  margin: 18px auto 0;
  max-width: var(--reader-width);
  padding: 16px 18px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sun) 12%, var(--sheet));
  font-size: 17px;
  line-height: 1.55;
}

.abstract p {
  margin: 0 0 12px;
}

.abstract .label,
.art-source .label {
  display: block;
  margin-bottom: 4px;
  color: var(--clay);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-body-wrap {
  margin: 26px auto 0;
  max-width: var(--reader-width);
  font-size: var(--reader-size);
  line-height: var(--reader-lh);
}

.art-body {
  font-family: var(--font-ui);
  color: var(--sheet-ink);
  overflow-wrap: break-word;
}

.band-k .art-body-wrap {
  font-size: calc(var(--reader-size) + 5px);
  line-height: calc(var(--reader-lh) + 0.1);
}

.art-body .blk > p,
.art-body p.blk {
  margin: 0 0 1em;
}

.art-body h1,
.art-body h2,
.art-body h3,
.art-body h4 {
  margin: 1.4em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sheet-ink);
}

.art-body h1 { font-size: 1.6em; }
.art-body h2 { font-size: 1.35em; }
.art-body h3 { font-size: 1.15em; }

.art-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2em auto;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}

.art-body figure {
  margin: 1.4em 0;
}

.art-body figcaption {
  margin-top: -0.4em;
  color: var(--sheet-muted);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.art-body blockquote {
  margin: 1.2em 0;
  padding: 0.4em 0 0.4em 1.1em;
  border-left: 4px solid var(--leaf-2);
  color: var(--sheet-ink);
  font-style: italic;
}

.art-body ul,
.art-body ol {
  padding-left: 1.4em;
  margin: 0 0 1em;
}

.art-body li {
  margin-bottom: 0.35em;
}

.art-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.85em;
}

.art-body td,
.art-body th {
  border: 1px solid var(--sheet-line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.art-body pre {
  white-space: pre-wrap;
}

.art-body table:not(:has(th)),
.art-body table:not(:has(th)) tbody,
.art-body table:not(:has(th)) thead,
.art-body table:not(:has(th)) tr,
.art-body table:not(:has(th)) td {
  display: block;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.art-body table:not(:has(th)) td + td {
  margin-top: 0.4em;
}

.art-body table:not(:has(th)) tr {
  margin-bottom: 0.5em;
}

.art-body .in-link {
  color: var(--lake-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--lake-deep) 40%, transparent);
  text-underline-offset: 3px;
}

.art-body .words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0.4em 0 1.2em;
}

.art-end {
  margin: 34px auto 0;
  max-width: var(--reader-width);
  display: grid;
  gap: 18px;
}

.art-source {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sheet-ink) 4%, var(--sheet));
  color: var(--sheet-muted);
  font-size: 15px;
  line-height: 1.5;
}

.art-credits summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--sheet-muted);
  font-weight: 700;
  font-size: 15px;
}

.art-credits ul {
  margin: 0;
  padding-left: 20px;
  color: var(--sheet-muted);
  font-size: 15px;
}

/* the index of every reading */
.idx-intro {
  max-width: var(--reader-width);
  margin: 18px auto 0;
  color: var(--sheet-ink);
  font-size: 17px;
  text-align: left;
}

.idx-intro p {
  margin: 0 0 10px;
}

.idx-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.idx-jump a {
  text-decoration: none;
}

.idx-source {
  margin-top: 26px;
  padding-top: 40px;
  border-top: 1px dashed var(--sheet-line);
}

.idx-source h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}

.idx-source h2 .pill {
  font-family: var(--font-ui);
}

.idx-source > p {
  margin: 0 0 10px;
  color: var(--sheet-muted);
  font-size: 15px;
}

.idx-list {
  columns: 3 240px;
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.idx-list li {
  break-inside: avoid;
  padding: 3px 0;
  font-size: 16px;
  line-height: 1.35;
}

.idx-list .band {
  color: var(--sheet-muted);
  font-size: 14px;
  white-space: nowrap;
}

.art:has(.idx-source) {
  width: min(100%, 1160px);
}