:root {
  color-scheme: light;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  color: #4a4453;
  background: #fff8f2;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 32px 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 182, 201, .42), transparent 34rem),
    radial-gradient(circle at 90% 95%, rgba(201, 184, 255, .30), transparent 36rem),
    #fff8f2;
}

.card, .document {
  width: min(100%, 720px);
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid rgba(239, 155, 180, .22);
  border-radius: 32px;
  background: rgba(255, 253, 251, .92);
  box-shadow: 0 24px 70px rgba(159, 116, 135, .15);
}

.card { text-align: center; }
.mark { font-size: 52px; color: #ef9bb4; }
.eyebrow, .updated { color: #9a93a2; }
.eyebrow { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 8px 0 12px; color: #ef9bb4; font-size: clamp(42px, 9vw, 72px); line-height: 1; }
.document h1 { color: #4a4453; font-size: clamp(36px, 8vw, 56px); }
h2 { margin-top: 32px; color: #4a4453; font-size: 21px; }
p { font-size: 17px; line-height: 1.65; }
.lead { font-size: 20px; color: #6f6877; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
a { color: #b65f7d; font-weight: 650; }
nav a {
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none;
  background: #ffe4ec;
}
.back { display: inline-block; margin-bottom: 24px; text-decoration: none; }
.footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid #f1dce2; }