/* Cacao Noir, bean to bar chocolatier. Flat color only, no gradients. */

:root{
  --cocoa: #2A1410;
  --cocoa-deep: #1C0D0A;
  --cream: #F3E7D3;
  --cream-dim: #E7D6B8;
  --gold: #C99A3B;
  --terracotta: #B5502F;
  --ink: #1C0D0A;
  --line: rgba(243,231,211,0.16);
  --line-dark: rgba(42,20,16,0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

.preloader{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:var(--cream); transition:opacity .5s var(--ease), visibility .5s var(--ease); }
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ font-family:'Fraunces', serif; font-weight:600; font-size:1.3rem; opacity:0; animation:preloaderIn .6s var(--ease) forwards; }
.preloader-bar{ width:120px; height:2px; background:var(--line-dark); overflow:hidden; border-radius:2px; }
.preloader-bar-fill{ display:block; height:100%; width:0%; background:var(--gold); transition:width .25s var(--ease); }
@keyframes preloaderIn{ to{ opacity:1; } }
body.is-preloading{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .preloader-mark{ animation:none; opacity:1; } }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

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

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

h1,h2,h3,h4{
  font-family: 'Fraunces', serif;
  font-optical-sizing: none;
  font-weight: 600;
  line-height: 1.05;
  color: var(--cocoa);
}

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

.eyebrow{
  font-family:'Jost',sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 1rem;
}

.section-title{
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  margin-bottom: 1.4rem;
}
.section-title-light{ color: var(--cream); }

.section-lede{
  max-width: 42ch;
  font-size: 1.1rem;
  color: rgba(42,20,16,0.72);
}

/* film grain, flat noise via data uri, not a gradient */
.grain{
  position: fixed; inset:0; z-index: 500; pointer-events:none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cocoa dust canvas */
#dust-canvas{
  position: fixed; inset:0; z-index:0; pointer-events:none;
}

/* header */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem clamp(1.4rem, 4vw, 3.4rem);
  mix-blend-mode: normal;
}
.brand-mark{
  font-family:'Fraunces',serif; font-weight:600; font-optical-sizing:none;
  font-size: 1.3rem; letter-spacing: 0.01em; color: var(--cream);
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
  display:flex; gap:0.4em;
}
.brand-word-accent{ color: var(--gold); font-style: italic; }

