/* The written pages.
 *
 * Everything the essays need and nothing else — no framework, no build step,
 * no bundle. These pages load one small stylesheet and no JavaScript at all,
 * which is what makes them fast and what makes them legible to anything that
 * cannot run an app.
 *
 * The look takes the editor's greys, its purple, and its idea about surfaces —
 * the welcome screen puts its content on white cards over a tinted ground, and
 * so does this. The ground is a shade with some colour in it rather than
 * almost-white, because a white page on a white ground is a page with no
 * edges: nothing on it looks placed, it looks left there.
 *
 * So: the essay is an object on a background. The bar sits above it and stays.
 * Everything that is not the essay — where to go next, the small print — is
 * outside the card, quieter, on the ground.
 *
 * One rule about faces, and it decides every question of this kind: the writing
 * is set in a serif and the product is not. These pages are not a screen of the
 * app with words in it — they are what the domain is, and they are read rather
 * than operated. So the essay is Georgia, headings and all, and so are the
 * titles and blurbs in the contents and the read-next cards, because those are
 * the writing listed rather than furniture. The furniture — the bar, the
 * numbers, the labels, the button, the small print — stays in the interface
 * face the editor uses, so the two products still look related.
 */

:root {
  color-scheme: light dark;

  /* The reading face. Georgia everywhere it exists, which is every desktop and
     most phones, and a plain serif where it does not — no webfont, because a
     page that loads nothing is the whole point of these being static. */
  --prose:
    Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    "Times New Roman", serif;

  --ink: #101828;
  /* Darker than the grey the sans was set in. A serif puts less ink on the page
     per letter, and the same grey that read as quiet in the interface reads as
     faint in a paragraph of it. */
  --body: #3b465a;
  --lead: #344054;
  --quiet: #667085;
  --faint: #98a2b3;
  --line: #e7e9ef;
  --rule: #d0d5dd;
  --purple: #6941c6;
  --purple-deep: #53389e;
  --on-purple: #ffffff;
  /* The purple, thinned out until a whole panel can be made of it. */
  --wash: #f9f5ff;
  --wash-line: #e9d7fe;
  --page: #edeff5;
  --card: #ffffff;
  /* Translucent, for the bar the page scrolls under. */
  --veil: rgba(255, 255, 255, 0.82);
  /* Close and tight, then wide and faint: an edge, and the light around it. */
  --lift:
    0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 34px -14px rgba(16, 24, 40, 0.12);
}

/* The same pages, read at night.
   Not an inversion: the greys are re-derived rather than flipped, and the
   purple is lightened, because #6941c6 on near-black is a link nobody can
   read. The ground goes darker than the card here — the card is still the lit
   thing — which is the same arrangement as the day, upside down. Nothing here
   is a toggle: the machine has already been told which one its owner wants,
   and asking again is one more thing to get wrong. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f4f7;
    --body: #d3dae4;
    --lead: #e4e7ec;
    --quiet: #98a2b3;
    --faint: #7c879a;
    --line: #242936;
    --rule: #39414f;
    --purple: #b692f6;
    --purple-deep: #d6bbfb;
    --on-purple: #1b1330;
    --wash: #1a1630;
    --wash-line: #322a55;
    --page: #0b0d13;
    --card: #14181f;
    --veil: rgba(20, 24, 31, 0.82);
    --lift:
      0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -18px rgba(0, 0, 0, 0.65);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--wash-line);
  color: var(--ink);
}

/* One ring, everywhere, for the reader who is on the keyboard. */
a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 3px;
}

/* The bar, matching the app's, and staying put.
   It follows the page down because every one of these is long enough that the
   way out would otherwise be a scroll away in both directions. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  /* The spine. Everything on these pages is a hairline on a pale ground, and
     with nothing heavier anywhere the page had no edge to start from — it
     just faded up out of the background. One rule in the ink of the text,
     across the top, and because the bar is sticky it stays there as the
     masthead it belongs to. It is the only heavy stroke on the site. */
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-bar {
    background: var(--veil);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
  }
}
/* The masthead lines up with the card below it rather than with the window,
   so the page has one left edge instead of two. */
.site-bar-in {
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
  padding: 13px 24px;
}
.site-mark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-mark:hover {
  color: var(--purple);
}
.site-tag {
  flex: 1;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--faint);
}

/* Where else to go, said at the top rather than only at the bottom. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-nav a {
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--quiet);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s ease, background 0.14s ease;
}
.site-nav a:hover {
  color: var(--purple);
  background: var(--wash);
}
/* The editor is the thing all of this is about, so in the bar it is the one
   item that looks like it can be pressed. */
.site-nav .site-nav-go {
  background: var(--purple);
  color: var(--on-purple);
}
.site-nav .site-nav-go:hover {
  background: var(--purple-deep);
  color: var(--on-purple);
}

