:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; color:#29231d; background:#eeeae3; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; }
.site { max-width:1140px; margin:0 auto; min-height:100vh; background:#fff; box-shadow:0 0 28px #493c2b15; }
.site-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:28px; height:150px; padding:12px 28px; overflow:hidden; background:#dfc79f url("/images/birch-background.jpg") center center / cover no-repeat; border-bottom:3px solid #8b6437; }
.site-brand { display:block; height:120px; flex-shrink:0; }
.site-brand img { display:block; width:auto; height:100%; }
.header-message { min-width:0; color:#4e2b07; text-align:center; display:flex; flex-direction:column; gap:7px; line-height:1.3; }
.header-message strong { font-size:clamp(.9rem,1.5vw,1.18rem); }
.header-message span { font-size:clamp(.76rem,1.05vw,.91rem); }
nav { display:flex; align-items:baseline; flex-wrap:nowrap; justify-content:flex-end; column-gap:20px; }
nav a { display:inline-block; color:#4e2b07; text-decoration:none; font-size:0.94rem; font-weight:bold; line-height:1.4; padding:8px 0; border-bottom:2px solid transparent; white-space:nowrap; }
nav a:hover,nav a:focus-visible { border-color:#4e2b07; }
main { padding:30px clamp(18px,4vw,48px) 55px; }
.intro { text-align:center; margin:0 auto 32px; }
h1 { font-size:clamp(1.45rem,3vw,2rem); margin:0 0 10px; }
.intro p { margin:0; color:#685d52; }
h2 { font-size:1.25rem; margin:0 0 17px; }
.products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; }
.product { display:block; border:1px solid #e4ded5; border-radius:8px; overflow:hidden; text-decoration:none; background:#fff; transition:transform .15s ease,box-shadow .15s ease; }
.product:hover,.product:focus-visible { transform:translateY(-3px); box-shadow:0 8px 24px #3c2c1a20; outline-offset:3px; }
.product-photo { display:block; width:100%; aspect-ratio:1.75; object-fit:cover; object-position:center; }
.placeholder { aspect-ratio: 1.75; background:linear-gradient(145deg,#f7f5f0,#eae4da); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; color:#89775e; font-size:.79rem; font-weight:bold; letter-spacing:.11em; text-align:center; padding:10px; }
.symbol { font-family:Georgia,serif; font-size:clamp(2.5rem,6vw,4.6rem); font-weight:normal; line-height:1; color:#9c7b53; letter-spacing:0; }
.product h3 { font-size:1.13rem; margin:15px 17px 5px; }
.product p { font-size:.9rem; line-height:1.5; color:#6a6258; margin:0 17px 18px; }
.site-footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid #e5dfd5; padding:18px 30px; font-size:.78rem; color:#766b60; }
@media(max-width:900px) { .site-header { column-gap:15px; padding-inline:18px; } .site-brand { height:105px; } nav { column-gap:13px; } nav a { font-size:.84rem; } .header-message span { font-size:.76rem; } }
@media(max-width:690px) { .site-header { height:auto; overflow:visible; grid-template-columns:auto 1fr; gap:6px 12px; padding:10px 15px 12px; } .site-brand { height:100px; grid-row:1; } .header-message { grid-row:1; grid-column:2; text-align:center; } nav { grid-column:1 / -1; grid-row:2; justify-content:center; flex-wrap:wrap; gap:3px 18px; } main { padding-top:24px; } .products { gap:14px; } .product h3 { font-size:1rem; margin:12px 12px 5px; } .product p { margin:0 12px 13px; font-size:.83rem; } }
@media(max-width:440px) { .products { grid-template-columns:1fr; } .product-photo { display:block; width:100%; aspect-ratio:1.75; object-fit:cover; object-position:center; }
.placeholder,.product-photo { aspect-ratio:1.9; } .intro { margin-bottom:24px; } }
@media(prefers-reduced-motion:reduce) { .product { transition:none; } }

/* Shared header also works on pages without a navigation bar. */
.site-header nav a[aria-current="page"]{border-bottom-color:#4e2b07}