* { box-sizing: border-box; }
body { margin: 0; background: #fcfaf5; color: #252c27; font: 17px/1.6 system-ui, sans-serif; }
main { max-width: 640px; margin: 64px auto; padding: 0 24px; }
h1 { margin: 0 0 12px; font: 500 clamp(32px, 6vw, 44px)/1.15 Georgia, serif; }
header p, .hint, .byline, footer { color: #57615b; }
form { margin: 32px 0 44px; }
label { display: block; font-weight: 600; margin: 18px 0 6px; }
input, textarea { font: inherit; width: 100%; background: white; color: inherit; border: 1px solid #9ca69d; border-radius: 4px; padding: 10px 12px; }
textarea { resize: vertical; }
input[type=submit] { width: auto; max-width: 100%; cursor: pointer; background: #285443; color: white; border-color: #285443; padding: 11px 18px; }
input[type=submit]:hover { background: #1b3d30; }
:focus-visible { outline: 3px solid #b86c22; outline-offset: 3px; }
h2 { font-size: 20px; }
article { border-top: 1px solid #d1d7d0; padding: 16px 0; }
.body { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.byline, .hint, footer { font-size: 14px; }
.byline { margin: 0; overflow-wrap: anywhere; }
.notice { color: #285443; }
.errors { color: #9d2922; }
footer { border-top: 1px solid #d1d7d0; margin-top: 24px; padding-top: 18px; }
@media (max-width: 480px) { main { margin: 32px auto; padding: 0 20px; } }