:root {
  /* Provisional values: edit here as the design develops. */
  --page-background: #fff;
  --ink: #000;
  --sample-size: 40px;
  --occasion-font: "recursive-mono-casual-static", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-background); color: var(--ink); }
main { min-height: 100svh; display: grid; place-items: center; padding: 24px 24px 100px; }
#sample { font-family: var(--occasion-font); font-size: clamp(24px, 10vw, var(--sample-size)); font-weight: 400; font-style: normal; line-height: 1.75; }
.content { width: 100%; text-align: center; }
.copy { max-width: 600px; margin: 24px auto 0; font-family: "gladly-mailed", sans-serif; font-size: 18px; font-weight: 400; font-style: normal; line-height: 1.5; }
.copy p { margin: 0; }
.copy p + p { margin-top: 24px; }
.copy a { color: inherit; text-underline-offset: 3px; }
@media (max-height: 240px) { main { min-height: 120px; padding: 16px; } }