:root {
  color-scheme: light;
  --bg: #f5f2ea;
  --card: #fffdf7;
  --text: #1e1b16;
  --muted: #6b6256;
  --line: #d8d0c3;
  --accent: #4f5d4a;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at top, #fff 0%, var(--bg) 55%);
  font-family: Georgia, "Times New Roman", serif;
}

.shell { width: min(100%, 72rem); margin: 0 auto; padding: 4rem 1.25rem 5rem; }
.eyebrow { margin: 0 0 1rem; color: var(--muted); font: 700 .75rem/1.4 system-ui, sans-serif; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(2.5rem, 8vw, 5rem); line-height: .95; }
.lead, .note { max-width: 42rem; color: var(--muted); font: 400 1.05rem/1.7 system-ui, sans-serif; }
.lead { margin: 1.25rem 0 0; }
.note { margin: 1rem 0 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.card { display: flex; flex-direction: column; min-height: 8rem; gap: .5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); color: inherit; text-decoration: none; }
.card span { color: var(--accent); font: 700 .8rem/1.3 system-ui, sans-serif; letter-spacing: .08em; }
.card strong { font-size: 1.15rem; line-height: 1.4; }
code { padding: .15rem .35rem; border-radius: .35rem; background: #efe8db; font: inherit; }

@media (max-width: 640px) { .shell { padding-top: 2.5rem; } }