:root {
  color-scheme: light;
  --paper: #FBF8F3;
  --ink: #1E1A16;
  --ink-3: #6B635A;
  --b1: #F6C3D1;
  --b2: #BAD9F4;
  --b3: #F8E5A3;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  color: var(--ink);
  background:
    radial-gradient(60% 50% at 18% 22%, color-mix(in oklab, var(--b1) 85%, transparent), transparent 70%),
    radial-gradient(55% 50% at 84% 30%, color-mix(in oklab, var(--b2) 85%, transparent), transparent 70%),
    radial-gradient(65% 55% at 50% 92%, color-mix(in oklab, var(--b3) 90%, transparent), transparent 72%),
    var(--paper);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .085;
  mix-blend-mode: multiply;
}
main { position: relative; text-align: center; max-width: 32rem; }
.mark { display: block; margin: 0 auto 28px; width: 96px; height: 96px; isolation: isolate; }
.mark g { mix-blend-mode: multiply; }
h1 { margin: 0; font-weight: 500; font-size: clamp(2.25rem, 7vw, 3.25rem); letter-spacing: -.01em; line-height: 1.1; }
p {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}