/* ===== Tokens ===== */
:root{
  --wood-black:#17110c;
  --wood-dark:#211710;
  --wood-panel:#2a1e15;
  --wood-line:#40301f;
  --brass:#c6952f;
  --brass-light:#e7c878;
  --cream:#f3ecdd;
  --cream-dim:#bfb29a;
  --tone-a:#3a2a1a;
  --tone-b:#2f2113;
  --tone-c:#241a10;
  --radius:2px;
  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--wood-black);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
}

img,svg{display:block;max-width:100%;}

.btn{
  display:inline-block;
  padding:0.85em 1.7em;
  font-family:var(--font-body);
  font-size: 14px;
  font-weight:500;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary{
  background:var(--brass);
  color:#1a1208;
}
.btn-primary:hover{background:var(--brass-light);}
.btn-ghost{
  border-color:var(--wood-line);
  color:var(--cream);
}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-light);}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(23,17,12,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--wood-line);
}
.header-inner{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 2rem;
}
.logo{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0.01em;
}
.logo span{color:var(--brass);}

.main-nav{display:flex;gap:2rem;}
.main-nav a{
  font-size: 14px;;
  color:var(--cream-dim);
  transition:color 0.2s ease;
}
.main-nav a:hover{color:var(--brass-light);}

.header-actions{display:flex;align-items:center;gap:0.8rem;}
.icon-btn{
  background:none;border:none;color:var(--cream);
  width:2.1rem;height:2.1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
}
.icon-btn svg{width:20px;height:20px;}
.cart-count{
  position:absolute;top:-2px;right:-2px;
  background:var(--brass);color:#1a1208;
  font-weight:600;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;}
.menu-toggle span{width:22px;height:2px;background:var(--cream);}

/* ===== Hero ===== */
.hero{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:3rem;
  padding:5rem 2rem 4rem;
}
.hero-text h1{
  font-size:clamp(2.2rem,4vw,3.4rem);
  margin-bottom:1.4rem;
}
.hero-text p{
  color:var(--cream-dim);
  max-width:34rem;
  margin-bottom:2rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-art{display:flex;justify-content:center;}
.cue-illustration{width:100%;max-width:360px;height:auto;}

/* ===== Heritage strip ===== */
.heritage-strip{
  border-top:1px solid var(--wood-line);
  border-bottom:1px solid var(--wood-line);
  background:var(--wood-dark);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.heritage-item{
  padding:2.2rem 1.5rem;
  text-align:center;
  border-right:1px solid var(--wood-line);
}
.heritage-item:last-child{border-right:none;}
.heritage-item strong{
  display:block;
  font-family:var(--font-display);
  color:var(--brass-light);
  margin-bottom:0.3rem;
}
.heritage-item span{
  color:var(--cream-dim);
}

/* ===== Features ===== */
.features{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2rem;
  padding:4.5rem 2rem;
}
.feature svg{
  width:28px;height:28px;
  color:var(--brass);
  margin-bottom:1rem;
}
.feature h3{
  margin-bottom:0.5rem;
}
.feature p{
  color:var(--cream-dim);
}

/* ===== Products ===== */
.product-section{
  max-width:1240px;margin:0 auto;
  padding:2rem 2rem 5rem;
}
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;
  margin-bottom:2.5rem;
}
.section-head h2{font-size:clamp(1.7rem,2.5vw,2.2rem);}
.tabs{display:flex;gap:0.5rem;flex-wrap:wrap;}
.tab{
  background:none;
  border:1px solid var(--wood-line);
  color:var(--cream-dim);
  padding:0.6em 1.2em;
  font-family:var(--font-body);
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.2s ease;
}
.tab:hover{border-color:var(--brass);color:var(--cream);}
.tab.active{
  background:var(--brass);
  border-color:var(--brass);
  color:#1a1208;
  font-weight:500;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
}
.product-card.hidden{display:none;}
.product-card{
  background:var(--wood-panel);
  border:1px solid var(--wood-line);
  border-radius:var(--radius);
  padding:1.4rem;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.product-card:hover{border-color:var(--brass);transform:translateY(-3px);}
.product-media{
  height:180px;
  border-radius:var(--radius);
  margin-bottom:1.2rem;
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tone-a{background:linear-gradient(135deg,var(--tone-a),#20150c);}
.tone-b{background:linear-gradient(135deg,var(--tone-b),#1c130b);}
.tone-c{background:linear-gradient(135deg,var(--tone-c),#180f08);}
.cue-mark{
  width:4px;height:140px;
  background:linear-gradient(180deg,var(--brass-light),var(--brass) 30%,#5c3a1f);
  transform:rotate(18deg);
  border-radius:3px;
}
.product-card h3{margin-bottom:0.4rem;}
.product-card p{font-size: 14px;;color:var(--cream-dim);margin-bottom:1.1rem;min-height:2.6em;}
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;}
.price{font-family:var(--font-display);color:var(--brass-light);}
.btn-add{
  background:none;
  border:1px solid var(--wood-line);
  color:var(--cream);
  padding:0.5em 1em;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.2s ease;
}
.btn-add:hover{border-color:var(--brass);color:var(--brass-light);}

/* ===== Story ===== */
.story{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:0.8fr 1.2fr;
  gap:4rem;align-items:center;
  padding:2rem 2rem 5rem;
}
.story-art svg{width:100%;max-width:380px;margin:0 auto;}
.story-text h2{font-size:clamp(1.7rem,2.5vw,2.3rem);margin-bottom:1.2rem;}
.story-text p{color:var(--cream-dim);margin-bottom:1.1rem;max-width:38rem;}
.story-text .btn{margin-top:0.6rem;}

/* ===== Gallery ===== */
.gallery{
  max-width:1240px;margin:0 auto;
  padding:2rem 2rem 6rem;
  text-align:center;
}
.gallery h2{font-size:clamp(1.7rem,2.5vw,2.2rem);margin-bottom:0.6rem;}
.gallery-sub{color:var(--cream-dim);max-width:34rem;margin:0 auto 2.5rem;}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.8rem;
}
.g-item{
  aspect-ratio:1/1;
  border-radius:var(--radius);
  border:1px solid var(--wood-line);
}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--wood-line);
  background:var(--wood-dark);
  padding:4rem 2rem 1.5rem;
}
.footer-grid{
  max-width:1240px;margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--wood-line);
}
.footer-brand p{color:var(--cream-dim);margin-top:1rem;max-width:22rem;}
.footer-col h4{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--brass-light);
  margin-bottom:1rem;
  font-weight:600;
}
.footer-col a,.footer-col p{
  display:block;
  color:var(--cream-dim);
  margin-bottom:0.7rem;
}
.footer-col a:hover{color:var(--brass-light);}

.footer-bottom{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  padding-top:1.5rem;
  color:var(--cream-dim);
}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a:hover{color:var(--brass-light);}

/* ===== Responsive ===== */
@media (max-width:960px){
  .main-nav{display:none;}
  .menu-toggle{display:flex;}
  .hero{grid-template-columns:1fr;text-align:center;}
  .hero-text p{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .heritage-strip{grid-template-columns:repeat(2,1fr);}
  .heritage-item:nth-child(2){border-right:none;}
  .features{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .story{grid-template-columns:1fr;text-align:center;}
  .story-text p{margin-left:auto;margin-right:auto;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:600px){
  .features{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .heritage-strip{grid-template-columns:1fr;}
  .heritage-item{border-right:none;border-bottom:1px solid var(--wood-line);}
}