:root { color-scheme: light; --cream: #f5f6ee; --olive: #4e641b; --ink: #1a1d13; --muted: #535b46; --rule: #d8dec8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.container { width: min(100% - 48px, 720px); margin: 0 auto; padding: 32px 0 48px; }
nav { margin-bottom: 56px; font-weight: 750; font-size: 22px; }
a { color: var(--olive); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 5px; border-radius: 2px; }
h1 { margin: 0 0 18px; font-size: clamp(36px, 7vw, 58px); line-height: 1.05; letter-spacing: -1.5px; font-weight: 750; }
h2 { margin: 44px 0 20px; font-size: 25px; line-height: 1.25; }
p { margin: 0 0 20px; }
.intro { font-size: 24px; margin: 24px 0 16px; font-weight: 650; }
.contact { display: inline-block; padding: 12px 18px; margin: 4px 0 16px; background: var(--olive); color: white; border-radius: 10px; text-decoration: none; font-weight: 650; overflow-wrap: anywhere; }
.hint { color: var(--muted); font-size: 15px; }
details { border-top: 1px solid var(--rule); padding: 0 0 4px; }
details:last-child { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 20px 0; font-weight: 650; line-height: 1.4; }
details p { padding-left: 18px; }
footer { margin-top: 48px; font-size: 15px; }
footer a { display: inline-block; margin: 0 20px 20px 0; }
footer p { color: var(--muted); }
@media (max-width: 400px) { .container { width: calc(100% - 32px); } nav { margin-bottom: 40px; } }