/*
 * The holding page, and nothing else uses this file.
 *
 * It repeats six values from src/styles.css rather than importing it. That
 * stylesheet is imported from main.tsx and leaves the build as a content-hashed
 * asset, so a page outside the bundle cannot link it by name — and this
 * directory is not processed by vite at all, which is what keeps the page a
 * file rather than a build output. The values are the ones whose contrast
 * ratios src/styles.css records; changing one there and not here makes this
 * page a different green, and nothing reports it.
 *
 * No web font, for the reason src/styles.css already gives at length and for
 * one more that belongs to this page: a holding page is where a third party
 * would learn the most from being asked for a file, because every request to it
 * is somebody arriving for the first time. The wordmark needs no font either —
 * the vector package converted it to paths, which is why index.html can carry
 * Poppins SemiBold without a Poppins anywhere.
 */
:root {
  --page: #fbfaf7;
  --ink: #1b1b19;
  --ink-muted: #4a4944;
  --accent: #1f5545;
  --focus: #1a4f8f;
  --step: 1rem;
}

/*
 * The same reset src/styles.css opens with, and it is load-bearing here rather
 * than tidy. Without it `main` below is content-box: its padding sits outside
 * min-height instead of inside it, so the document came out exactly one padding
 * taller than the viewport — measured at 1920x1080, 1512x945, 1366x768 and
 * 390x844 alike, 112 px every time, whatever the content was. A page whose
 * content fits still scrolled.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--page);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/*
 * One centre, because the page has one thing to say and no header to put beside
 * it. min-height rather than height: a short viewport then scrolls instead of
 * cutting the last paragraph off, and the last paragraph is the one with the
 * address in it.
 *
 * The padding is the same above as below on purpose. justify-content centres
 * within the content box, so an uneven pair moves the block off centre by half
 * the difference and does it silently — it was 48 px against 64 px, which put
 * the block 8 px high of centre.
 */
main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--step) * 2) var(--step);
}

.logo {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

/* The air between the mark and the words, in rem so that it grows with the
   reader's own font size rather than staying a fixed gap around larger text. */
.words {
  max-width: 34rem;
  margin-top: calc(var(--step) * 4);
}

/*
 * Left aligned inside a centred column, and not centred text. Centred paragraphs
 * move the start of every line, so the eye has to find it again each time; the
 * column width is the one src/styles.css settled on for the same reason.
 */
h1 {
  font-size: 1.625rem;
  line-height: 1.25;
  margin: 0 0 calc(var(--step) * 1.5);
}

p {
  margin: 0 0 var(--step);
}

p:last-child {
  margin-bottom: 0;
  color: var(--ink-muted);
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}