:root { color-scheme: light; --ink: #2c192e; --paper: #f1f4fc; --accent: #51315b; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1.05rem/1.75 Georgia, serif; }
header, main, footer { max-width: 48rem; margin: auto; padding: 1.6rem; }
header { border-bottom: 1px solid var(--accent); }
.name { display: block; font-size: 1.35rem; font-weight: bold; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; }
a { color: inherit; text-underline-offset: .25em; }
a:hover, a[aria-current="page"] { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: .25rem; }
h1 { line-height: 1.2; font-size: clamp(2rem, 5vw, 3rem); font-weight: normal; }
.lead { font-size: 1.15rem; }
figure { margin: 2rem 0; }
img { display: block; width: 100%; height: auto; border-radius: 3px; }
figcaption, footer { font-size: .9rem; }
footer { border-top: 1px solid var(--accent); }