:root{
  --ink:#1c1a17;
  --paper:#f6f1e7;
  --paper-2:#efe7d7;
  --rule:#d8ccb4;
  --accent:#8a2b2b;
  --muted:#6b6457;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-weight:300;
}
.wrap{max-width:1020px;margin:0 auto;padding:0 24px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Spectral',Georgia,serif;font-weight:600;line-height:1.2;color:var(--ink)}

header{border-bottom:1px solid var(--rule);background:var(--paper)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.brand{font-family:'Spectral',serif;font-weight:600;font-size:1.35rem;color:var(--ink);display:flex;flex-direction:column;line-height:1.15}
.brand small{font-family:'Inter',sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
nav{display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--muted);font-size:.86rem;letter-spacing:.04em}
nav a:hover{color:var(--accent);text-decoration:none}

.hero{padding:76px 0 64px;border-bottom:1px solid var(--rule)}
.hero h1{font-size:2.9rem;margin:0 0 18px;max-width:16ch}
.hero p{font-size:1.12rem;max-width:56ch;color:#3b3730;margin:0 0 28px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:2px;font-size:.84rem;letter-spacing:.09em;text-transform:uppercase}
.btn:hover{background:#6f2121;text-decoration:none}

section{padding:58px 0;border-bottom:1px solid var(--rule)}
.lead{font-size:1.28rem;font-family:'Spectral',serif;max-width:60ch;color:#34302a}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card h3{margin:0 0 10px;font-size:1.18rem}
.card p{margin:0;color:var(--muted);font-size:.96rem}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}

.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:30px}
.meta div{border-top:2px solid var(--ink);padding-top:12px}
.meta dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:4px 0 0;font-family:'Spectral',serif;font-size:1.05rem}

figure{margin:0}
.swatch{height:200px;border-radius:2px;background:
  repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 14px,#e7dcc6 14px,#e7dcc6 28px);
  border:1px solid var(--rule)}

footer{padding:44px 0;color:var(--muted);font-size:.86rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.err{min-height:52vh;display:flex;align-items:center}
.err .code{font-family:'Spectral',serif;font-size:4.4rem;color:var(--accent);line-height:1}
.err h1{font-size:1.7rem;margin:.4em 0 .3em}

@media(max-width:720px){
  .hero h1{font-size:2.1rem}
  .grid,.grid.two,.meta{grid-template-columns:1fr}
  nav{gap:16px}
}