.main-nav{ display:flex; gap: 2.4rem; }
.main-nav a{
  font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream); opacity: 0.86;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  position: relative; padding-bottom: 3px;
  transition: opacity 0.2s var(--ease);
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold); transition: width 0.28s var(--ease);
}
.main-nav a:hover{ opacity:1; }
.main-nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding: 0.4rem;
}
.nav-toggle span{
  width:22px; height:2px; background: var(--cream);
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.mobile-nav{
  position: fixed; inset:0; z-index:390;
  background: var(--cocoa-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{
  font-family:'Fraunces',serif; font-size:1.8rem; color: var(--cream);
}

/* HERO */
.hero{
  position: relative;
  min-height: 100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  z-index:1;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background: rgba(28,13,10,0.5);
}
.hero-content{
  position: relative; z-index: 2;
  padding: 0 clamp(1.4rem, 4vw, 3.4rem) 5rem;
  max-width: 1180px;
}
.hero-kicker{
  color: var(--gold); font-size: 0.86rem; letter-spacing: 0.24em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.hero-title{
  font-size: clamp(3.2rem, 10vw, 8.4rem);
  color: var(--cream);
  margin-bottom: 1.6rem;
}
.hero-title .line{ display:block; }
.hero-title .line-offset{ margin-left: clamp(0px, 6vw, 90px); }
.hero-title .line-accent{
  color: var(--terracotta);
  font-style: italic;
  margin-left: clamp(0px, 12vw, 160px);
}
.hero-sub{
  color: var(--cream-dim);
  font-size: 1.12rem;
  max-width: 46ch;
  margin-bottom: 2.2rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0.95rem 2rem;
  font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.btn-primary{
  background: var(--gold); color: var(--cocoa-deep);
  box-shadow: 0 10px 26px rgba(201,154,59,0.28);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(201,154,59,0.36); }
.btn-ghost{
  border: 1px solid rgba(243,231,211,0.5); color: var(--cream);
}
.btn-ghost:hover{ background: rgba(243,231,211,0.1); transform: translateY(-2px); }

.hero-stat-strip{
  position: relative; z-index:2;
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(243,231,211,0.2);
}
.stat{
  padding: 1.6rem clamp(1.2rem,3vw,2rem);
  border-right: 1px solid rgba(243,231,211,0.16);
}
.stat:last-child{ border-right:none; }
.stat strong{
  display:block; font-family:'Fraunces',serif; font-optical-sizing:none;
  font-size: 2rem; color: var(--cream); margin-bottom: 0.2rem;
}
.stat span{ font-size:0.78rem; letter-spacing:0.05em; color: var(--cream-dim); text-transform:uppercase; }

/* JOURNEY */
.journey{
  background: var(--cream);
  padding: 7rem clamp(1.4rem, 4vw, 3.4rem) 4rem;
  position: relative; z-index:1;
}
.journey-intro{ max-width: 720px; margin-bottom: 5rem; }

.journey-step{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.6rem,4vw,4.5rem);
  align-items:center;
  margin-bottom: 7rem;
  opacity: 0; transform: translateY(46px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.journey-step.is-visible{ opacity:1; transform: translateY(0); }
.journey-step:last-child{ margin-bottom:0; }
.journey-step-reverse{ direction: rtl; }
.journey-step-reverse > *{ direction: ltr; }

.journey-step-media{
  position:relative; overflow:hidden;
  box-shadow: 0 30px 60px rgba(28,13,10,0.22);
  border: 6px solid var(--cream);
  outline: 1px solid var(--line-dark);
}
.journey-step-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; transition: transform 0.7s var(--ease); }
.journey-step:hover .journey-step-media img{ transform: scale(1.05); }

.journey-step-reverse .journey-step-media{ margin-left: -2.5rem; }
.journey-step:not(.journey-step-reverse) .journey-step-media{ margin-right: -2.5rem; }

.step-index{
  display:block; font-family:'Fraunces',serif; font-optical-sizing:none;
  font-size: 1.1rem; color: var(--gold); margin-bottom: 0.6rem; letter-spacing: 0.1em;
}
.journey-step-copy h3{ font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1rem; }
.journey-step-copy p{ max-width: 46ch; color: rgba(42,20,16,0.75); font-size: 1.04rem; }

/* THE BARS */
.bars{
  background: var(--cocoa);
  padding: 7rem clamp(1.4rem, 4vw, 3.4rem);
  position: relative; z-index:1;
}
.bars-head{ max-width: 700px; margin-bottom: 4rem; }
.bars-head .section-lede{ color: rgba(243,231,211,0.7); }

.bars-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.bar-card{
  background: var(--cream);
  overflow:hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,0.32);
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  grid-column: span 2;
}
.bar-card-wide{ grid-column: span 2; }
.bars-grid .bar-card:nth-child(2),
.bars-grid .bar-card:nth-child(3){ grid-column: span 1; }
.bars-grid .bar-card:nth-child(4){ grid-column: span 2; }
.bar-card:hover{
  box-shadow: 0 34px 66px rgba(0,0,0,0.4);
}
.bar-card-media{ aspect-ratio: 5/4; overflow:hidden; }
.bar-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 0.6s var(--ease); }
.bar-card:hover .bar-card-media img{ transform: scale(1.06); }
.bar-card-body{ padding: 1.6rem; }
.bar-origin{
  display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--terracotta); margin-bottom: 0.5rem;
}
.bar-card-body h3{ font-size: 1.5rem; margin-bottom: 0.6rem; }
.bar-note{ font-size: 0.94rem; color: rgba(42,20,16,0.72); margin-bottom: 1.2rem; min-height: 2.6em; }
.bar-meta{
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid var(--line-dark); padding-top: 0.9rem;
  font-size: 0.86rem; letter-spacing: 0.04em;
}
.bar-price{ font-family:'Fraunces',serif; font-optical-sizing:none; font-weight:600; color: var(--gold); font-size: 1.05rem; }

/* TASTING */
.tasting{
  background: var(--cream);
  display:grid; grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  position: relative; z-index:1;
}
.tasting-media{ overflow:hidden; }
.tasting-media img{ width:100%; height:100%; object-fit:cover; min-height: 480px; }
.tasting-copy{
  padding: 6rem clamp(1.4rem, 4vw, 4rem);
  display:flex; flex-direction:column; justify-content:center;
}
.tasting-steps{ list-style:none; margin-top: 2rem; display:flex; flex-direction:column; gap: 1.8rem; }
.tasting-steps li{ display:flex; gap: 1.4rem; }
.tasting-num{
  font-family:'Fraunces',serif; font-optical-sizing:none; font-size:1.3rem;
  color: var(--gold); border: 1px solid rgba(201,154,59,0.4);
  width: 2.4rem; height: 2.4rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border-radius: 50%;
}
.tasting-steps h4{ font-size: 1.24rem; margin-bottom: 0.3rem; }
.tasting-steps p{ color: rgba(42,20,16,0.72); font-size: 0.98rem; max-width: 48ch; }

/* MAKER */
.maker{
  background: var(--cocoa);
  display:grid; grid-template-columns: 1fr 1fr;
  position: relative; z-index:1;
}
.maker-copy{
  padding: 6rem clamp(1.4rem, 4vw, 4.5rem);
  display:flex; flex-direction:column; justify-content:center;
  color: var(--cream);
}
.maker-copy .section-title{ color: var(--cream); }
.maker-copy p{ color: rgba(243,231,211,0.78); margin-bottom: 1.3rem; max-width: 56ch; font-size: 1.02rem; }
.maker-signoff{
  margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(243,231,211,0.2);
  display:flex; flex-direction:column; gap: 0.2rem;
}
.maker-signoff span:first-child{ font-family:'Fraunces',serif; font-optical-sizing:none; font-style: italic; font-size: 1.1rem; color: var(--gold); }
.maker-signoff span:last-child{ font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243,231,211,0.6); }
.maker-media{ overflow:hidden; min-height: 460px; }
.maker-media img{ width:100%; height:100%; object-fit:cover; }

/* ATELIER */
.atelier{
  background: var(--terracotta);
  position: relative; z-index:1;
}
.atelier-inner{
  display:grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem,5vw,5rem);
  padding: 6rem clamp(1.4rem, 4vw, 3.4rem) 4rem;
}
.atelier-visit p{ color: rgba(243,231,211,0.85); max-width: 48ch; margin-bottom: 2rem; font-size: 1.02rem; }
.atelier-facts{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem;
}
.atelier-facts dt{
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(28,13,10,0.6); margin-bottom: 0.35rem;
}
.atelier-facts dd{ font-family:'Fraunces',serif; font-optical-sizing:none; font-size: 1.1rem; color: var(--cream); }

