:root { color: #16312e; background: #faf8f2; font: 16px/1.65 "Source Sans 3", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #164d40; text-underline-offset: .25em; }
a:focus-visible, select:focus-visible { outline: 3px solid #a74228; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; top: -100px; left: 12px; background: white; padding: 12px; }
.skip:focus { top: 12px; }
.mast, .footer-inner { max-width: 1280px; margin: auto; padding: 24px clamp(20px, 5vw, 70px); }
.mast { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
nav { display: flex; flex-wrap: wrap; gap: 14px 25px; }
.wordmark { font-weight: 800; font-size: 1.2rem; text-decoration: none; }
.hero { background: #e2eae0; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(25px, 5vw, 75px); padding: clamp(32px, 6vw, 90px) max(20px, calc((100vw - 1140px)/2)); }
.hero img { width: 100%; display: block; aspect-ratio: 5/4; object-fit: cover; }
h1, h2, h3 { line-height: 1.15; font-family: "DM Serif Text", Georgia, serif; }
h1 { font-size: clamp(2.5rem, 5.7vw, 5.2rem); margin: .25em 0; letter-spacing: -.045em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.category { color: #31554c; font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.primary { display: inline-block; margin: 8px 14px 8px 0; padding: 12px 16px; background: #173c33; color: white; text-decoration: none; }
.content { max-width: 1180px; margin: auto; padding: clamp(25px, 5vw, 62px) 20px; }
.prose { max-width: 840px; overflow-wrap: anywhere; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 4.1rem); }
.prose img { max-width: 100%; height: auto; }
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 20px; margin: 22px 0 34px; }
.shelf-item { border-top: 3px solid #31554c; padding: 16px; background: #fffdf8; }
.compare { padding: 22px; background: #e2eae0; }
.selects { display: flex; flex-wrap: wrap; gap: 18px; }
label { display: block; font-weight: 600; }
select { display: block; max-width: 100%; font: inherit; padding: 8px; color: inherit; background: #fffdf8; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; overflow-wrap: anywhere; }
th, td { text-align: left; border-bottom: 1px solid #a9bcb3; padding: 8px; vertical-align: top; }
footer { border-top: 1px solid #a9bcb3; background: #e2eae0; }
@media(max-width: 680px) { .hero { grid-template-columns: 1fr; } .hero img { aspect-ratio: 16/9; } .compare { padding: 14px; } }