:root {
  --paper: #f5f1ea;
  --paper-warm: #efe9df;
  --ink: #2b2723;
  --ink-soft: #6d6359;
  --rule: #d8cfc2;

  --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Iowan Old Style, Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  background-image: radial-gradient(120% 80% at 50% 0%, var(--paper-warm) 0%, var(--paper) 62%);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: clamp(1.5rem, 5vw, 4rem);
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sits a touch above true centre; optically centred reads calmer. */
.card {
  max-width: 34rem;
  margin-bottom: clamp(0rem, 4vh, 3rem);
  text-align: center;
  animation: settle 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 3.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: balance;
}

.rule {
  width: 3rem;
  height: 1px;
  margin: clamp(2rem, 6vh, 3.25rem) auto;
  background: var(--rule);
}

.meta {
  margin: 0;
  font-size: clamp(0.68rem, 2.4vw, 0.75rem);
  font-weight: 500;
  letter-spacing: clamp(0.1em, 0.5vw, 0.16em);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;
}

footer {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  opacity: 0.6;
}

footer p { margin: 0; }

@keyframes settle {
  from { opacity: 0; transform: translateY(0.65rem); }
  to   { opacity: 1; transform: none; }
}

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