/* The public page.
 *
 * A separate sheet rather than more rules in styles.css, because that file is
 * about an app: fixed bars, screens that slide, a tab strip pinned to the
 * bottom. None of that applies to a page somebody reads once and scrolls.
 *
 * The colours are not repeated here. They come from the custom properties on
 * :root in styles.css, so this page follows the theme without a single value
 * being written twice — and it keeps following it when the theme changes.
 */

.about {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--label);
}

/* ------------------------------------------------------------------ top -- */

.about-top {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--separator);
}

.about-brand {
  margin: 0 0 28px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--label-tertiary);
}

.about-brand span {
  color: var(--accent);
}

.about h1 {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Wider measure than the body text and a size between the two: it is the one
   paragraph that has to be read by somebody deciding whether to read the rest. */
.about-lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--label-secondary);
}

/* ---------------------------------------------------------------- blocks -- */

.about section {
  padding: 40px 0 8px;
  border-bottom: 1px solid var(--separator);
}

.about h2 {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}

.about p {
  margin: 0 0 16px;
  line-height: 1.6;
  color: var(--label-secondary);
}

/* A definition list because that is what this is: a name and what it means.
   The markup says so, which is the half of it a screen reader can hear. */
.about-list {
  margin: 0;
}

.about-list dt {
  margin-top: 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--label);
}

.about-list dt:first-child {
  margin-top: 0;
}

.about-list dd {
  margin: 6px 0 0;
  line-height: 1.6;
  color: var(--label-secondary);
}

.about-note {
  color: var(--label-tertiary);
}

/* ----------------------------------------------------------------- doing -- */

.about-go {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

.about-go:active {
  opacity: 0.8;
}

.about-foot {
  padding-top: 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--label-tertiary);
}

.about-foot p {
  margin: 0;
}

/* Narrow enough that the heading has to give way, and it is the only thing on
   the page big enough to need to. */
@media (max-width: 30rem) {
  .about h1 {
    font-size: 32px;
  }

  .about-top {
    padding-top: 44px;
  }
}