:root{--bg:#f6f4ef;--fg:#1f1f1c;--muted:#6d6a62;--line:#e2ded4;--accent:#b5562f}
*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:inherit;text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;max-width:1080px;margin:0 auto;padding:28px 24px}
.logo{font-weight:700;font-size:20px;letter-spacing:-.02em}.logo span{color:var(--accent)}
nav a{margin-left:28px;color:var(--muted);font-size:15px}nav a:hover,nav a.on{color:var(--fg)}
main{max-width:1080px;margin:0 auto;padding:0 24px}
.hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted);margin-bottom:18px}
h1{font-size:clamp(32px,5vw,54px);line-height:1.1;letter-spacing:-.03em;font-weight:650;margin-bottom:20px}
h2{font-size:26px;letter-spacing:-.02em;margin-bottom:18px}
h3{font-size:18px;margin:16px 0 6px}
.lead{font-size:19px;color:var(--muted);max-width:620px;margin-bottom:28px}
.btn{display:inline-block;background:var(--fg);color:var(--bg);padding:12px 22px;border-radius:999px;font-size:15px}
.btn:hover{background:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;padding:56px 0}
.card p{color:var(--muted);font-size:15px}
.swatch{aspect-ratio:4/3;border-radius:6px}
.s1{background:linear-gradient(135deg,#d9cfbf,#efe9de)}
.s2{background:linear-gradient(135deg,#c9b8a6,#e7dccd)}
.s3{background:linear-gradient(135deg,#b9b3a4,#dedad0)}
.note{padding:40px 0 72px;border-top:1px solid var(--line)}
.note ol{padding-left:20px;max-width:640px}.note li{margin-bottom:10px}
.page{padding:64px 0 80px;max-width:680px}.page p{margin-bottom:16px}
.muted{color:var(--muted)}
footer{max-width:1080px;margin:0 auto;padding:32px 24px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}