.atelier-stockists h3{
  font-size: 1.5rem; color: var(--cream); margin-bottom: 1.4rem;
}
.stockist-list{ list-style:none; display:flex; flex-direction:column; }
.stockist-list li{
  display:flex; justify-content:space-between; padding: 1rem 0;
  border-bottom: 1px solid rgba(243,231,211,0.28);
  color: var(--cream); font-size: 1rem;
}
.stockist-list li span:last-child{ color: rgba(243,231,211,0.65); font-size: 0.9rem; }

.atelier-media{ height: 320px; overflow:hidden; }
.atelier-media img{ width:100%; height:100%; object-fit:cover; }

/* FOOTER */
.site-footer{
  background: var(--cocoa-deep);
  color: var(--cream);
  padding: 4rem clamp(1.4rem, 4vw, 3.4rem) 6rem;
  position: relative; z-index:1;
}
.footer-top{ margin-bottom: 3rem; }
.footer-brand{
  font-family:'Fraunces',serif; font-optical-sizing:none; font-size: 1.6rem; display:block; margin-bottom: 0.6rem;
}
.footer-top p{ color: rgba(243,231,211,0.6); max-width: 40ch; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 0.6rem;
  border-top: 1px solid rgba(243,231,211,0.15); padding-top: 1.6rem;
  font-size: 0.8rem; color: rgba(243,231,211,0.5); letter-spacing: 0.03em;
}

/* demo pill */
.demo-pill{
  position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 300;
  background: rgba(28,13,10,0.85);
  color: var(--cream);
  font-size: 0.72rem; letter-spacing: 0.05em;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(243,231,211,0.25);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  max-width: calc(100vw - 2.4rem);
}

/* scroll reveal (generic) */
.reveal{
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  .bars-grid{ grid-template-columns: repeat(2,1fr); }
  .bars-grid .bar-card,
  .bars-grid .bar-card:nth-child(2),
  .bars-grid .bar-card:nth-child(3),
  .bars-grid .bar-card:nth-child(4){ grid-column: span 1; }
  .bar-card-wide{ grid-column: span 2; }
  .tasting{ grid-template-columns: 1fr; }
  .tasting-media img{ min-height: 340px; }
  .maker{ grid-template-columns: 1fr; }
  .maker-media{ order:-1; min-height: 340px; }
  .atelier-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .demo-pill{
    top: 0.9rem; left: auto; right: 0.9rem; bottom: auto;
    width: 2.1rem; height: 2.1rem; padding:0; z-index: 410;
    display:flex; align-items:center; justify-content:center;
    font-size: 0; overflow:hidden;
  }
  .demo-pill::before{
    content: "i"; font-size: 0.78rem; font-weight:600; font-family:'Fraunces',serif;
  }
  .journey-step, .journey-step-reverse{
    grid-template-columns: 1fr; direction: ltr;
  }
  .journey-step-reverse .journey-step-media,
  .journey-step:not(.journey-step-reverse) .journey-step-media{ margin: 0; }
  .hero-stat-strip{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat{ border-bottom: 1px solid rgba(243,231,211,0.16); }
  .bars-grid{ grid-template-columns: 1fr; }
  .bar-card-wide{ grid-column: span 1; }
  .atelier-facts{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .hero-title{ font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero-title .line-offset{ margin-left: 0.6rem; }
  .hero-title .line-accent{ margin-left: 1.2rem; }
  .hero-content{ padding-bottom: 4rem; }
  .hero-actions{ flex-direction: column; }
  .btn{ width:100%; }
}