@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{--paper:#f8f6ef;--ink:#243128;--forest:#233c31;--muted:#566257;--rule:#d9ded2;--cream:#eee9db;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
h1,h2,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;line-height:.99;letter-spacing:-.023em}
h1{font-size:clamp(3.65rem,6.3vw,7.6rem)}
h2{font-size:clamp(3rem,5vw,5.35rem)}
:focus-visible{outline:3px solid #a66b36;outline-offset:4px}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{position:absolute;z-index:3;background:white;padding:10px}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 5.4%;min-height:77px;background:var(--forest);color:#faf5e7;border-bottom:1px solid #ffffff35}
.brand{display:block;flex:none}
.brand img{width:clamp(116px,12vw,156px);height:auto}
.header .small{background:#e8dfc7;color:var(--ink)}
.header .small:hover{background:#fff1d4}
.header :focus-visible{outline-color:#e8dfc7}
nav{display:flex;gap:clamp(18px,4vw,52px);font-size:.91rem;font-weight:600}
nav a:hover,.inline:hover{text-decoration:underline;text-underline-offset:5px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--forest);color:white;border:1px solid transparent;padding:13px 19px;font-weight:700;font-size:.9rem;border-radius:3px}
.button:hover{background:#345849}
.small{padding:9px 13px}
.light{background:#e8dfc7;color:var(--ink)}
.light:hover{background:#fff1d4}
.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--forest);color:#faf5e7}
.hero-copy{padding:clamp(55px,8.5vw,145px) 6% clamp(54px,7vw,115px) 10.8%}
.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-weight:700;font-size:.73rem;margin-bottom:22px}
.hero em{color:#e4d5ab}
.hero-copy>p:nth-of-type(2){max-width:360px;margin:24px 0 28px;color:#e3e8dc}
.hero-photo{height:100%;width:100%;object-fit:cover;object-position:center}
.section{max-width:1600px;margin:auto;padding:76px 5.4%}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.section-head p,.story p:not(.eyebrow),.quote p{color:var(--muted)}
.toolbar{border-top:1px solid var(--rule);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:7px}
.subfilters{margin-top:12px;padding-left:12px;border-left:2px solid var(--rule)}
.subfilters[hidden]{display:none}
.filters button{border:1px solid var(--rule);background:transparent;border-radius:24px;padding:7px 13px;font-size:.84rem}
.filters button[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:white}
input,select,textarea{width:100%;border:1px solid #aeb8aa;border-radius:3px;background:#fffdf8;padding:10px 12px}
.results{font-size:.81rem;color:var(--muted);margin:14px 0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{display:grid;grid-template-columns:1fr auto;align-content:start;gap:13px;background:#fffdf8;border:1px solid var(--rule);border-radius:4px;text-align:left;padding:0 0 16px;overflow:hidden;font-weight:600}
.card img{grid-column:span 2;width:100%;aspect-ratio:1.2;object-fit:contain;background:#eeeade}
.card span{padding-left:14px}
.card span[aria-hidden]{padding:0 13px 0 0}
.card .card-summary{grid-column:1/-1;padding:0 14px;color:var(--muted);font-size:.84rem;font-weight:400}
.families{padding-bottom:46px}
.catalog{padding-top:38px;border-top:1px solid var(--rule)}
.family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.family-grid a{background:#fffdf8;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.family-grid a:hover{border-color:var(--forest)}
.family-grid img{width:100%;height:clamp(145px,19vw,290px);object-fit:contain;background:var(--cream)}
.family-grid h3{display:flex;justify-content:space-between;gap:12px;margin:12px 16px 3px;font:400 2rem/1.05 var(--serif)}
.family-grid p{margin:0 16px 16px;color:var(--muted);font-size:.9rem}
@media(max-width:600px){.family-grid{grid-template-columns:1fr;gap:12px}.family-grid a{display:grid;grid-template-columns:110px 1fr}.family-grid img{grid-row:span 2;height:100%;min-height:110px}.family-grid h3{font-size:1.65rem}}
.card:hover{border-color:var(--forest);background:#eeefe5}
.story{display:grid;grid-template-columns:1fr 1fr;background:var(--cream)}
.story>img{height:100%;width:100%;min-height:380px;object-fit:cover}
.story-copy{align-self:center;padding:clamp(32px,6vw,88px)}
.story-copy h2,.quote h2{margin-bottom:21px}
.story-copy p:not(.eyebrow),.quote p{margin-bottom:16px;max-width:47ch}
.inline{font-weight:700;color:var(--forest);overflow-wrap:anywhere}
.credentials{display:flex;justify-content:center;align-items:center;gap:clamp(18px,7vw,100px);padding:23px 6%;border-bottom:1px solid var(--rule)}
.credentials img{width:clamp(50px,9vw,100px);height:60px;object-fit:contain}
.quote{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form label{display:grid;gap:5px;font-weight:600;font-size:.86rem}
.wide{grid-column:span 2}
.quote .form-note{font-size:.78rem;margin:9px 0 0}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--forest);color:#f8f6ef;padding:22px 5.4%;font-size:.86rem}
dialog{position:fixed;max-width:min(850px,92vw);max-height:88dvh;padding:0;border:0;border-radius:6px;color:var(--ink);background:var(--paper)}
dialog[open]{display:grid;grid-template-columns:1fr 1fr}
dialog::backdrop{background:#17251cc9}
dialog>img{width:100%;height:100%;min-height:300px;object-fit:contain;background:var(--cream)}
.detail-copy{padding:42px 25px}
.detail-copy h2{font-size:clamp(2.3rem,4vw,4rem)}
.detail-copy p:not(.eyebrow){margin:14px 0}
.close{position:absolute;right:10px;top:10px;width:34px;height:34px;line-height:1;background:white;border:1px solid var(--rule);border-radius:50%;font-size:1.5rem}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-copy{padding-left:8%}}
@media(max-width:660px){.header{flex-wrap:wrap;gap:12px}.header nav{order:3;width:100%;justify-content:space-between;border-top:1px solid var(--rule);padding-top:10px}.hero,.story,.quote,dialog[open]{grid-template-columns:1fr}.hero-copy{padding:45px 6%}.hero-photo{height:260px}.section{padding:50px 5.4%}.section-head{display:block}.section-head p{margin-top:12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{gap:9px;font-size:.84rem}.card span{padding-left:9px}.search{width:100%}.story>img{min-height:0;height:240px}.quote{gap:22px}dialog>img{min-height:0;height:210px}.detail-copy{padding:24px}}
@media(max-width:370px){form{grid-template-columns:1fr}.wide{grid-column:auto}}
@media(max-width:660px){.header nav{border-top-color:#ffffff35}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
