:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #1f0f0b;
  color: #f7d8cf;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 75% 0%, #5a2417 0, #1f0f0b 38rem); }
a { color: #ff8a65; text-underline-offset: .2em; }
a:hover, a:focus-visible { color: #ffc0ad; }
a:focus-visible { outline: 2px solid #ff7a50; outline-offset: 4px; }
header, main, footer { width: min(920px, calc(100% - 2rem)); margin-inline: auto; }
header { padding: 2rem 0 1rem; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
nav .brand { margin-right: auto; color: #ffe8e1; font: 700 .9rem ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; letter-spacing: .12em; }
main { padding: 2rem 0 4rem; }
.eyebrow { color: #ff8a65; font: 700 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: .5rem 0 1rem; color: #fff1ed; font-size: clamp(2.1rem, 7vw, 4.5rem); line-height: .98; letter-spacing: -.045em; }
h2 { margin-top: 2.25rem; color: #fff1ed; font-size: 1.35rem; }
p, li { color: #e6beb2; line-height: 1.72; }
strong { color: #ffe6df; }
.lede { max-width: 68ch; font-size: 1.08rem; }
.meta, .note { border: 1px solid #6d392d; background: #2b1510cc; padding: 1rem 1.15rem; border-radius: .75rem; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 2.5rem; font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0; }
.card { display: block; border: 1px solid #6d392d; background: #2b1510cc; border-radius: .8rem; padding: 1.25rem; text-decoration: none; }
.card h2 { margin: 0 0 .5rem; }
.card p { margin: 0; }
footer { border-top: 1px solid #58332a; padding: 1.4rem 0 2.5rem; color: #bc8f83; font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 520px) { header { padding-top: 1.25rem; } main { padding-top: 1rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }