:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #302014; background: #17120e; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.8; font-size: 1rem; background: radial-gradient(ellipse at top, #45321d, #17120e 70%); min-height: 100vh; padding: 20px 16px 48px; }
header, main { max-width: 58rem; margin-inline: auto; padding: clamp(20px, 4vw, 40px); }
header { color: #f4ddb0; border: 1px solid #96703b; border-radius: 8px 8px 0 0; background: linear-gradient(110deg, #312116, #19130e); box-shadow: 0 10px 40px #0005; }
.brand { color: #f0ce8e; font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; }
nav { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: 1rem; }
nav a { padding: .2rem .4rem; color: #dfc392; }
nav a[aria-current="page"] { background: #d8b87f; color: #2b190a; border-radius: .2rem; font-weight: 700; }
main { border: 1px solid #ab8753; border-top: 0; border-radius: 0 0 8px 8px; background: linear-gradient(110deg, #f1e2c4, #e3cc9f); box-shadow: 0 18px 48px #0005; padding-bottom: 4rem; }
a { color: #62400e; text-underline-offset: .18em; overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid #5675a1; outline-offset: 3px; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; overflow-wrap: anywhere; margin-top: 0; }
h2 { font-size: 1.3rem; line-height: 1.4; margin-top: 2rem; padding-bottom: .4rem; border-bottom: 1px solid #b99b65; }
p, li { overflow-wrap: anywhere; }
ul { padding-inline-start: 1.5rem; }
@media (max-width: 480px) { body { padding: 10px 8px 24px; } header, main { padding: 20px; } }
@media print { nav { display: none; } body, header, main { background: white; color: black; border: 0; box-shadow: none; padding: 0; } a, .brand { color: inherit; } }