
:root {
  --bg: #0f0d0b;
  --ink: #1c1712;
  --paper: #f3ede4;
  --soft: #e8dece;
  --card: #ffffff;
  --gold: #b88b4a;
  --gold-light: #dbc28f;
  --muted: #6d6358;
  --border: rgba(184, 139, 74, 0.2);
  --shadow: 0 18px 45px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Georgia, 'Times New Roman', serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:auto}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.hero{
  background: linear-gradient(rgba(8,6,5,.65), rgba(8,6,5,.72)), url('assets/brass-stone-valet-tray.jpeg') center/cover no-repeat;
  color:#fff;
  padding-bottom:64px;
}
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 0;
}
.brand{font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase}
.nav-links{display:flex; gap:22px; font-size:.95rem; color:rgba(255,255,255,.86)}
.hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center; min-height:70vh;
}
.eyebrow{display:inline-block; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--gold-light); margin-bottom:12px}
.hero-copy h1{font-size:clamp(2.3rem, 5vw, 4.5rem); line-height:1.02; margin:0 0 16px}
.hero-copy p{max-width:640px; color:rgba(255,255,255,.82); font-size:1.06rem}
.hero-card{background:rgba(255,255,255,.06); padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:24px; box-shadow:var(--shadow)}
.hero-card img{border-radius:16px; max-height:620px; object-fit:cover}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.button{padding:13px 18px; border-radius:999px; font-size:.95rem}
.button.primary{background:var(--gold); color:#fff}
.button.secondary{border:1px solid rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.06)}
.section{padding:78px 0}
.section-dark{background:#18130f;color:#f6f0e8}
.section-soft{background:#ece3d4}
.section-heading{margin-bottom:28px}
.section-heading.narrow{max-width:760px}
.section-heading h2{font-size:clamp(1.8rem, 3vw, 3rem); line-height:1.08; margin:0 0 10px}
.heading-text{color:var(--muted); max-width:700px}
.section-dark .heading-text{color:rgba(255,255,255,.74)}
.collection-grid,.catalog-grid,.featured-grid,.desk-gallery,.two-col-grid{
  display:grid; gap:22px;
}
.collection-grid{grid-template-columns:repeat(4,1fr)}
.catalog-grid{grid-template-columns:repeat(4,1fr)}
.featured-grid{grid-template-columns:1.2fr .8fr .8fr}
.two-col-grid{grid-template-columns:repeat(2,1fr); margin-bottom:22px}
.desk-gallery{grid-template-columns:repeat(3,1fr)}
.collection-card,.catalog-card,.feature-card,.info-card{
  background:var(--card); border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:var(--shadow)
}
.section-dark .feature-card{background:#221b15;border-color:rgba(219,194,143,.12)}
.collection-card, .info-card{padding:24px}
.collection-card h3,.catalog-card h3,.feature-copy h3,.info-card h3{margin:0 0 10px;font-size:1.2rem}
.collection-card p,.catalog-card p,.feature-copy p,.info-card li{color:var(--muted)}
.section-dark .feature-copy p{color:rgba(255,255,255,.72)}
.catalog-card img,.feature-card img{aspect-ratio: 4 / 3; object-fit:cover}
.feature-large{grid-row:span 2}
.feature-large img{aspect-ratio:1/1.05}
.feature-copy{padding:18px 18px 22px}
.info-card ul{margin:0;padding-left:20px}
.footer{background:#0d0b09;color:rgba(255,255,255,.82);padding:42px 0 52px}
.footer-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:22px}
.footer h3,.footer h4{color:#fff;margin:0 0 10px}
@media (max-width: 980px){
  .hero-inner,.featured-grid,.collection-grid,.catalog-grid,.desk-gallery,.footer-grid{grid-template-columns:1fr 1fr}
  .feature-large{grid-row:auto}
}
@media (max-width: 720px){
  .nav{flex-direction:column;gap:14px}
  .nav-links{flex-wrap:wrap;justify-content:center}
  .hero-inner,.collection-grid,.catalog-grid,.featured-grid,.desk-gallery,.two-col-grid,.footer-grid{grid-template-columns:1fr}
  .hero{padding-bottom:42px}
  .section{padding:58px 0}
}
