:root {
  --paper: #fbfaf8;
  --paper-edge: #f1eee9;
  --slate: #4b6b7a;
  --slate-dark: #3a5664;
  --orange: #cc6633;
  --text: #24323a;
  color-scheme: light;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Landing page: the logo centered on warm white, the background its slate and
   orange were drawn for, with a faint vignette. A fixed layer instead of
   background-attachment: fixed, which iOS Safari doesn't support. */
.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 75% 65% at 50% 48%, #fff 0%, var(--paper) 55%, var(--paper-edge) 100%);
}

/* One column that can shrink below the logo's natural width (minmax(0, 1fr)),
   so the logo is always sized to the space inside the padding and centered in
   it, never wider. */
.landing main {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

/* The logo is 924 × 388 units. Use the full width inside the padding, stop
   growing at 760px on large screens, and never be taller than the space
   inside the padding. */
.landing h1 {
  width: min(100%, 760px, (100vh - 96px) * 924 / 388);
  width: min(100%, 760px, (100dvh - 96px) * 924 / 388);
  margin: 0;
  line-height: 0;
}

/* Short screens, such as a phone turned sideways: trim the top and bottom
   padding so the logo can grow to fill the height (on an iPhone 17 Pro it's
   about 1.5 times its portrait width) instead of shrinking. The Privacy link
   sits in the corner, clear of the centered logo. */
@media (max-height: 500px) {
  .landing main {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(36px, env(safe-area-inset-bottom));
  }

  .landing h1 {
    width: min(100%, 760px, (100vh - 56px) * 924 / 388);
    width: min(100%, 760px, (100dvh - 56px) * 924 / 388);
  }
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  animation: arrive 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    animation: none;
  }
}

.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;
}

/* The logo's slate on warm white is about 5.5:1, above WCAG's 4.5:1 for
   small text. */
.corner a {
  display: inline-block;
  padding: 6px;
  color: var(--slate);
  text-decoration: none;
}

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

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

/* Privacy notice */
.page {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left));
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The orange is 3.8:1 on warm white: enough for large bold text only. */
.page h1 {
  margin: 0 0 4px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--orange);
}

.page h2 {
  margin: 2em 0 0.5em;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--slate);
}

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

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

.page .updated {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--slate-dark);
}

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

.page .home img {
  width: 220px;
  height: auto;
}