:root {
  --purple: #5c5aa7;
  --mint: #e2f0ec;
  --pink: #f0a8b7;
}

html {
  background: var(--purple);
  color: var(--mint);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Georgia, "Times New Roman", serif;
}

/* Landing page: the original full-screen artwork, scaled to cover the screen
   and anchored to the top, as on the old WordPress page. A fixed layer instead
   of background-attachment: fixed, which iOS Safari doesn't support. */
.artwork {
  position: fixed;
  inset: 0;
  background: var(--purple) url("/hfr-forever.svg") no-repeat center top;
  background-size: cover;
}

/* On tall, narrow phones, "cover" would clip the edges of the title. Below
   this aspect ratio, scale the artwork so its central 400 of 1366 units
   (the title plus a margin) fit the screen width, and center it vertically.
   The artwork's own background is the same purple, so the edges don't show. */
@media (max-aspect-ratio: 400/768) {
  .artwork {
    background-size: calc(100vw * 1366 / 400) auto;
    background-position: center center;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.corner {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  font-size: 12px;
  line-height: 1;
}

/* Full-strength mint keeps the small link above WCAG's 4.5:1 contrast. */
.corner a {
  display: inline-block;
  padding: 6px;
  color: var(--mint);
  text-decoration: none;
}

.corner a:hover,
.corner a:focus-visible {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* Privacy notice */
.page {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: 48px 16px 64px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.page h1 {
  margin: 0 0 4px;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.2;
}

.page h2 {
  margin: 2em 0 0.5em;
  font-size: 1.25rem;
  font-weight: normal;
}

.page p,
.page ul {
  margin: 0 0 1em;
}

.page ul {
  padding-left: 1.25em;
}

.page a {
  color: var(--mint);
}

.page .updated {
  font-size: 0.9375rem;
  font-style: italic;
}

.page .home {
  display: inline-block;
  margin-bottom: 32px;
}