* { box-sizing: border-box; } body { margin: 0; background: #faf9f6; color: #12233f; font: 16px/1.75 Arial, sans-serif; } header { background: #12233f; color: #f2ecd9; padding: 30px max(24px, calc((100% - 820px) / 2)); } header a { color: inherit; font-weight: bold; letter-spacing: 1px; } header p { margin: 4px 0 0; color: #dfc78e; font-size: 13px; } main { max-width: 868px; margin: auto; padding: 40px 24px 64px; } h1, h2 { font-family: Georgia, serif; line-height: 1.3; font-weight: normal; } h1 { font-size: clamp(30px, 6vw, 42px); } h2 { font-size: 24px; margin-top: 36px; } a { color: #234975; text-underline-offset: 4px; overflow-wrap: anywhere; } :focus-visible { outline: 3px solid #c9a24b; outline-offset: 4px; } .draft { padding: 18px; background: #f2ecd9; border-left: 3px solid #c9a24b; } li { margin-bottom: 8px; } footer { padding: 24px; background: #f2ecd9; } nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; } [aria-current="page"] { font-weight: bold; }