@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Parisienne&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --cream: #FBF2E4;
  --cream-deep: #F5E9D6;
  --green: #B07A6E;
  --green-soft: #D9A99B;
  --gold: #A8823B;
  --gold-soft: #C9A66B;
  --espresso: #4A2A28;
  --peach: #F0C9BE;
  --white: #FFFDF9;
  --max: 1180px;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--espresso);
  font-family:'Jost', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

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

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  color:var(--green);
  letter-spacing:0.01em;
}

.script{
  font-family:'Parisienne', cursive;
  color:var(--gold);
  font-weight:400;
}

.eyebrow{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
  color:var(--gold);
  font-weight:500;
}

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--gold);
  margin:18px 0;
}
.divider::before,.divider::after{
  content:'';
  height:1px;
  width:36px;
  background:var(--gold);
  opacity:0.6;
}
.divider svg{width:12px; height:12px;}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,242,228,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(168,130,59,0.25);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.nav-logo{display:flex; align-items:center; gap:10px;}
.nav-logo .monogram{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:15px; color:var(--green);
}
.nav-logo .word{font-family:'Fraunces', serif; font-size:18px; letter-spacing:0.08em; color:var(--green);}
.nav-links{display:flex; gap:38px; font-size:14px; letter-spacing:0.04em;}
.nav-links a{position:relative; padding-bottom:4px;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  border:1px solid var(--green); color:var(--green);
  padding:9px 20px; border-radius:30px; font-size:13px; letter-spacing:0.04em;
  transition:background .3s ease, color .3s ease;
}
.nav-cta:hover{background:var(--green); color:var(--cream);}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:36px; height:36px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  padding:0;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--green);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* HERO */
.hero{
  padding:90px 0 70px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}
