:root {
  color-scheme: light;
  --ink: #4f4478;
  --muted: #756d91;
  --paper: rgba(250, 248, 247, .91);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #dceaf3 url('/assets/vertical-slice/rosy-pearl-sky-860.jpg') center / cover fixed; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  line-height: 1.62;
}
main {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 54px clamp(22px, 6vw, 56px) 80px;
  background: var(--paper);
  backdrop-filter: blur(18px) saturate(.8);
}
nav { margin-bottom: 42px; }
nav a, main a { color: var(--ink); text-underline-offset: 3px; }
h1 { margin: 0 0 10px; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.05; letter-spacing: 0; }
h2 { margin: 34px 0 8px; font-size: 1.08rem; line-height: 1.3; letter-spacing: 0; }
p, li { max-width: 64ch; }
.updated { margin: 0 0 34px; color: var(--muted); font-size: .9rem; }
.promise { margin: 28px 0; font-size: 1.1rem; text-wrap: balance; }
ul { padding-left: 1.25rem; }
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(79, 68, 120, .16); color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { main { padding-top: 28px; } }