:root { --text: #292c33; --muted: #62646b; --link: #98452f; --border: #e6e1db; --paper: #fffefa; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f3ef; color: var(--text); font: 1rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow-wrap: anywhere; }
.page { max-width: 900px; margin: 24px auto; padding: 0 36px 28px; background: var(--paper); border-top: 3px solid var(--link); }
a { color: var(--link); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 20px; background: white; padding: 8px 16px; }
.skip-link:focus { top: 12px; }
nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
nav a { text-decoration: none; }
main > header { padding: 26px 0 8px; }
h1 { margin: 0; font: 500 clamp(1.8rem, 4vw, 2.3rem)/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -0.025em; }
.subtitle { margin: 10px 0; color: var(--muted); }
h2 { margin: 24px 0 8px; font: 500 1.45rem/1.3 Georgia, 'Times New Roman', serif; color: var(--link); }
p { margin: 0 0 14px; }
figure { margin: 16px 0 24px; }
figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
figcaption { margin-top: 6px; color: var(--muted); font-size: 0.875rem; }
.project-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 0.9rem; }
@media (max-width: 650px) { .page { margin: 0 auto; padding: 0 20px 24px; } }