:root {
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
  color: #172b3a;
  background: #e8f1ee;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 85% 12%, #f7d8a6 0, transparent 34%), linear-gradient(135deg, #e8f1ee, #d2e3e3 58%, #b8d5d0);
}

main {
  width: min(760px, calc(100% - 32px));
  padding: clamp(24px, 6vw, 56px);
  border: 1px solid rgba(23, 43, 58, 0.18);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 12px 14px 0 rgba(23, 43, 58, 0.08);
  animation: arrive 500ms ease-out both;
}

.logo { width: 52px; height: 52px; }
.eyebrow { margin: 22px 0 8px; color: #28715f; font: 700 0.78rem/1.2 system-ui, sans-serif; text-transform: uppercase; }
h1 { max-width: 620px; margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; }
.lede { max-width: 560px; margin: 20px 0 28px; color: #435c68; font: 1.1rem/1.55 system-ui, sans-serif; }
nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
nav a { padding: 14px 16px; border-left: 4px solid #d27d38; color: #172b3a; background: #f5f2e9; font: 600 0.95rem/1.35 system-ui, sans-serif; text-decoration: none; transition: background 160ms ease, transform 160ms ease; }
nav a:hover, nav a:focus-visible { background: #f4dfbf; transform: translateX(3px); }
.version { margin: 28px 0 0; color: #526772; font: 0.82rem/1.4 system-ui, sans-serif; }

@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }