html { background: #faf9f5; color: #252820; }
body { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; max-width: 43rem; margin: 0 auto; padding: clamp(3rem, 9vh, 6.5rem) 1.5rem 4rem; font: 1.0625rem/1.6 Georgia, serif; }
main { flex: 1; }
footer { margin-top: 4rem; color: #666b60; font-size: .875rem; }
h1 { margin: 0 0 .45rem; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: normal; letter-spacing: -.035em; line-height: 1.1; }
a { color: #254eb2; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: #b04e2b; }
a:focus-visible { outline: 2px solid #b04e2b; outline-offset: 4px; }
nav { display: flex; gap: 1.25rem; }
ul { margin: 3.5rem 0 0; padding-left: 1.15rem; }
li + li { margin-top: .65rem; }
li span { color: #666b60; }
article { max-width: 37rem; }
article h1 { margin: 2.5rem 0 1.5rem; }
article p { margin: 0 0 1.25rem; }
@media (max-width: 430px) { body { padding-inline: 1.1rem; } li span { display: block; } }