:root{
  --linen:#f7f4ee;
  --ink:#211d18;
  --ink-soft:#5c574e;
  --line:#ddd6c7;
  --clay:#a8613f;
  --sage:#6f7a5f;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Karla', sans-serif;
  background:var(--linen);
  color:var(--ink);
  line-height:1.6;
}
h1,h2,h3{font-family:'Cormorant Garamond', serif; font-weight:500;}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 6vw;
  background:rgba(247,244,238,0.94);
  backdrop-filter:blur(6px);
}
nav .brand{
  font-family:'Cormorant Garamond', serif; font-size:1.3rem; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase;
}
nav ul{list-style:none; display:flex; gap:40px; font-size:0.75rem;}
nav a{text-decoration:none; color:var(--ink); letter-spacing:0.1em; text-transform:uppercase; transition:opacity .2s;}
nav a:hover{opacity:0.55;}
nav .cta{border-bottom:1px solid var(--ink); padding-bottom:2px;}

/* ---------- Hero — full-bleed, rotating background ---------- */
.hero{
  position:relative; height:88vh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg-container{position:absolute; inset:0;}
.hero-bg-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-bg-layer.active{opacity:1;}
.hero-bg-container::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(33,29,24,0.6), rgba(33,29,24,0.08) 45%);
}
.hero-content{position:relative; z-index:2; padding:0 6vw 64px; color:#f7f4ee; max-width:640px;}
.hero .eyebrow{
  font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:18px; opacity:0.9;
}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem); font-style:italic; line-height:1.05; margin-bottom:20px;
}
.hero .btn-row{display:flex; gap:20px; flex-wrap:wrap;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:14px 0; font-size:0.75rem;
  letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid currentColor; transition:opacity .2s; background:none; cursor:pointer;
}
.btn:hover{opacity:0.6;}
.btn-light{color:#f7f4ee;}
.btn-dark{color:var(--ink);}

/* ---------- Stat strip ---------- */
.stat-strip{
  display:flex; justify-content:center; gap:0; flex-wrap:wrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat-strip .stat{
  flex:1; min-width:160px; text-align:center; padding:32px 20px;
  border-right:1px solid var(--line);
}
.stat-strip .stat:last-child{border-right:none;}
.stat-strip .stat .label{
  font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- Section shell ---------- */
section{padding:110px 6vw;}
.section-head{max-width:640px; margin:0 auto 60px;}
.section-head.center{text-align:center;}
.section-head .eyebrow{
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--clay); margin-bottom:16px;
}
.section-head h2{font-size:clamp(2rem, 4vw, 2.8rem); font-style:italic; line-height:1.15;}

/* ---------- Editorial banner ---------- */
.editorial-banner{
  position:relative; height:70vh; min-height:460px;
  display:flex; align-items:center;
  overflow:hidden;
}
.editorial-banner .bg{position:absolute; inset:0; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#211d18;}
.editorial-banner .bg::after{content:''; position:absolute; inset:0; background:rgba(33,29,24,0.28);}
.editorial-banner .content{position:relative; z-index:1; max-width:460px; margin-left:8vw; color:#f7f4ee;}
.editorial-banner .eyebrow{font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:18px;}
.editorial-banner h2{font-size:clamp(2.2rem, 4.5vw, 3.4rem); font-style:italic; margin-bottom:20px; line-height:1.1;}
.editorial-banner p{font-size:1rem; margin-bottom:28px; max-width:380px; opacity:0.92;}

/* ---------- Scent family tiles (placeholder categories) ---------- */
.scent-editorial{
  display:grid; grid-template-columns: 1fr 1fr; gap:2px; max-width:1180px; margin:0 auto;
}
.scent-editorial .tile{
  position:relative; aspect-ratio:4/5; overflow:hidden; background-size:cover; background-position:center;
  background-color:#e7e0d0;
  display:flex; align-items:flex-end; padding:28px;
}
.scent-editorial .tile::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(33,29,24,0.5), transparent 55%);}
.scent-editorial .tile span{position:relative; z-index:1; color:#fff; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.6rem;}

/* ---------- Product grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:48px 32px; max-width:1180px; margin:0 auto;
}
.card .img{
  aspect-ratio:4/3; background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:#efe9dd; margin-bottom:18px; overflow:hidden;
}
.card .eyebrow-small{font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--clay); margin-bottom:8px; min-height:1em;}
.card .name{font-family:'Cormorant Garamond', serif; font-size:1.4rem; font-style:italic; margin-bottom:4px;}
.card .scent{color:var(--ink-soft); font-size:0.85rem; margin-bottom:14px;}
.card .row{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:14px;}
.card .price{font-size:0.95rem;}
.card .order{font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink);}

/* ---------- Brand story — asymmetric split ---------- */
.story-split{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
  max-width:1180px; margin:0 auto;
}
.story-split .photo{aspect-ratio:1/1; background-size:cover; background-position:center; background-color:#e7e0d0;}
.story-split .quote{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:2rem; line-height:1.35; margin-bottom:24px;
}
.story-split .attribution{font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);}

/* ---------- Instagram strip ---------- */
.insta-strip{padding:110px 6vw; text-align:center;}
.insta-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; max-width:1000px; margin:44px auto 0;
}
.insta-grid .tile{aspect-ratio:1/1; overflow:hidden; background-color:#e7e0d0;}
.insta-grid .tile img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.insta-grid .tile:hover img{transform:scale(1.06);}
.insta-handle{
  display:inline-block; margin-top:28px; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--ink);
}

/* ---------- FAQ ---------- */
.faq{max-width:720px; margin:0 auto;}
.faq-item{border-top:1px solid var(--line); padding:28px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item h3{font-size:1.1rem; font-style:italic; margin-bottom:10px;}
.faq-item p{color:var(--ink-soft); font-size:0.92rem; max-width:560px;}

footer{
  border-top:1px solid var(--line);
  padding:48px 6vw; text-align:center; font-size:0.78rem; letter-spacing:0.04em; color:var(--ink-soft);
}
footer a{color:var(--clay); text-decoration:none;}

@media (max-width:760px){
  nav ul{display:none;}
  .story-split{grid-template-columns:1fr; gap:32px;}
  .scent-editorial{grid-template-columns:1fr;}
  .insta-grid{grid-template-columns:repeat(2, 1fr);}
  .editorial-banner .content{margin-left:6vw; margin-right:6vw;}
  .hero{height:56vh; min-height:420px;}
  .hero-bg-layer{background-position:center 40%;}
}