@import url("/website/reading-tokens.css");

/* Scoped reading-page stylesheet. Background copied from the existing homepage;
   only the existing isolated decorative-star module is started. */
:root {
  color-scheme: dark;
  --paper: #f4ecdc;
  --copper: #c08861;
  --rule: #f4ecdc40;
}
* { box-sizing: border-box; }
html {
  min-height: 100%;
  background:
    radial-gradient(ellipse 115% 42% at 54% 79%,rgb(99 50 92/.28) 0%,rgb(65 46 81/.16) 43%,transparent 76%),
    radial-gradient(ellipse 90% 50% at 22% 9%,rgb(45 67 93/.20) 0%,rgb(0 42 72/.08) 43%,transparent 76%),
    linear-gradient(180deg,#00243f 0%,#00243f 18%,#002a48 37%,#23223c 58%,#412e51 73%,#63325c 82%,#00243f 88%,#00243f 100%);
}
body {
  isolation: isolate;
  min-height: 100svh;
  background: transparent;
  margin: 0;
  color: var(--paper);
  font: 18px/1.65 var(--sp-reading-body);
  overflow-wrap: anywhere;
}
.page-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: layout paint; }
.sky-canvas { display: block; width: 100%; height: 100%; background: transparent; }
.mast, main, .page-footer {
  width: min(calc(100% - 40px), 76ch);
  margin-inline: auto;
}
.mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.brand { font: 400 1.45rem/1.3 var(--sp-reading-title); }
main { padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem); background: rgb(0 36 63 / .9); }
.page-footer { padding-block: 1.5rem 3rem; border-top: 1px solid var(--rule); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.skip { position: absolute; left: 1rem; top: -6rem; padding: .75rem 1rem; background: var(--paper); color: #00243f; z-index: 10; }
.skip:focus { top: 1rem; }
h1, h2, h3 {
  font-family: var(--sp-reading-title);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7vw, 3.8rem); margin: .4rem 0 1.4rem; letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); margin: 0 0 1.25rem; }
h3 { font-size: 1.4rem; margin: 1.6rem 0 .65rem; }
p, ul, ol, dl, figure { margin: 0 0 1.1rem; }
ul, ol { padding-inline-start: 1.25rem; }
li + li { margin-top: .5rem; }
.lead { font-size: 1.2rem; line-height: 1.5; }
.eyebrow { font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: #d0b49d; }
.section-index, .closing-links {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
  margin-block: 1.75rem;
}
.section-index a, .mast a, .closing-links a, .page-footer a { display: inline-block; padding-block: .5rem; min-height: 44px; }
section { margin-block: 3rem; padding-block-start: 2rem; border-top: 1px solid var(--rule); }
.introduction { margin: 0; padding: 0; border: 0; }
section, article, [id] { scroll-margin-top: 1.5rem; min-width: 0; }
.source-row {
  display: grid; grid-template-columns: 112px minmax(0,1fr);
  gap: 1.25rem; align-items: start; margin-block: 2rem;
}
.source-row > a { display: block; }
.source-row img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; }
.source-row h3 { margin-top: 0; }
.source-row p { margin-bottom: .7rem; }
.source-record { margin-block: 2rem; }
.source-record h3 { margin-bottom: .65rem; }
.science-sources dt { margin-top: 1.7rem; font-weight: 700; }
.science-sources dd { margin: .45rem 0 0; }
.boundary, .fine { font-size: .95rem; }
.fine { color: #e2d3c1; }
code { font-size: .9em; }
.revision { margin-top: 2rem; }
@media (max-width: 480px) {
  .mast, main, .page-footer { width: calc(100% - 32px); }
  .source-row { grid-template-columns: 1fr; gap: 1rem; }
  .source-row > a { width: 112px; }
  section { margin-block: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  html, body { background: #fff; color: #23223c; }
  .page-sky, .skip { display: none; }
  main { background: #fff; }
  .mast, main, .page-footer { width: 100%; max-width: none; }
  .eyebrow, .fine { color: #23223c; }
  h2, h3 { break-after: avoid; }
  .source-row { break-inside: avoid; }
}