:root { color-scheme: light; color: #263831; background: #f7f4eb; font-family: system-ui, sans-serif; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { color: #a3482b; }
.wrap { width: min(1050px, calc(100% - 2.5rem)); margin-inline: auto; }
.masthead, .footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid #d6d8ca; }
.brand { text-decoration: none; font-size: 1.2rem; font-weight: 750; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(3rem, 8vw, 6.5rem); }
.eyebrow, small { color: #8d4029; font-size: .77rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.13; margin: 0 0 .65em; font-family: Georgia, serif; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); }
h3 { font-size: 1.45rem; margin-top: .5rem; }
.lede { max-width: 42rem; font-size: 1.13rem; color: #46554b; margin-bottom: 1.5rem; }
.button { display: inline-block; padding: .68rem 1rem; border-radius: .35rem; background: #294b40; color: #fff; text-decoration: none; }
.button:hover { color: #fff; background: #396755; }
figure { margin: 0; }
svg { display: block; width: 100%; }
figcaption { margin-top: .55rem; color: #526257; font-size: .86rem; }
.entries { padding-bottom: 4rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { background: #fffdf6; border: 1px solid #dedccd; border-radius: .65rem; padding: 1.2rem; text-decoration: none; }
.card p { margin: 0; }
.card:hover { border-color: #a3482b; }
.article { max-width: 760px; padding-block: 3.5rem; }
article { border-top: 1px solid #d6d8ca; padding-block: 1.65rem; scroll-margin-top: 1rem; }
article h2 { margin-top: .5rem; }
.footer { border-top: 1px solid #d6d8ca; border-bottom: 0; font-size: .92rem; }
@media (max-width: 690px) { .hero, .grid { grid-template-columns: 1fr; } .hero { padding-block: 2.5rem; } }