/* The reading pages (About, Blog and its posts): the app's wordmark at the top left, the credit and
   the pages along the right edge as in the app, and one column of text. Light by default, the app's
   dark ground when the system asks for dark. */

:root {
  --ink: #0f1720;
  --ink-2: rgba(15, 23, 32, 0.66);
  --ink-3: rgba(15, 23, 32, 0.4);
  --ground: #f5f4f1;
  --rule: rgba(15, 23, 32, 0.12);
  --gap: 20px;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Plus Jakarta Sans', 'Instrument Sans', system-ui, sans-serif;

  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fff;
    --ink-2: rgba(255, 255, 255, 0.72);
    --ink-3: rgba(255, 255, 255, 0.45);
    --ground: #0f1720;
    --rule: rgba(255, 255, 255, 0.14);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  color: var(--ink);
  text-underline-offset: 2px;
}

/* ---------- the wordmark, as in the app ---------- */

.top {
  padding: 22px var(--gap) 0;
}

/* the icon and the wordmark lead home; the credit under them keeps its own link */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand-icon {
  display: flex;
  color: inherit;
}

.brand svg {
  flex: none;
  width: 50px;
  height: 50px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand-name {
  font: 800 24px/1 var(--display);
  letter-spacing: 0.1em;
  color: inherit;
  text-decoration: none;
}

.tagline {
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
}

/* as in the app: no underline, the handle's ink and weight already set it apart */
.tagline-by a {
  font-weight: 600;
  text-decoration: none;
}

/* ---------- the right edge, as in the app ---------- */

.madeby {
  position: fixed;
  right: 14px;
  top: 112px;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 12px;
  line-height: normal; /* as in the app */
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.madeby .sep {
  margin-inline: 0.5em; /* along the line, which runs down the edge */
}

/* the page you're on reads in the credit's grey, without a line under it */
.madeby a[aria-current='page'] {
  color: var(--ink-2);
  text-decoration: none;
}

/* ---------- the column ---------- */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px var(--gap) 120px;
}

.page h1 {
  margin: 0 0 16px;
  font: 700 40px/1.15 var(--display);
  letter-spacing: -0.01em;
}

.page h2 {
  margin: 48px 0 12px;
  font: 700 22px/1.3 var(--display);
}

.page p,
.page ul,
.page ol {
  margin: 0 0 16px;
}

.page ul,
.page ol {
  padding-left: 1.2em;
}

.page li {
  margin-bottom: 6px;
}

.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-2);
}

.meta {
  margin: 0 0 32px;
  font-size: 14px;
  color: var(--ink-3);
}

/* a call to open the app */
.cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- the blog's list ---------- */

.posts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.posts li {
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}

.posts a {
  font: 700 22px/1.3 var(--display);
  text-decoration: none;
}

.posts a:hover {
  text-decoration: underline;
}

.posts p {
  margin: 8px 0 0;
  color: var(--ink-2);
}

.posts time {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-3);
}

@media (max-width: 600px) {
  .top {
    padding-top: max(18px, env(safe-area-inset-top, 0px));
  }

  .brand svg {
    width: 40px;
    height: 40px;
  }

  .brand-name {
    font-size: 20px;
  }

  /* as in the app: the credit under the wordmark, and the edge holds the pages only */
  .tagline-text {
    display: none;
  }

  .madeby {
    top: max(22px, env(safe-area-inset-top, 0px));
    right: 10px;
  }

  .madeby-credit {
    display: none;
  }

  .page {
    padding-top: 40px;
    padding-right: 36px; /* clear of the pages along the edge */
  }

  .page h1 {
    font-size: 32px;
  }
}

@media (min-width: 601px) {
  .tagline-by {
    display: none;
  }
}