/*
  The notebook, in a browser.

  Every colour here is lifted from the app's own palette (NotebookColor.swift),
  light value and dark value both, so the website and the app read as the same
  thing rather than as a product and its paperwork. Names match the app's:
  paper, ink, pencil, rule, pen.

  There is no build step. This file is served exactly as it is written.
*/

:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #201f19;
  --pencil: #6e6b62;
  --rule: #e6e3d9;
  --pen: #1e47ae;
  --pen-soft: #e8eefc;

  --measure: 34rem;
  --gutter: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17191b;
    --surface: #202325;
    --ink: #e8e6df;
    --pencil: #9a978f;
    --rule: #2e3235;
    --pen: #83a9ff;
    --pen-soft: #1b2740;
  }
}

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

body {
  margin: 0;
  padding: 0 var(--gutter) 4rem;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* One column, centred, never wider than is comfortable to read. */
header, main, footer { max-width: var(--measure); margin: 0 auto; }

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

header {
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.wordmark {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover { color: var(--pen); }

/* ---- Type -------------------------------------------------------------- */

h1 {
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.1875rem;
  line-height: 1.35;
  margin: 2.5rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.25rem;
}

p, ul { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.375rem; }

/* The date a policy last changed, and the one-line summary under a title. */
.standfirst {
  color: var(--pencil);
  margin-bottom: 2rem;
}

.note { color: var(--pencil); font-size: 0.9375rem; }

/* ---- Links ------------------------------------------------------------- */

a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ---- The card, borrowed from the app ----------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

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

/* The one thing on the page you are meant to do. */
.call {
  background: var(--pen-soft);
  border-color: transparent;
}

.call a { font-weight: 600; }

/* ---- Where the site goes next ------------------------------------------ */

/* Two doors, side by side on anything wider than a phone. Written as a grid
   rather than as two paragraphs because more doors are coming: the front page
   is meant to grow into a proper description of the app, and a grid takes a
   third and a fourth child without being rewritten. */
.doors {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 2rem 0;
}

@media (min-width: 34rem) {
  .doors { grid-template-columns: repeat(2, 1fr); }
}

.doors .card { margin: 0; }
.doors h2 { border: none; padding: 0; margin: 0 0 0.25rem; font-size: 1.0625rem; }

/* ---- Foot -------------------------------------------------------------- */

footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--pencil);
  font-size: 0.9375rem;
}

footer p { margin: 0 0 0.5rem; }
footer a { color: var(--pencil); }
footer a:hover { color: var(--pen); }