/*
 * One stylesheet, three pages. No webfonts, no imports, no external requests:
 * a holding page that fetched a font would be a third party watching people
 * arrive at a health company's front door before it has a privacy policy to
 * describe it.
 *
 * The type stack is the system stack, so it renders in the reader's own
 * interface font and costs nothing to download.
 */

:root {
  color-scheme: light dark;
  --bg: #fbfbf9;
  --ink: #17171a;
  --muted: #5c5c66;
  --rule: #e4e4de;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101012;
    --ink: #f2f2ef;
    --muted: #9a9aa4;
    --rule: #26262b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/*
 * A single column that stays readable on a phone and does not run to the edge
 * of a desktop window. `min-height: 100svh` rather than `100vh` so mobile
 * browser chrome does not push the footer off screen.
 */
main {
  max-width: 34rem;
  min-height: 100svh;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The wordmark on the holding page. Larger, and it is the only thing there. */
h1.wordmark {
  font-size: 3.5rem;
  letter-spacing: -0.03em;
}

p {
  margin: 0 0 1rem;
  color: var(--muted);
  max-width: 30rem;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/*
 * The back link. Present on the two inner pages and absent on the holding
 * page, which has nowhere to go back to.
 */
.back {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

/*
 * A LONG DOCUMENT, WHICH THE HOLDING PAGE'S CENTRING IS WRONG FOR.
 *
 * `main` centres its content vertically so the two short pages sit in the
 * middle of the viewport. On a page taller than the screen that has no visible
 * effect today, and it would have one the moment a document became short
 * enough to fit: the policy would drift to the middle and its heading would
 * leave the top of the page. Opting the document out is one line and removes
 * the question.
 */
main.doc {
  justify-content: flex-start;
}

main.doc p {
  /* Wider measure than the holding page's, because this is read rather than
     glanced at, and a 30rem column inside a 34rem page wastes the difference. */
  max-width: none;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/*
 * The permission sub-headings. Smaller than h2 and set in the body colour, so
 * the section headings stay the louder of the two: a reader scanning for
 * "Withdrawing consent" should not have to pick it out of nine equally weighted
 * lines.
 */
h3 {
  margin: 1.75rem 0 0.375rem;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.updated {
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

/*
 * AN UNFILLED PLACEHOLDER, DRAWN SO IT CANNOT BE READ AS COPY.
 *
 * This is not decoration. The two values it marks are a date and an ICO
 * registration number, and both are the kind of thing that ships unnoticed
 * because the sentence around them reads perfectly well without them. A comment
 * in the source would be invisible on the rendered page, which is where anybody
 * would actually notice.
 *
 * So it is loud on the page itself: boxed, upper case, and in the one colour
 * this stylesheet does not otherwise use. It is legible in both themes rather
 * than relying on a background that disappears in one of them.
 *
 * The class name is the same string the source comments use, so `grep todo` and
 * `grep PLACEHOLDER-DO-NOT-SHIP` both find every instance.
 */
.todo {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a8321e;
}

@media (prefers-color-scheme: dark) {
  .todo {
    color: #ff9c85;
  }
}

@media (max-width: 30rem) {
  h1.wordmark {
    font-size: 2.75rem;
  }
}