/* Narrower than it was, because the serif sets wider than the sans did and the
   line is measured in characters rather than pixels: about sixty-six of them
   across the card, which is where a paragraph stops needing a finger to keep
   your place in it. */
.site-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 8px;
}

/* Up, from a page somebody arrived at directly */
.site-kicker {
  margin: 0 0 14px;
}
.site-kicker a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--quiet);
  text-decoration: none;
}
.site-kicker a::before {
  content: "←";
  font-size: 13px;
  letter-spacing: 0;
  transition: transform 0.14s ease;
}
.site-kicker a:hover {
  color: var(--purple);
}
.site-kicker a:hover::before {
  transform: translateX(-2px);
}

/* --- The essay, as an object on the page --- */

.site-essay {
  padding: 54px 64px 58px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--lift);
}

/* The prose, named once. Set on the elements rather than on the card, because
   the contents rows and the read-next titles live inside this article too and
   they are interface, not prose. */
.site-essay h1,
.site-essay h2,
.site-essay h3,
.site-essay p,
.site-essay blockquote,
.site-essay ul:not(.site-contents) li,
.site-essay ol:not(.site-contents) li {
  font-family: var(--prose);
  /* Grey antialiasing thins a serif at reading sizes on a Mac in a way it does
     not thin the sans in the bar. This is the one place that asks for the
     subpixel rendering the rest of the page is happy without. */
  -webkit-font-smoothing: subpixel-antialiased;
}

.site-essay h1 {
  margin: 0 0 20px;
  font-size: 40px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* A rule above every section. In an essay this long the headings are the only
   map there is, and a line makes one look like the start of something rather
   than a bold sentence. */
.site-essay h2 {
  margin: 46px 0 13px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 23px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}
/* Vocabulary entries. A heading each, so every term has a URL — and a mark in
   the margin, so a page that is nothing but definitions reads as a list of
   them instead of as prose in small pieces. */
.site-essay h3 {
  position: relative;
  margin: 28px 0 5px;
  padding-left: 15px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--ink);
}
.site-essay h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 3px;
  border-radius: 2px;
  background: var(--purple);
}
/* The bar holds these clear of a bar that is following the reader down. */
.site-essay h2,
.site-essay h3 {
  scroll-margin-top: 78px;
}

.site-essay p {
  margin: 0 0 16px;
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--body);
  text-wrap: pretty;
}
/* The lead, whichever way it arrives: first paragraph, or marked up */
.site-essay > p:first-of-type,
.site-lead {
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--lead);
}

/* A link in the prose is the prose, in colour and underlined — no extra weight,
   which a serif with two of them cannot give without shouting. */
.site-essay a {
  color: var(--purple);
  text-decoration-color: var(--wash-line);
  text-underline-offset: 2.5px;
}
.site-essay a:hover {
  text-decoration-color: currentColor;
}
.site-essay em {
  font-style: italic;
}
.site-essay strong {
  font-weight: 600;
  color: var(--ink);
}
.site-essay code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--wash);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--lead);
}

/* Nothing in content/ uses these yet. They are here so that the day somebody
   writes a list or quotes somebody, the page does not have to be styled in a
   hurry to publish it. */
.site-essay ul:not(.site-contents),
.site-essay ol:not(.site-contents) {
  margin: 0 0 15px;
  padding-left: 22px;
  color: var(--body);
}
.site-essay ul:not(.site-contents) li,
.site-essay ol:not(.site-contents) li {
  margin-bottom: 8px;
  font-size: 17.5px;
  line-height: 1.66;
}
.site-essay ul:not(.site-contents) li::marker {
  color: var(--rule);
}
.site-essay ol:not(.site-contents) li::marker {
  color: var(--faint);
  font-size: 0.9em;
}
.site-essay blockquote {
  margin: 22px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--wash-line);
}
.site-essay blockquote p {
  font-size: 18.5px;
  color: var(--lead);
}
.site-essay blockquote p:last-child {
  margin-bottom: 0;
}
.site-essay hr {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.site-essay img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Contents, numbered, because these have an order worth following. Rows rather
   than paragraphs: the whole line lights up, so it is obvious there are seven
   things here and that each one is a door. */
.site-contents {
  counter-reset: piece;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.site-contents li {
  position: relative;
  margin: 0;
  padding: 16px 14px 16px 52px;
  border-radius: 10px;
  border-top: 1px solid var(--line);
  counter-increment: piece;
  transition: background 0.14s ease;
}
.site-contents li:first-child {
  border-top: 0;
}
.site-contents li:hover {
  background: var(--wash);
}
.site-contents li::before {
  content: counter(piece);
  position: absolute;
  left: 12px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--page);
  font-size: 12px;
  font-weight: 600;
  color: var(--quiet);
}
.site-contents li:hover::before {
  border-color: var(--wash-line);
  color: var(--purple);
}

/* A title and its line of description are the writing, not the furniture around
   it, so they keep the reading face in both places they are listed — here and
   in the read-next cards. The number, the label above them and everything else
   in the row stays interface. */
.site-contents a,
.site-contents span,
/* The way to the rest, under the one next thing. Quiet: the index is where
   somebody goes when the sequence is not what they want. */
.site-next-all {
  margin: 14px 0 0;
  font-size: 14px;
}
.site-next-all a {
  color: var(--quiet);
  font-weight: 500;
}
.site-next-all a:hover {
  color: var(--purple);
}

.site-next a,
.site-next span {
  font-family: var(--prose);
}
.site-contents a,
.site-next a {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--purple);
  text-decoration: none;
}
/* The link is the row: everything from the number to the right-hand edge. */
.site-contents a {
  display: block;
}
.site-contents a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.site-next a {
  display: block;
}
.site-contents a:hover,
.site-next a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-contents span,
.site-next span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--quiet);
}

