@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(/fonts/fraunces-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
  src: url(/fonts/fraunces-latin-wght-italic.woff2) format('woff2');
}

/* Cyanotype: Prussian-blue ground, paper-white glyphs. */
:root {
  --ground: #163e6e;
  --ground-deep: #0e2c52;
  --paper: #f3f1ea;
  --wash: #9db7d4;
  --glyph-rgb: 243 241 234;
}

/* Smoke: near-black ground, gold glyphs, after the pretext fluid-smoke demo. */
.theme-smoke {
  --ground: #06060a;
  --ground-deep: #06060a;
  --paper: rgb(196 163 90);
  --glyph-rgb: 196 163 90;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 40%, var(--ground) 0%, var(--ground-deep) 100%) fixed, var(--ground-deep);
  color: var(--paper);
  font-family: Fraunces, Georgia, serif;
  overflow: hidden;
  cursor: crosshair;
}

#stage { position: fixed; inset: 0; overflow: hidden; }

/* Glyph rows: proportional ASCII, one div per row. */
.row {
  display: block;
  white-space: pre;
  font-kerning: none;
  overflow: hidden;
}
.w2 { font-weight: 200; } .w4 { font-weight: 400; } .w6 { font-weight: 600; } .w9 { font-weight: 900; }
.i { font-style: italic; }
.a1 { color: rgb(var(--glyph-rgb) / .16); } .a2 { color: rgb(var(--glyph-rgb) / .32); }
.a3 { color: rgb(var(--glyph-rgb) / .48); } .a4 { color: rgb(var(--glyph-rgb) / .66); }
.a5 { color: rgb(var(--glyph-rgb) / .84); } .a6 { color: rgb(var(--glyph-rgb) / 1); }

/* Flowed text lines, positioned absolutely per slot. */
.ln {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow-wrap: break-word;
  text-align: justify;
  text-align-last: justify;
  font-kerning: normal;
}
.ln.lit { color: var(--paper); text-align: left; text-align-last: left; text-shadow: 0 0 6px rgb(243 241 234 / .35); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}