@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Figtree:wght@400;600;700&display=swap");
:root{--ink:#2a1612;--ox:#8f1d2c;--paper:#f4ead8;--card:#fffaf1;--line:#e2d3be}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Figtree,system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
.demo-banner{background:var(--ox);color:#fff;text-align:center;padding:.5rem 1rem;font-size:.75rem;font-weight:700}
.demo-banner a{color:#fff}
.nav{display:flex;align-items:center;padding:1rem 6%;gap:1rem;position:sticky;top:0;background:#f4ead8ee;z-index:4}
.word{font-family:Fraunces,Georgia,serif;font-size:1.5rem;text-decoration:none}
.nav nav{margin-left:auto;display:flex;gap:1rem}
.cart{background:var(--ink);color:var(--paper);padding:.55rem .9rem;text-decoration:none;border-radius:999px;font-weight:700}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:70vh}
.hero-copy{padding:clamp(2rem,6vw,4rem) 8%}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.03em;line-height:1}
h1{font-size:clamp(2.6rem,6vw,4.4rem);max-width:10ch}
.hero-photo{background:#c9b7a0 center/cover}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;padding:1rem 6%}
.chip{border:1px solid var(--line);background:#fff;padding:.45rem .8rem;border-radius:999px;font:inherit;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 6% 3rem}
.product{background:var(--card);border:1px solid var(--line);padding:.8rem;display:flex;flex-direction:column}
.product img{height:220px;width:100%;object-fit:cover}
.product h3{margin:.7rem 0 .2rem;font-family:Fraunces,Georgia,serif}
.price{font-weight:700}
.product button{margin-top:auto;background:var(--ox);color:#fff;border:0;padding:.7rem;font:inherit;cursor:pointer}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(380px,100%);background:#fffaf1;border-left:1px solid var(--line);padding:1.2rem;transform:translateX(110%);transition:transform .25s;z-index:8;overflow:auto}
.drawer.open{transform:none}
.line{display:flex;justify-content:space-between;gap:8px;padding:.5rem 0;border-bottom:1px solid var(--line)}
.note{font-size:.85rem;color:#6d584c}
footer{padding:2rem 6%;font-size:.85rem}
@media(max-width:800px){.hero,.grid{grid-template-columns:1fr}.hero-photo{min-height:240px}.nav nav{display:none}}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}