/* --- Off the card: where to go when the reading is done --- */

/* The question at the end of the reading. Quiet, and in the reading face,
   because it is the last sentence of the piece rather than an appeal stuck to
   the bottom of it — and set above the panel that asks for a click, so the
   thing being asked for is a reply and not a second button. */
.site-ask {
  max-width: 62ch;
  margin: 26px 0 0;
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--quiet);
}
.site-ask a {
  color: var(--purple);
  text-decoration-color: var(--wash-line);
  text-underline-offset: 2.5px;
}
.site-ask a:hover {
  text-decoration-color: currentColor;
}

/* Back to the thing the writing is about. The one panel on the page with
   colour in it, because it is the one thing on the page to do. */
.site-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--wash);
  border: 1px solid var(--wash-line);
  border-radius: 12px;
}
.site-cta span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--quiet);
}
.site-button {
  flex: none;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--purple);
  color: var(--on-purple);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s ease;
}
.site-button:hover {
  background: var(--purple-deep);
}

/* Three ways on, side by side, so the choice is one glance instead of a list */
.site-next {
  margin-top: 34px;
}
.site-next h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.site-next ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-next li {
  margin: 0;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease,
    transform 0.14s ease;
}
.site-next li:hover {
  border-color: var(--wash-line);
  box-shadow: var(--lift);
  transform: translateY(-1px);
}

/* Every page reachable from every page, for readers and crawlers alike */
.site-foot {
  max-width: 820px;
  margin: 44px auto 0;
  padding: 26px 24px 64px;
  border-top: 1px solid var(--rule);
}
.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.site-foot a {
  font-size: 13px;
  color: var(--quiet);
  text-decoration: none;
}
.site-foot a:hover {
  color: var(--purple);
  text-decoration: underline;
}
.site-foot p {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--faint);
  max-width: 62ch;
}
/* The notice is one line of separated items, so it is allowed the full width
   rather than the reading measure the sentence above it keeps. */
.site-foot .site-small {
  max-width: none;
}
.site-foot .site-small a {
  font-size: inherit;
  color: var(--quiet);
}

@media (max-width: 760px) {
  .site-next ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .site-bar-in {
    flex-wrap: wrap;
    padding: 11px 18px;
  }
  .site-tag {
    display: none;
  }
  .site-main {
    padding: 20px 14px 8px;
  }
  /* Full width on a phone, and the card edges go with it: at this size a
     rounded box is a stripe of background down each side and nothing else. */
  .site-essay {
    padding: 34px 22px 38px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 0 -14px;
  }
  .site-essay h1 {
    font-size: 30px;
  }
  .site-essay > p:first-of-type,
  .site-lead {
    font-size: 18.5px;
  }
  .site-essay p,
  .site-essay ul:not(.site-contents) li,
  .site-essay ol:not(.site-contents) li {
    font-size: 17px;
  }
  .site-essay h2 {
    font-size: 21px;
    margin-top: 38px;
    padding-top: 24px;
  }
  .site-essay h3 {
    font-size: 17px;
  }
  .site-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 0;
  }
  .site-contents li {
    padding: 14px 4px 14px 44px;
  }
  .site-contents li::before {
    left: 6px;
  }
  .site-foot {
    padding: 22px 18px 52px;
  }
}

/* Whoever asked for less movement gets none of it. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
  .site-next li:hover {
    transform: none;
  }
}

/* On paper there is no bar to press and nowhere to go next, so the essay is
   the only thing that prints, and it prints without its box. */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .site-bar,
  .site-kicker,
  .site-cta,
  .site-next,
  .site-foot nav {
    display: none;
  }
  .site-main {
    max-width: none;
    padding: 0;
  }
  .site-essay {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-essay p,
  .site-essay h2,
  .site-essay h3 {
    color: #000;
  }
  .site-essay a {
    color: #000;
  }
  .site-foot {
    border-top: 1px solid #ccc;
    margin-top: 24px;
  }
}