:root{--bg:#E8EDEA;--ink:#1D3B33;--pine:#2F5D50;--wood:#C79A5B;--wood-d:#8A5F2E;--paper:#F7F9F8;--text:#22302C}
@media(prefers-color-scheme:dark){:root{--bg:#14211D;--ink:#E4EBE7;--paper:#1B2C27;--text:#D5DED9;--pine:#7FB5A4}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:1.05rem/1.65 'Source Serif 4',Georgia,serif}
h1,h2,h3,.logo,.btn,label,.price strong{font-family:'Bricolage Grotesque',system-ui,sans-serif}
h1{font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.05;font-weight:800;color:var(--ink);max-width:16ch}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1.15;color:var(--ink);margin-bottom:.8rem;max-width:22ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--wood);outline-offset:3px}
section{padding:4.5rem clamp(1.2rem,6vw,5rem)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1.2rem,6vw,5rem);background:var(--bg);border-bottom:2px solid var(--ink)}
.logo{font-weight:800;font-size:1.4rem;text-decoration:none;color:var(--ink)}
.logo span{font-weight:500;color:var(--wood-d);margin-left:.15em}
nav{display:flex;gap:1.5rem;align-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:500}
nav a{text-decoration:none}nav a:hover{text-decoration:underline}
.btn-nav{background:var(--ink);color:var(--bg);padding:.5rem 1rem;border-radius:4px}
.menu-btn{display:none;font:inherit;background:none;border:2px solid var(--ink);color:var(--ink);padding:.3rem .8rem;border-radius:4px}
.btn{display:inline-block;background:var(--wood);color:#1a1208;border:0;padding:.85rem 1.4rem;border-radius:4px;font-weight:700;text-decoration:none;cursor:pointer;font-size:1rem;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center;min-height:80vh}
.hero-text p{margin-top:1.4rem;max-width:52ch;font-size:1.15rem}
.hero-rack{position:relative;height:440px;max-width:340px;justify-self:center;width:100%}
.post,.shelf{position:absolute;background:repeating-linear-gradient(90deg,var(--wood) 0 9px,#B88A4A 9px 11px,var(--wood) 11px 22px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.post{top:0;bottom:0;width:26px}.post.l{left:0}.post.r{right:0}
.shelf{left:0;right:0;height:20px;transform:scaleX(0);transform-origin:left;animation:grow .7s cubic-bezier(.2,.8,.2,1) forwards}
.s1{top:8%}.s2{top:32%;animation-delay:.15s}.s3{top:56%;animation-delay:.3s}.s4{top:80%;animation-delay:.45s}
@keyframes grow{to{transform:scaleX(1)}}
/* band */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;background:var(--ink);color:var(--bg);padding-block:1.6rem}
.band p{font-family:'Bricolage Grotesque',sans-serif}.band strong{display:block;font-size:1.5rem;color:var(--wood)}
/* config */
.config{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.config form{display:grid;gap:1.2rem;margin:1.5rem 0}
label{display:grid;gap:.4rem;font-weight:700;color:var(--ink)}
select,input,textarea{font:inherit;font-weight:400;padding:.65rem;border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--text)}
input[type=range]{padding:0;accent-color:var(--wood-d)}
.price{margin-bottom:1.2rem}.price strong{font-size:2rem;color:var(--ink);display:block}.price small{display:block}
.preview{position:relative;height:420px;background:var(--paper);border:2px solid var(--ink);border-radius:6px;display:flex;justify-content:center;align-items:flex-end;padding:20px}
.rk{position:relative;height:100%;transition:width .35s}
.rk .post{width:16px}.rk .shelf{height:14px;transform:none;animation:none;transition:top .35s}
.rk .lbl{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font:600 .8rem 'Bricolage Grotesque',sans-serif}
.preview.pine .post,.preview.pine .shelf{--wood:#D8B27A}.preview.euca .post,.preview.euca .shelf{--wood:#B5703F}.preview.roble .post,.preview.roble .shelf{--wood:#8A6034}
/* models */
.models .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
article{background:var(--paper);border:2px solid var(--ink);border-radius:6px;overflow:hidden}
article h3,article p{padding:0 1.2rem}article h3{margin-top:1rem;color:var(--ink)}article p{margin:.4rem 0}
.from{font-weight:600;padding-bottom:1.2rem!important;color:var(--wood-d)}
.swatch{height:110px}
.w1{background:repeating-linear-gradient(95deg,#D8B27A 0 14px,#C79A5B 14px 17px)}
.w2{background:repeating-linear-gradient(85deg,#B5703F 0 18px,#9A5C30 18px 21px)}
.w3{background:repeating-linear-gradient(92deg,#8A6034 0 12px,#6F4A25 12px 15px)}
/* shop */
.shop{background:var(--paper)}.cols{columns:2;column-gap:3rem;max-width:90ch;margin-top:1rem}.cols p{margin-bottom:1rem}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact ul{list-style:none;padding:0;margin-top:1.2rem;display:grid;gap:.6rem}
.contact form{display:grid;gap:1rem}
.status{min-height:1.5rem;font-weight:600}.status.err{color:#B3321F}
footer{background:var(--ink);color:var(--bg);text-align:center;padding:1.4rem}
@media(max-width:820px){
 .hero,.config,.contact,.models .grid{grid-template-columns:1fr}
 .hero{min-height:auto}.band{grid-template-columns:1fr 1fr}.cols{columns:1}
 .menu-btn{display:block}
 nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--bg);padding:1rem clamp(1.2rem,6vw,5rem);border-bottom:2px solid var(--ink)}
 nav.open{display:flex}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.shelf{transform:none}}