:root { --ink: #10202b; --paper: #f5f2ea; --accent: #d9482b; --muted: #5d6b73; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; }
a { color: inherit; }
.top { display: flex; align-items: center; gap: 2rem; padding: 1rem 5vw; border-bottom: 1px solid #0001; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; text-decoration: none; }
.top nav { display: flex; gap: 1.5rem; margin-left: auto; }
.top nav a, .cart { text-decoration: none; font-size: .95rem; }
.cart { font-weight: 600; }
.hero { min-height: 62vh; display: flex; align-items: end; padding: 4rem 5vw; color: #fff;
  background: linear-gradient(180deg, #0b1a24 0%, #1d3a4a 55%, #c9663f 100%); }
.hero div { max-width: 40rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; opacity: .8; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; margin: .2rem 0 1rem; }
.button { display: inline-block; margin-top: 1rem; padding: .8rem 1.4rem; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; padding: 4rem 5vw; }
.grid article { background: #fff; padding: 1rem; }
.grid h2 { font-size: 1.1rem; margin: .8rem 0 .2rem; }
.grid p { color: var(--muted); margin: 0 0 .6rem; }
.swatch { aspect-ratio: 4 / 3; }
.s1 { background: linear-gradient(135deg, #2f5d50, #9cc3a8); }
.s2 { background: linear-gradient(135deg, #3c2f2a, #c58b5c); }
.s3 { background: linear-gradient(135deg, #8a1f14, #e0765c); }
.s4 { background: linear-gradient(135deg, #1b2c4a, #7f9cc4); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; padding: 0 5vw 4rem; }
.split ul { padding-left: 1.1rem; }
footer { padding: 2rem 5vw; border-top: 1px solid #0001; color: var(--muted); font-size: .9rem; }