@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("/_/fonts/OpenSans.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("/_/fonts/OpenSans-Italic.ttf") format("truetype"); }
:root {
  --font: "Open Sans", sans-serif;
  --size: 19.8px;
  --leading: 1.634;
  --space: calc(var(--size) * 0);
  --blank: calc(var(--size) * 1.634);
  --indent: 2ch;
  --measure: 54ch;
  --gutter: 20px;
  color-scheme: light dark;
  --bg: #EBEBEB;
  --text: #686A6A;
  --heading: #414141;
  --accent: #5AA0FF;
  --code: #FF2D55;
  --quote: #9169C5;
  --markup: #A1AFFC;
  --selection: #B3D7FF;
  --muted: #AAAAAA;
  --rule: #CACBCB;
  --surface: #DEDEDE;
}
@media (prefers-color-scheme: dark) {
  :root {
  --bg: #171717;
  --text: #A7A7A7;
  --heading: #EDEDED;
  --accent: #5AA0FF;
  --code: #FF375F;
  --quote: #9A579B;
  --markup: #6C60AC;
  --selection: #345981;
  --muted: #5F5F5F;
  --rule: #3B3B3B;
  --surface: #252525;
  }
}
@media (max-width: 600px) {
  :root { --size: 17.82px; --gutter: 18px; }
}

/* writy.net's page: the writer's Writy editor made a reading page. Above this, render.py sets :root
   from the bundle's look (its font, size, line, indent, column and colors); everything below is in
   those terms, so each site is set as its writer's page is. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size);
  line-height: var(--leading);
  font-kerning: normal;
  overflow-wrap: break-word;
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 1;
  padding: 8px 12px; border-radius: 4px;
  background: var(--heading); color: var(--bg);
  font-size: 0.8em; line-height: 1.4;
}
.skip:focus { top: 8px; }

.hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* One column, the writer's measure, in characters of the body text. */
.frame { width: min(var(--measure), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* The site's name, then its sections and pages, as Writy's pane 2 lists groups before sheets. */
header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.4em 1.6em;
  padding: 2.6em 0 2.4em;
  font-size: 0.8em; line-height: 1.5;
}
header.site .name { color: var(--heading); font-weight: 700; text-decoration: none; }
header.site .tagline { margin: 0.1em 0 0; }
header.site ul { display: flex; flex-wrap: wrap; gap: 0.3em 1.1em; margin: 0; padding: 0; list-style: none; }
header.site nav a { color: var(--text); text-decoration: none; }
header.site a:hover, header.site [aria-current] { color: var(--heading); }
header.site nav [aria-current] { text-decoration: underline; text-decoration-color: var(--markup); }

footer.site {
  padding: 4.5em 0 3em;
  font-size: 0.8em; line-height: 1.5;
}
footer.site p { margin: 0; }
footer.site a { color: inherit; }

/* The text, as Writy sets it: every paragraph indented, a blank line's room kept where the sheet has
   one, headings at Writy's sizes, its marks' color where a mark stays (list markers, rules, notes). */
.text p { margin: 0 0 var(--space); text-indent: var(--indent); }
.text .gap { margin-bottom: calc(var(--space) + var(--blank)); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space);
  color: var(--heading); font-weight: 700; line-height: var(--leading);
}
.l1 { font-size: 1.8em; }
.l2 { font-size: 1.5em; }
.l3 { font-size: 1.3em; }
.l4 { font-size: 1.15em; }
.l5 { font-size: 1.05em; }
.l6 { font-size: 1em; }

blockquote {
  margin: 0 0 var(--space); padding-left: 1.4ch;
  border-left: 2px solid var(--markup);
  color: var(--quote);
}
.text blockquote p { text-indent: 0; }

ul, ol { margin: 0 0 var(--space); padding-left: 3.4ch; }
li > ul, li > ol { margin: 0; padding-left: 2.4ch; }
li { padding-left: 0.3ch; }
li::marker { color: var(--markup); }

code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.94em; color: var(--code); }
pre { margin: 0 0 var(--space); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--leading); }
pre code { font-size: 1em; }

hr {
  margin: 0 0 var(--space); border: 0; height: auto;
  color: var(--markup); text-align: center; line-height: var(--leading);
}
hr::before { content: "* * *"; letter-spacing: 0.4em; }

figure { margin: 0 0 var(--space); }
.picture img {
  display: block; margin-inline: auto;
  max-width: 100%; max-height: 420px; width: auto; height: auto;
}

/* A video stays where it's hosted, and nothing loads from there until the reader asks. */
.video .play {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35em;
  aspect-ratio: 16 / 9; padding: 1em; border-radius: 6px;
  background: var(--surface); color: var(--heading);
  text-align: center; text-decoration: none; line-height: 1.3;
}
.video .glyph { font-size: 2em; line-height: 1; color: var(--accent); }
.video .host { font-size: 0.75em; color: var(--muted); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }

sup.ref { font-size: 0.7em; line-height: 0; }
sup.ref a { padding: 0 0.1em; color: var(--markup); text-decoration: none; }
.footnotes {
  margin-top: var(--blank); padding-top: calc(var(--blank) / 2);
  border-top: 1px solid var(--rule);
  font-size: 0.85em;
}
.footnotes ol { margin: 0; padding-left: 2.6ch; }
.footnotes li::marker { color: var(--markup); }
.footnotes .back { color: var(--markup); text-decoration: none; }

/* Pages and posts. */
.entry > header { margin-bottom: var(--blank); }
.entry h1 { margin: 0; font-size: 1.6em; }   /* a title, as Export's EPUB sets a chapter's */
.meta { margin: 0; font-size: 0.8em; line-height: 1.5; }
.meta a { color: inherit; text-decoration: none; }
.meta a:hover { color: var(--heading); }
.entry h1 + .meta { margin-top: 0.3em; }

.index { margin-bottom: var(--blank); }
.index h1 { margin: 0; font-size: 1.6em; }

.posts { margin: 0; padding: 0; list-style: none; }
.posts > li { margin: 0 0 calc(var(--blank) * 1.6); padding: 0; }
.posts h2 { margin: 0; font-size: 1.3em; }
.posts h2 a { color: var(--heading); text-decoration: none; }
.posts h2 a:hover { color: var(--accent); }
.posts h2 + .meta { margin-top: 0.2em; }
.excerpt { margin: 0.35em 0 0; }
.note > .meta { margin-bottom: 0.35em; }

.series {
  display: flex; justify-content: space-between; gap: 1em;
  margin-top: calc(var(--blank) * 1.5);
  font-size: 0.8em; line-height: 1.5;
}
.series a { color: var(--text); text-decoration: none; }
.series a:hover { color: var(--heading); }
.series .next { margin-left: auto; text-align: right; }

/* A list of posts in a page's text (CONVENTIONS.md › Lists of posts), as the first page lists them. */
.text .posts { margin: 0 0 var(--space); }
.text .posts .meta, .text .posts .excerpt { text-indent: 0; }
.text .posts > li:last-child { margin-bottom: 0; }

.contents h2 { margin: var(--blank) 0 0.3em; font-size: 1.15em; }
.contents ul { margin: 0; }