:root { --bg:#f7f5f1; --ink:#2b2a27; --mut:#726e66; --line:#e4e1d9; --card:#fffdfa; --accent:#5a6b4d; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Onest',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--ink); line-height:1.68; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1000px; margin:0 auto; padding:0 1.6rem; }
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-0.01em; }
header { position:sticky; top:0; background:rgba(247,245,241,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:20; }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.2rem; letter-spacing:-0.01em; }
.brand small { display:block; font-family:'Onest',sans-serif; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--mut); font-weight:500; }
nav a { font-size:0.9rem; color:var(--mut); margin-left:1.5rem; border-bottom:1px solid transparent; padding-bottom:3px; transition:color .15s; }
nav a:hover { color:var(--ink); border-color:var(--ink); }
.hero { padding:5.5rem 0 4rem; display:grid; grid-template-columns:1.25fr 1fr; gap:3rem; align-items:center; }
.hero .tag { font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:#a39e93; margin-bottom:1.3rem; }
.hero h1 { font-size:3rem; line-height:1.08; margin-bottom:1.5rem; }
.hero p { font-size:1.1rem; font-weight:300; color:#53504a; max-width:52ch; }
.hero .cta { margin-top:1.8rem; }
.btn { display:inline-block; border:1px solid var(--ink); border-radius:2px; padding:0.6rem 1.3rem; font-size:0.88rem; }
.btn:hover { background:var(--ink); color:var(--bg); }
.figure { aspect-ratio:4/5; border-radius:4px; background:radial-gradient(120% 80% at 70% 20%, #e9e3d4 0%, transparent 60%),linear-gradient(150deg,#d8cfbb 0%,#c3b79c 55%,#aa9d7f 100%); border:1px solid var(--line); position:relative; overflow:hidden; }
.figure span { position:absolute; left:1.2rem; bottom:1.1rem; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:#59503c; }
section { padding:3.6rem 0; border-top:1px solid var(--line); }
.eyebrow { font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:#a39e93; margin-bottom:0.9rem; }
h2 { font-size:1.9rem; margin-bottom:1rem; }
.lead { font-weight:300; color:#53504a; max-width:62ch; font-size:1.02rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.5rem; margin-top:2.2rem; }
.card { background:var(--card); border:1px solid #ece9e1; border-radius:8px; padding:1.5rem; }
.card .sw { height:84px; border-radius:5px; margin-bottom:1rem; border:1px solid rgba(0,0,0,0.05); }
.card h3 { font-size:1.12rem; margin-bottom:0.35rem; }
.card p { font-size:0.9rem; font-weight:300; color:var(--mut); }
.card .price { margin-top:0.8rem; font-size:0.86rem; color:var(--accent); font-weight:500; }
.card .soldout { margin-top:0.8rem; font-size:0.82rem; color:#b06a52; font-weight:500; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:start; }
.two p { font-weight:300; color:#53504a; margin-bottom:1rem; }
.more { display:inline-block; margin-top:1.6rem; font-size:0.88rem; border-bottom:1px solid var(--mut); padding-bottom:2px; color:var(--mut); }
.more:hover { color:var(--ink); border-color:var(--ink); }
.page-head { padding:4.5rem 0 1rem; }
.page-head h1 { font-size:2.6rem; line-height:1.1; margin-bottom:1rem; }
.article { max-width:66ch; }
.article p { font-weight:300; color:#47443e; margin-bottom:1.2rem; }
.article h3 { font-size:1.3rem; margin:2rem 0 0.8rem; }
.steps { counter-reset:s; margin-top:1.6rem; }
.steps li { list-style:none; counter-increment:s; position:relative; padding:0.9rem 0 0.9rem 3rem; font-weight:300; color:#47443e; border-bottom:1px solid #ecece6; }
.steps li strong { font-weight:500; color:var(--ink); }
.steps li::before { content:counter(s); position:absolute; left:0; top:0.8rem; width:2rem; height:2rem; border:1px solid #cfc9bc; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.82rem; color:#8a867a; font-family:'Fraunces',serif; }
table.spec { width:100%; border-collapse:collapse; margin-top:1.4rem; font-size:0.92rem; font-weight:300; }
table.spec th, table.spec td { text-align:left; padding:0.7rem 0.4rem; border-bottom:1px solid #ecece6; }
table.spec th { font-family:'Onest'; font-weight:500; color:var(--mut); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; }
.journal li { list-style:none; display:grid; grid-template-columns:140px 1fr; gap:1.4rem; padding:1.3rem 0; border-bottom:1px solid #ecece6; }
.journal time { font-size:0.82rem; color:#a39e93; }
.journal h3 { font-size:1.1rem; margin-bottom:0.3rem; }
.journal p { font-size:0.92rem; font-weight:300; color:var(--mut); }
.info { display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; margin-top:2rem; }
.info p { font-weight:300; color:#53504a; }
.info strong { font-weight:500; color:var(--ink); }
.map { aspect-ratio:16/7; border-radius:4px; margin-top:2.4rem; background:linear-gradient(0deg,#e8e4da,#e8e4da) padding-box,repeating-linear-gradient(0deg,#ddd8cc 0 1px,transparent 1px 42px),repeating-linear-gradient(90deg,#ddd8cc 0 1px,transparent 1px 42px); background-color:#eceae2; border:1px solid var(--line); position:relative; }
.map span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:0.8rem; color:#8a867a; letter-spacing:0.1em; text-transform:uppercase; }
footer { border-top:1px solid var(--line); background:#f2efe9; margin-top:1rem; }
footer .cols { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; padding:3rem 0 2rem; }
footer h4 { font-family:'Onest'; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:#9a958a; margin-bottom:0.9rem; font-weight:600; }
footer p, footer a { font-size:0.9rem; font-weight:300; color:#5c584f; display:block; margin-bottom:0.4rem; }
footer a:hover { color:var(--ink); }
.legal { border-top:1px solid var(--line); padding:1.2rem 0; font-size:0.8rem; color:#9a958a; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; }
.err { min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.err .code { font-family:'Fraunces',serif; font-size:5rem; color:#e0ddd3; line-height:1; margin-bottom:0.6rem; }
.err h1 { font-size:1.6rem; margin-bottom:0.7rem; }
.err p { font-weight:300; color:var(--mut); margin-bottom:1.6rem; }
@media (max-width:760px){ .hero{grid-template-columns:1fr;gap:2rem;} .hero h1{font-size:2.3rem;} .two,.info{grid-template-columns:1fr;gap:1.4rem;} footer .cols{grid-template-columns:1fr 1fr;} nav{display:none;} .page-head h1{font-size:2rem;} .journal li{grid-template-columns:1fr;gap:0.3rem;} }