:root { color-scheme: light; font-family: Georgia, "Times New Roman", serif; color: #20201e; background: #faf9f6; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(760px, calc(100% - 2rem)); margin: clamp(3rem, 12vh, 8rem) auto 3rem; }
h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 500; letter-spacing: -.04em; }
header p { margin: .65rem 0 2rem; color: #66635d; font-family: system-ui, sans-serif; }
input { width: 100%; border: 1px solid #aaa69d; border-radius: .25rem; padding: 1rem 1.1rem; background: white; color: inherit; font: 1.15rem system-ui, sans-serif; box-shadow: 0 4px 18px #332d2210; }
input:focus { outline: 3px solid #b98a4960; border-color: #795927; }
#status { min-height: 1.4em; margin: .7rem 0; color: #6a665e; font: .9rem system-ui, sans-serif; }
article { padding: 1.35rem 0; border-top: 1px solid #dedbd4; }
article p { margin: 0; font-size: 1.12rem; line-height: 1.58; }
article cite { display: block; margin-top: .65rem; color: #6a665e; font: normal .88rem/1.45 system-ui, sans-serif; }
mark { background: #f2d9a4; color: inherit; padding: 0; }
footer { margin-top: 2.5rem; font: .85rem system-ui, sans-serif; }
footer a { color: #6a665e; text-underline-offset: .2em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { main { margin-top: 2.5rem; } input { font-size: 1rem; } }