:root { color-scheme: light; --ink: #1d281f; --muted: #506153; --accent: #28613e; --line: #cdd6cb; --paper: #f7f8f2; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.75 system-ui, sans-serif; }
.wrap { max-width: 960px; margin: auto; padding: 0 clamp(24px, 6vw, 72px); }
header, footer { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; color: var(--muted); }
header { border-bottom: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); font-size: .88rem; }
a { color: inherit; text-underline-offset: .28em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.brand { text-decoration: none; font: bold 1.45rem Georgia, serif; color: var(--ink); }
.brand span, .hero span { color: var(--accent); }
.hero { padding: clamp(54px, 10vw, 112px) 0 46px; }
.hero h1 { margin: 0; font-size: clamp(3rem, 10vw, 6rem); letter-spacing: -.07em; line-height: 1.15; }
.hero p, .lead { max-width: 35em; color: var(--muted); font-size: 1.08rem; }
#notes { padding-bottom: 64px; }
#notes > h2 { margin: 0 0 14px; font-size: 1.1rem; }
.notes { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.notes a { position: relative; display: block; padding: 20px 40px 20px 0; border-top: 1px solid var(--line); text-decoration: none; }
.notes a:hover h3 { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.notes h3 { margin: 3px 0; font-size: clamp(1.05rem, 3vw, 1.3rem); }
.notes p { margin: 0; color: var(--muted); }
.notes span { position: absolute; top: 20px; right: 4px; color: var(--accent); }
small { color: var(--accent); font-weight: 600; }
article { max-width: 650px; padding: clamp(46px, 9vw, 84px) 0 64px; }
article h1 { margin: .22em 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.2; letter-spacing: -.045em; }
article h2 { font-size: 1.18rem; margin: 2em 0 .4em; }
article section p { margin: 0; }
.back { display: inline-block; margin-top: 40px; color: var(--accent); }