* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Georgia, 'Times New Roman', serif; margin: 0; color: #2b2b2b; background: #faf8f4; line-height: 1.6; }
header { background: #5c4033; color: #fff; padding: 1.5rem 2rem; }
header h1 { margin: 0 0 .3rem; font-size: 1.7rem; }
header p { margin: 0; font-style: italic; opacity: .85; }
nav { background: #7a5c44; padding: .6rem 2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
nav a { color: #fff; text-decoration: none; margin-right: 1.2rem; font-family: Verdana, sans-serif; font-size: .85rem; padding: .3rem 0; }
nav a:hover { text-decoration: underline; }
main { max-width: 860px; margin: 0 auto; padding: 2rem; }
h2 { border-bottom: 2px solid #c9b8a3; padding-bottom: .3rem; }
h3 { margin-bottom: .2rem; }
.meta { color: #8a7a66; font-size: .85rem; margin-top: 0; }
article { border-bottom: 1px solid #e4dccc; padding: 1rem 0; margin-bottom: .5rem; }
blockquote { border-left: 4px solid #c9b8a3; margin-left: 0; padding-left: 1rem; color: #555; }
footer { background: #efe9df; border-top: 2px solid #c9b8a3; padding: 1rem 2rem; font-size: .8rem; color: #6b6b6b; }
.note { background: #fdf6e3; border: 1px solid #e0d3a8; padding: .8rem 1rem; font-size: .85rem; }
a { color: #7a5c44; }
img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
  header, nav, footer { padding-left: 1rem; padding-right: 1rem; }
  main { padding: 1.2rem 1rem; }
  header h1 { font-size: 1.3rem; }
  nav a { font-size: .95rem; margin-right: 0; display: block; width: 100%; border-bottom: 1px solid rgba(255,255,255,.2); }
  nav { flex-direction: column; gap: 0; padding: .3rem 1rem; }
}