.hero-eyebrow{margin-bottom:18px;}
.hero h1{
  font-size:52px;
  line-height:1.12;
  margin-bottom:22px;
}
.hero h1 span{font-family:'Parisienne', cursive; color:var(--gold); font-size:1.15em;}
.hero p{
  font-size:17px; max-width:440px; color:#5E3A38; margin-bottom:34px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:var(--cream);
  padding:15px 30px; border-radius:32px;
  font-size:14px; letter-spacing:0.05em;
  transition:transform .35s ease, background .35s ease;
}
.btn:hover{background:#8F5A52; transform:translateY(-2px);}
.btn-outline{
  background:transparent; border:1px solid var(--green); color:var(--green);
}
.btn-outline:hover{background:var(--green); color:var(--cream);}

.hero-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.jar-frame{
  width:100%;
  max-width:460px;
  aspect-ratio:1.5/1;
  border-radius:50%;
  background:radial-gradient(ellipse at 32% 28%, var(--white), var(--cream-deep) 78%);
  border:1px solid rgba(168,130,59,0.4);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 40px 80px -30px rgba(176,122,110,0.35);
}
.jar-frame img{
  width:91%;
  display:block;
  clip-path:ellipse(48.8% 49.95% at 49.77% 49.95%);
}
.jar-frame::after{
  content:'';
  position:absolute; inset:-8px;
  border:1px solid rgba(168,130,59,0.25);
  border-radius:50%;
}

/* SECTION generic */
section{padding:90px 0;}
#collection, #story, #contact{scroll-margin-top:100px;}
.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.section-head h2{font-size:36px; margin-top:10px;}
.section-head p{color:#6D4442; margin-top:16px; font-size:16px;}

/* MEET FLAVOR */
.meet{
  background:var(--white);
}
.meet-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:60px;
  align-items:center;
}
.meet-imgs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.meet-imgs.single{
  display:flex;
  justify-content:center;
}
.meet-imgs.single .meet-frame{
  width:100%;
  max-width:380px;
}
.hero-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  width:100%;
  max-width:480px;
}
.meet-frame{
  width:100%;
  aspect-ratio:1.5/1;
  border-radius:50%;
  background:radial-gradient(ellipse at 32% 28%, var(--white), var(--cream-deep) 78%);
  border:1px solid rgba(168,130,59,0.4);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 20px 44px -22px rgba(176,122,110,0.32);
}
.meet-frame::after{
  content:'';
  position:absolute; inset:-7px;
  border:1px solid rgba(168,130,59,0.25);
  border-radius:50%;
}
.meet-frame img{
  width:91%;
  display:block;
}
.meet-frame img.front-label{clip-path:ellipse(48.8% 49.95% at 49.77% 49.95%);}
.meet-frame img.back-label{clip-path:ellipse(46.7% 48.9% at 49.9% 50.6%);}
.jar-frame img.tiramisu-front, .meet-frame img.tiramisu-front{clip-path:ellipse(47.07% 49.07% at 49.93% 49.07%);}
.jar-frame img.tiramisu-back, .meet-frame img.tiramisu-back{clip-path:ellipse(47.56% 49.95% at 49.97% 49.95%);}
.jar-frame img.strawberry-front, .meet-frame img.strawberry-front{clip-path:ellipse(46.16% 47.46% at 49.74% 49.22%);}
.jar-frame img.strawberry-back, .meet-frame img.strawberry-back{clip-path:ellipse(45.05% 47.41% at 49.80% 48.78%);}
.jar-frame img.chocpeanut-front, .meet-frame img.chocpeanut-front{clip-path:ellipse(47.23% 49.02% at 49.71% 49.51%);}
.jar-frame img.chocpeanut-back, .meet-frame img.chocpeanut-back{clip-path:ellipse(48.63% 49.95% at 49.67% 49.95%);}
.meet-copy .eyebrow{margin-bottom:14px;}
.meet-copy h2{font-size:34px; margin-bottom:18px;}
.meet-copy p{color:#5E3A38; margin-bottom:16px; max-width:460px;}

/* PHILOSOPHY */
.philosophy{
  text-align:center;
}
.philosophy .script{font-size:38px; display:block; margin-bottom:8px;}
.philosophy-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
  margin-top:56px;
}
.philosophy-item h3{font-size:20px; margin-bottom:12px;}
.philosophy-item p{color:#6D4442; font-size:15px;}
.philosophy-item .num{
  font-family:'Fraunces', serif; color:var(--gold); font-size:14px;
  letter-spacing:0.1em; margin-bottom:14px; display:block;
}

/* INGREDIENTS */
.ingredients{background:#F7E7D6; padding-bottom:40px;}
.collection{padding-top:40px;}
.ingredients h2{color:var(--green);}
.ingredients .eyebrow{color:var(--gold);}
.ingredients .section-head p{color:#5E3A38;}
.ing-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  margin-top:20px;
}
.ing-item{
  text-align:center; padding:26px 14px;
  background:var(--white);
  border:1px solid rgba(168,130,59,0.22);
  border-radius:16px;
}
.ing-item .glyph{
  width:44px; height:44px; margin:0 auto 16px;
  border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ing-item h4{font-family:'Fraunces', serif; font-weight:500; font-size:16px; margin-bottom:8px; color:var(--green);}
.ing-item p{font-size:13px; color:#6D4442;}

/* FLAVOR COLLECTION */
.flavors-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.flavor-card{
  background:var(--white);
  border-radius:22px;
  padding:30px 26px 32px;
  border:1px solid rgba(168,130,59,0.2);
  transition:transform .35s ease, box-shadow .35s ease;
  position:relative;
}
.flavor-card:hover{transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(176,122,110,0.3);}
.flavor-card h3{font-size:20px; margin-bottom:8px;}
.flavor-card .tag{
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; display:inline-block;
}
.flavor-card.soon .tag{color:#CDA093;}
.flavor-card p{font-size:14px; color:#6D4442; margin-bottom:18px;}
.flavor-card a.link{font-size:13px; color:var(--green); border-bottom:1px solid var(--gold); padding-bottom:2px;}
.flavor-card.soon{opacity:0.9;}

/* LIFESTYLE */
.lifestyle{background:var(--cream-deep);}
.life-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:180px;
  gap:16px;
  margin-top:10px;
}
.life-grid div{
  border-radius:18px;
  background:linear-gradient(135deg, #EFDFC6, #E3CBA6);
  display:flex; align-items:flex-end; padding:16px;
  font-size:12px; color:var(--espresso); letter-spacing:0.03em;
  border:1px solid rgba(168,130,59,0.25);
}
.life-grid div:nth-child(2){grid-row:span 2;}
.life-grid div:nth-child(5){grid-column:span 2;}

/* STORY */
.story{background:var(--cream);}
.story-editorial{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:70px;
  align-items:start;
  text-align:left;
}
.story-side{position:sticky; top:110px;}
.story-side .monogram-lg{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:26px; font-family:'Fraunces', serif; color:var(--green); font-size:18px;
}
.story-side h2{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:32px;
  line-height:1.35;
  color:var(--green);
}
.story-photo{
  margin-top:34px;
  max-width:270px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 34px 60px -28px rgba(176,122,110,0.38);
  background:var(--cream-deep);
}
.story-photo img{
  width:100%;
  display:block;
}
.story-copy{max-width:60ch;}
.story-copy p{color:#5E3A38; font-size:16px; margin-bottom:20px; line-height:1.75;}
.story-copy p:first-child{color:var(--espresso);}

/* FOOTER */
footer{padding:60px 0 40px; border-top:1px solid rgba(168,130,59,0.25);}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.foot-brand .monogram{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; color:var(--green); margin-bottom:16px;
}
.foot-brand p{font-size:13px; color:#8C6663; max-width:220px;}
footer h5{font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14px;}
.foot-bottom{
  margin-top:50px; padding-top:24px; border-top:1px solid rgba(168,130,59,0.2);
  display:flex; justify-content:space-between; font-size:12px; color:#A9817E;
}

@media(max-width:900px){
  .story-editorial{grid-template-columns:1fr; gap:30px;}
  .story-side{position:static;}
  .story-photo{margin-left:auto; margin-right:auto;}
  .story-side h2{font-size:26px;}
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--cream);
    border-top:1px solid rgba(168,130,59,0.25);
    box-shadow:0 24px 34px -24px rgba(176,122,110,0.18);
    z-index:40;
  }
  .nav-links.open{display:flex;}
  .nav-links a{
    padding:16px 24px;
    text-align:center;
    border-bottom:1px solid rgba(168,130,59,0.15);
  }
  .nav-links a::after{display:none;}
  .hero{grid-template-columns:1fr; text-align:center; padding-top:50px;}
  .hero p{margin-left:auto; margin-right:auto;}
  .hero-visual{order:-1;}
  .jar-frame{max-width:300px; margin:0 auto;}
  .meet-grid{grid-template-columns:1fr;}
  .philosophy-grid{grid-template-columns:1fr;}
  .ing-grid{grid-template-columns:repeat(2,1fr);}
  .flavors-grid{grid-template-columns:repeat(2,1fr);}
  .life-grid{grid-template-columns:repeat(2,1fr);}
  .life-grid div:nth-child(5){grid-column:span 1;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px;}
  h1{font-size:38px !important;}
}

@media(max-width:600px){
  .flavors-grid{grid-template-columns:1fr;}
}

@media(max-width:520px){
  .meet-imgs{grid-template-columns:1fr; gap:26px;}
  .hero-pair{grid-template-columns:1fr; gap:26px; max-width:280px !important; margin:0 auto;}
}