:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #ece8df; background: #121516; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
header, main, footer { width: min(100% - 40px, 860px); margin: auto; }
header { padding: 36px 0 24px; border-bottom: 1px solid #3c4141; }
.brand { color: #e8c785; font-size: 14px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; }
a { color: #e8c785; text-underline-offset: .2em; }
a:hover { color: #fff0ce; }
a:focus-visible { outline: 3px solid #e8c785; outline-offset: 5px; }
main { padding: 32px 0 52px; }
h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin: 20px 0 12px; }
h2 { margin-top: 32px; font-size: 21px; line-height: 1.4; }
p, li { max-width: 76ch; }
.notice { border-left: 4px solid #e8c785; padding: 16px 20px; background: #26251f; }
.notice p { margin: 0; }
.meta, footer { color: #bbbdb6; font-size: 14px; }
footer { padding: 24px 0 36px; border-top: 1px solid #3c4141; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
@media print { :root { color-scheme: light; color: #151515; background: white; } .notice { background: #f4f0e5; } a, .brand, .meta, footer { color: #353535; } header, main, footer { width: 100%; } }

.button { display: inline-block; padding: 14px 22px; border-radius: 8px; background: #e8c785; color: #151515; font-weight: 700; text-decoration: none; }
.button:hover { background: #fff0ce; color: #151515; }
a { overflow-wrap: anywhere; }
li + li { margin-top: 10px; }