/* The whole of the site's appearance. One file, no imports, no web fonts.
 *
 * NO FONT LINK, DELIBERATELY. A Google Fonts stylesheet is a second origin on
 * the critical path, a third-party request on behalf of a visitor who did not
 * agree to it, and a blank paragraph for anyone whose network blocks it. The
 * system stack is already on the device, renders instantly, and is the typeface
 * the reader's own operating system chose for prose.
 *
 * NO FRAMEWORK, for the same reason the build has no bundler: this stylesheet
 * has to still work in two years with nobody looking at it.
 *
 * COLOUR IS DECLARED TWICE AND ONLY ONCE PER PROPERTY. The tokens below carry
 * light values; the `prefers-color-scheme: dark` block redefines the tokens and
 * nothing else. Writing dark-mode rules per component is how half a site ends
 * up dark and the other half white -- and the half that is wrong is always the
 * half nobody on the team uses.
 */

:root {
  color-scheme: light dark;

  --ink: #1b1a17;
  --ink-soft: #4a4740;
  --ink-faint: #6d685e;
  --paper: #fbfaf7;
  --paper-raised: #ffffff;
  --rule: #e2ddd2;
  --accent: #8a5a1c;
  --accent-ink: #ffffff;
  --accent-soft: #f3ece0;
  --focus: #1456b8;

  --measure: 34rem;
  --page: 64rem;
  --gutter: 1rem;
  --radius: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2efe8;
    --ink-soft: #c9c3b6;
    --ink-faint: #9b958a;
    --paper: #161513;
    --paper-raised: #201e1b;
    --rule: #332f2a;
    --accent: #e0a964;
    --accent-ink: #1b1a17;
    --accent-soft: #2a2520;
    --focus: #8ab4ff;
  }
}

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

html {
  /* Smooth scrolling is a preference, not a default: it makes some readers
   * motion-sick, and the media query is the only honest way to offer it. */
  scroll-behavior: auto;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  line-height: 1.2;
  /* `balance` keeps a two-line headline from leaving one word on line two.
   * Unsupported browsers ignore it, which is the whole appeal. */
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

/* One focus ring, everywhere, and it is never removed. A keyboard visitor who
 * cannot see where they are is a visitor who cannot use the site at all. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

img,
iframe {
  max-width: 100%;
}

/* Visible only to a screen reader. Not `display: none`, which hides it from
 * one too; not `opacity: 0`, which leaves it taking up space and focusable in
 * the wrong place. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link: off screen until focused, then the first thing on the page.
 * It is first in the document so a keyboard visitor reaches it before the
 * navigation they are trying to skip. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius) 0;
}

.skip:focus {
  left: 0;
}

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

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.wordmark-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.main-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  margin-inline-start: auto;
  font-size: 0.9rem;
}

.langs a {
  color: var(--ink-faint);
  text-decoration: none;
}

.langs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.langs a[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- the page itself ---------- */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

section {
  margin: 0;
}

.narrow,
.prose {
  max-width: var(--measure);
}

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.fine {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* The app's splash, at phone proportions.

   CAPPED BY HEIGHT, not width alone. It is a tall portrait: a width cap by
   itself lets it run past the bottom of a laptop screen and pushes every word
   on the page below the fold, so the first thing a visitor meets is a picture
   with no claim attached to it. */
.hero-splash {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 18px;
  margin: 0 0 var(--space-xl);
  box-shadow: 0 4px 24px rgb(0 0 0 / 28%);
}

@media (min-width: 900px) {
  .hero-splash { max-width: 360px; }
}

.badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.hero h1 {
  max-width: 24ch;
}

.hero-aside {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

/* ---------- buttons ---------- */

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px of target, which is the smallest thing a thumb hits reliably. */
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  border-color: var(--ink-faint);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.quiet {
  background: transparent;
  font-weight: 500;
}

/* The Android button, which is not a link because there is nowhere to go.
 * It is drawn as plainly unavailable rather than as a button that fails. */
.btn.disabled {
  background: transparent;
  color: var(--ink-faint);
  border-style: dashed;
  font-weight: 500;
  cursor: not-allowed;
}

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

.promise,
.give,
.business,
.support-claim,
.who,
.steps-section,
.cards-section {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}

@media (min-width: 40rem) {
  .promise,
  .give,
  .business,
  .support-claim,
  .who,
  .steps-section,
  .cards-section {
    padding: 2rem;
  }
}

.ticks,
.expertise {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.ticks li,
.expertise li {
  position: relative;
  padding-inline-start: 1.6rem;
  max-width: var(--measure);
}

.ticks li::before,
.expertise li::before {
  /* A mark drawn in CSS rather than an emoji: an emoji is announced aloud by
   * a screen reader ("check mark button") in front of every line. */
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.pledge {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 1rem;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0;
}

.give h3 {
  margin-top: 1.75rem;
}

/* ---------- the how-to steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.step {
  counter-increment: step;
  display: grid;
  gap: 1rem;
}

.step-words {
  position: relative;
  padding-inline-start: 2.75rem;
}

.step-words h3::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--rule);
  font-size: 0.95rem;
  font-weight: 700;
}

.media {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--accent-soft);
}

.media .shot {
  display: block;
  width: 100%;
  height: auto;
}

.media.video {
  /* A phone-shaped frame would crop a widescreen clip and a widescreen frame
   * letterboxes a portrait one; 16/9 is what YouTube serves by default and the
   * player handles the rest. */
  aspect-ratio: 16 / 9;
}

.media.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 48rem) {
  /* Two columns only where there is room for both. Below this the image sits
   * under its words, which is the order they are read in. */
  .step:has(.media) {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1.5rem;
  }
}

/* ---------- cards ---------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card h2 {
  font-size: 1.3rem;
}

.card p:last-child {
  margin-bottom: 0;
}

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

.footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.footer p {
  max-width: 48rem;
  margin-bottom: 0.6rem;
}