/*
  The website's one stylesheet. Colors are the app's Paper theme, and the
  Night theme when the device is in dark mode (Palette.paper and
  Palette.night in the app's Palette.swift). Type is the app's:
  Literata for reading, Instrument Sans for small labels, both self-hosted
  subsets made by website/make_assets.py.
*/

@font-face {
  font-family: "Literata";
  src: url("fonts/literata.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --page: #F7F2E8;
  --surface: #EFE8DA;
  --ink: #211D18;
  --muted: #5F574D;
  --rubric: #A22A1E;
  --accent: #1D5B60;
  --rule: #D8CEBD;
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Avenir Next", sans-serif;
  --measure: 36rem;
  --gutter: 1.25rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1A1917;
    --surface: #24221F;
    --ink: #E7E0D4;
    --muted: #A89F92;
    --rubric: #E27C6A;
    --accent: #7BBAB5;
    --rule: #37332E;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 48rem) {
  :root { --gutter: 2.5rem; }
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.875rem;
  background: var(--ink);
  color: var(--page);
  font: 600 0.9375rem/1.2 var(--sans);
}
.skip:focus { top: 0.75rem; }

main { flex: 1 0 auto; }

/* ------------------------------------------------------------ masthead */

.masthead { border-bottom: 1px solid var(--rule); }
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark img { display: block; border-radius: 22%; }
.masthead nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead nav a {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--muted);
  font: 600 0.8125rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--rubric);
}

/* ------------------------------------------------------------ type */

h1, h2, h3 {
  margin: 0;
  font-weight: 520;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.08;
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.18;
}
h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 600;
}
p, ul, ol, dl, table { margin: 0; }
p + p, p + ul, ul + p, h2 + p, h2 + ul, h3 + p { margin-top: 0.875em; }

.label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0 0 0.875rem;
  color: var(--accent);
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pilcrow {
  color: var(--rubric);
  font: 500 1.35em/1 var(--serif);
  letter-spacing: 0;
}
.lede {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.55;
}
@media (min-width: 48rem) {
  .lede { font-size: 1.3125rem; }
}
.availability {
  margin-top: 1.25rem;
  color: var(--muted);
  font: 500 0.9375rem/1.45 var(--sans);
}
.muted { color: var(--muted); }

/* ------------------------------------------------------------ home page */

.opening {
  display: grid;
  gap: 2.5rem;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 56rem) {
  .opening {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: end;
    gap: 4rem;
    padding-top: 5rem;
    padding-bottom: 4.5rem;
  }
}

.chapter {
  display: grid;
  gap: 0 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2.75rem;
  border-top: 1px solid var(--rule);
}
.chapter .body { max-width: var(--measure); }
.chapter .screen { margin-top: 2rem; }
/* Text and screenshot side by side. The screenshot column is at least 17rem
   (and at most the .screen width), so the small type in a capture stays
   readable; the label sits above the text until there is room for its own
   column. */
@media (min-width: 60rem) {
  .chapter {
    grid-template-columns: minmax(0, var(--measure)) minmax(17rem, 21rem);
    /* A tall screenshot spanning both rows stretches the second row only, so
       the label stays right above the text. */
    grid-template-rows: auto 1fr;
    padding-top: 3.5rem;
    padding-bottom: 3.75rem;
  }
  .chapter .label { grid-column: 1; grid-row: 1; }
  .chapter .body { grid-column: 1; grid-row: 2; }
  .chapter .screen { grid-column: 2; grid-row: 1 / span 2; margin-top: 0.5rem; }
}
@media (min-width: 75rem) {
  .chapter { grid-template-columns: 10rem minmax(0, var(--measure)) minmax(17rem, 21rem); }
  .chapter .label { grid-row: auto; margin-top: 0.75rem; }
  .chapter .body { grid-column: 2; grid-row: auto; }
  .chapter .screen { grid-column: 3; }
}

.screen { margin: 0; max-width: 21rem; }
.screen img {
  display: block;
  width: 100%;
  height: auto;
  /* The phone's screen corners: 12.5% of its width, in both directions. */
  border-radius: 12.5% / 5.75%;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.screen figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font: 500 0.8125rem/1.45 var(--sans);
}
@media (min-width: 56rem) {
  .opening .screen { max-width: none; }
}

.facts {
  width: 100%;
  max-width: var(--measure);
  margin-top: 2rem;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.facts caption {
  padding-bottom: 0.75rem;
  color: var(--muted);
  font: 500 0.875rem/1.45 var(--sans);
  text-align: start;
}
.facts th, .facts td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: start;
  vertical-align: baseline;
}
.facts thead th {
  color: var(--muted);
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.facts tbody th { font-weight: 400; padding-right: 1rem; }
.facts td { width: 4.5rem; text-align: end; }
@media (min-width: 48rem) {
  .facts td { width: 7.5rem; }
}
.facts thead th:not(:first-child) { text-align: end; }

/* ------------------------------------------------------------ article pages */

.article {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 60rem) {
  .article {
    display: grid;
    grid-template-columns: 10rem minmax(0, var(--measure));
    gap: 0 3rem;
    padding-top: 4.5rem;
  }
  .article > * { grid-column: 2; }
  .article > .label { grid-column: 1; margin-top: 1.25rem; }
}
.article h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }
.article .lede { margin-bottom: 0.5rem; }
.article section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.article section h2 { font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5rem); }
.article ul, .article ol { padding-left: 1.25em; }
.article li + li { margin-top: 0.4em; }
.article li::marker { color: var(--muted); }

.contact {
  margin-top: 2rem;
  padding: 1.25rem 0 1.25rem 1.25rem;
  border-left: 3px solid var(--rubric);
}
.contact p { max-width: var(--measure); }
.contact .address {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  font-weight: 520;
  overflow-wrap: anywhere;
}

.contents {
  margin-top: 2.5rem;
  padding-left: 0;
  list-style: none;
  columns: 1;
}
.article .contents { padding-left: 0; }
.contents li { break-inside: avoid; }
.contents li + li { margin-top: 0.35rem; }
.contents a { font: 500 0.9375rem/1.45 var(--sans); }
@media (min-width: 48rem) {
  .contents { columns: 2; column-gap: 2.5rem; }
}

.steps-label { font: 600 0.75rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.meta {
  margin-top: 1rem;
  color: var(--muted);
  font: 500 0.9375rem/1.45 var(--sans);
}

/* ------------------------------------------------------------ footer */

.colophon {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.colophon-grid {
  display: grid;
  gap: 1rem 3rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 48rem) {
  .colophon-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .fineprint { grid-column: 1 / -1; }
}
.colophon-contact { max-width: var(--measure); overflow-wrap: anywhere; }
.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  list-style: none;
  font: 600 0.8125rem/1.6 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.colophon-links a { color: var(--ink); text-decoration: none; }
.colophon-links a:hover { text-decoration: underline; }
.fineprint {
  max-width: 48rem;
  color: var(--muted);
  font: 400 0.8125rem/1.55 var(--sans);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}