:root{color-scheme:light;--ink:#22352c;--muted:#4e6056;--accent:#8b383d;--paper:#f7f3eb;--line:#ddd5c8}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 system-ui,sans-serif}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible{outline:3px solid #8b383d;outline-offset:4px}
img{display:block;width:100%;height:auto}
h1,h2,h3,.wordmark,footer p{font-family:Georgia,serif;font-weight:400;line-height:1.07;margin:0}
h1{font-size:clamp(2.7rem,6vw,6.4rem);letter-spacing:-.06em}
h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em}
h3{font-size:1.7rem}
p{margin:.8rem 0}
.mast,main,footer{max-width:1440px;margin:auto;padding-inline:clamp(1rem,5vw,5rem)}
.mast{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.2rem;border-bottom:1px solid var(--line)}
.wordmark{font-size:clamp(1.25rem,2.4vw,1.8rem);text-decoration:none}
.wordmark span{color:var(--accent)}
.skip{position:absolute;left:1rem;top:1rem;transform:translateY(-200%);background:white;padding:.5rem;z-index:1}
.skip:focus{transform:none}
.hero{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:clamp(1.5rem,5vw,5rem);padding-block:clamp(2.2rem,7vw,6rem)}
.hero.detail{padding-top:2rem}
.eyebrow{color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:750}
.intro{max-width:47ch;color:var(--muted);font-size:1.1rem}
.button{display:inline-block;background:#284b39;color:white;padding:.75rem 1.1rem;margin-top:.6rem;border-radius:.2rem;text-decoration:none;font-weight:650}
.button:hover{background:#173729}
.art{margin:0;background:#fffdf8;border:1px solid var(--line);padding:.5rem}
figcaption{text-align:right;color:var(--muted);font-size:.75rem;padding:.35rem .3rem 0}
.catalog{padding:1.4rem 0 3rem;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.8rem}
.tile{background:#fffdf8;border:1px solid var(--line)}
.tile a{height:100%;display:block;text-decoration:none}
.tile a:hover h3{text-decoration:underline}
.tile a div{padding:1rem 1.2rem}
.tile h3 span{font:1rem system-ui;color:var(--accent)}
.tile p:last-child,.note p{color:var(--muted)}
.crumb{padding-top:1.4rem;font-size:.9rem}
.designs{padding-left:1.85rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 3rem;margin:1.5rem 0 0}
.designs li{padding:.7rem .35rem;border-bottom:1px solid var(--line)}
.designs li::marker{color:var(--accent);font-weight:700}
.note{background:#eee7da;padding:clamp(1rem,4vw,3rem);margin-bottom:3rem}
.note h2{font-size:clamp(1.6rem,3vw,2.5rem)}
footer{border-top:1px solid var(--line);padding-block:2rem}
footer p{font-size:1.3rem;margin-bottom:.45rem}
footer small{color:var(--muted)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.hero,.grid,.designs{grid-template-columns:1fr}.mast>a:last-child{font-size:.85rem}}