:root {
  color-scheme: light;
  background: #f8f4eb;
  color: #231b13;
  font: 16px/1.75 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { margin: 0; min-height: 100vh; }
.wrap { box-sizing: border-box; width: min(100% - 40px, 700px); margin-inline: auto; }
header { padding-block: 36px 16px; border-bottom: 2px solid #bd8b27; }
.brand { margin: 0; font: 700 2.2rem/1.1 Georgia, serif; letter-spacing: -.04em; }
.subtitle { margin: 6px 0 0; color: #735322; font-size: .9rem; }
main { padding-block: clamp(40px, 9vw, 78px) 36px; }
h1 { margin: 0; font-size: clamp(2.3rem, 7vw, 4rem); letter-spacing: -.06em; line-height: 1.12; }
.intro { color: #574534; margin: 18px 0 38px; }
h2 { font-size: 1.12rem; margin: 0; }
article { border-top: 1px solid #dcd2c0; padding-block: 16px; }
article:first-of-type { margin-top: 9px; }
h3 { margin: 0; font-size: 1.02rem; }
article p { margin: 6px 0 0; color: #574534; }
footer { border-top: 1px solid #dcd2c0; padding-block: 18px 32px; font-size: .88rem; }
a { color: #664715; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #805716; outline-offset: 4px; }