:root {
  color-scheme: light;
  --navy: #10243a;
  --pine: #245e50;
  --cream: #f7f6f1;
  --line: #d9e3df;
  --muted: #52645f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--navy);
  background: radial-gradient(circle at 90% 3%, #dceae4 0, transparent 28rem), var(--cream);
  font: 1rem/1.65 "Avenir Next", "Trebuchet MS", sans-serif;
}

a { color: var(--pine); text-underline-offset: 0.2em; }
a:hover { color: var(--navy); }
.shell { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.topbar { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.topbar .shell, .footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar a { font-size: 0.93rem; font-weight: 700; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 800; letter-spacing: -0.03em; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; color: #fff; background: var(--navy); border-radius: 0.7rem; font: italic 1.5rem Georgia, serif; }
main { padding: clamp(3rem, 8vw, 6rem) 0 5rem; }
.eyebrow { color: var(--pine); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.045em; line-height: 1.14; }
h1 { max-width: 15ch; margin: 0.4rem 0 1.1rem; font-size: clamp(3rem, 7vw, 5.5rem); }
h2 { margin: 2.2rem 0 0.6rem; font-size: clamp(1.5rem, 3vw, 2rem); }
h2:first-child { margin-top: 0; }
p { margin: 0 0 1rem; }
.meta { color: var(--muted); font-size: 0.9rem; }
.card { max-width: 46rem; margin-top: 3.5rem; padding: clamp(1.6rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.5rem; background: #fff; box-shadow: 0 0.8rem 2rem #10243a0a; }
.footer { padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }

@media (max-width: 38rem) {
  .topbar .shell, .footer .shell { align-items: flex-start; flex-direction: column; }
  main { padding-top: 3rem; }
  .card { margin-top: 2.5rem; }
}