/* ═══════════ RESET & TOKENS ═══════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --stone:#e8ddd0;--espresso:#3a2a1a;--gold:#c8a96e;
  --flour:#f5f0e8;--crust:#8b7355;--cream:#faf5ef;--terra:#b86f50;
}
html{scroll-behavior:smooth}
body{
  font-family:"Karla",sans-serif;color:var(--espresso);
  background:var(--flour);font-weight:400;line-height:1.6;overflow-x:hidden;
  /* Subtle paper texture via CSS */
  background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:"Fraunces",serif;font-weight:400}
img{display:block;width:100%;height:auto}
::selection{background:var(--gold);color:var(--espresso)}

/* ═══════════ CHAPTER LABEL ═══════════ */
.chapter-label{
  display:block;font-family:"Karla",sans-serif;font-size:.7rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1.5rem;font-weight:600;
}

/* ═══════════ DIVIDERS ═══════════ */
.divider{padding:0 4rem;max-width:1200px;margin:0 auto}
.divider svg{width:100%;height:40px;display:block}
.divider-dark{background:transparent}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 8s ease-out}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,42,26,.45) 0%,rgba(58,42,26,.7) 100%);z-index:1}
#flour-canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-content{position:relative;z-index:3;text-align:center;color:var(--flour);padding:0 2rem}
.hero-tagline{
  display:block;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  opacity:.6;margin-bottom:1.5rem;font-weight:400;
}
.hero-content h1{
  font-size:clamp(3.5rem,9vw,8rem);letter-spacing:-.02em;line-height:.9;
  margin-bottom:1.2rem;font-weight:300;
  text-shadow:0 2px 40px rgba(58,42,26,.3);
}
.hero-content p{
  font-size:clamp(.95rem,1.8vw,1.3rem);font-weight:300;
  letter-spacing:.15em;text-transform:uppercase;opacity:.75;
}
.hero-scroll-hint{
  margin-top:3rem;opacity:.4;
  animation:float 3s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ═══════════ STORY ═══════════ */
.story{padding:0}
.story-grid{display:grid;grid-template-columns:1fr 1fr;min-height:200vh;position:relative}
.story-text{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:4rem 6rem 4rem 4rem;
}
.story-text h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.15;margin-bottom:2rem;max-width:420px}
.story-text p{max-width:400px;margin-bottom:1.2rem;color:var(--crust);font-weight:300;font-size:1.05rem}
.story-images{display:flex;flex-direction:column;gap:2rem;padding:8rem 4rem 8rem 2rem}
.story-image-wrapper{overflow:hidden;border-radius:4px;box-shadow:0 8px 40px rgba(58,42,26,.12)}
.story-image-wrapper img{transition:transform 1s cubic-bezier(.25,.46,.45,.94)}
.story-image-wrapper:hover img{transform:scale(1.04)}

/* ═══════════ COUNTERS ═══════════ */
.counters{
  padding:6rem 2rem;background:var(--espresso);color:var(--flour);text-align:center;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23g)' opacity='.04'/%3E%3C/svg%3E");
}
.counter-grid{display:flex;justify-content:center;gap:6rem;flex-wrap:wrap}
.counter-item{display:flex;flex-direction:column;align-items:center}
.counter-number{font-family:"Fraunces",serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:300;line-height:1}
.counter-suffix{font-family:"Fraunces",serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:300;line-height:1;display:inline}
.counter-label{font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;margin-top:.5rem;opacity:.5}

/* ═══════════ FERMENTATION TIMER ═══════════ */
.fermentation{padding:8rem 4rem;overflow:hidden}
.ferment-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  max-width:1100px;margin:0 auto;align-items:center;
}
.ferment-text h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.15;margin-bottom:1.5rem}
.ferment-text p{color:var(--crust);font-weight:300;font-size:1.05rem;max-width:450px;margin-bottom:2rem}
.ferment-stages{display:flex;flex-direction:column;gap:.6rem}
.ferment-stage{
  display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  border-radius:4px;transition:all .4s ease;cursor:default;
  border-left:2px solid transparent;
}
.ferment-stage.active{
  background:rgba(200,169,110,.1);border-left-color:var(--gold);
}
.stage-time{
  font-family:"Fraunces",serif;font-size:1rem;color:var(--gold);
  min-width:50px;font-weight:500;
}
.stage-name{font-size:.9rem;letter-spacing:.05em}
.ferment-visual{display:flex;justify-content:center;align-items:center}
.timer-container{
  position:relative;width:300px;height:300px;
}
.timer-ring{width:100%;height:100%}
.timer-progress{transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.timer-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.timer-hours{font-family:"Fraunces",serif;font-size:3.5rem;font-weight:300;line-height:1;color:var(--espresso)}
.timer-unit{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:.3rem}
.timer-label-text{font-size:.75rem;color:var(--crust);margin-top:.2rem}
#bubble-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;border-radius:50%;
}

/* ═══════════ BREAD CROSS-SECTION ═══════════ */
.cross-section{padding:8rem 4rem;background:var(--stone);
  background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23l)' opacity='.025'/%3E%3C/svg%3E");
}
.cross-inner{max-width:1100px;margin:0 auto}
.cross-inner h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:3rem}
.loaf-explorer{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.loaf-svg-wrap{display:flex;justify-content:center}
.loaf-svg{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 10px 30px rgba(58,42,26,.15))}
.loaf-layer{transition:opacity .6s ease}
.loaf-score{transition:stroke-dashoffset 1s ease .3s}
.slice-line{transition:opacity .5s ease}
.crumb-holes{transition:opacity .6s ease .2s}

.loaf-labels{display:flex;flex-direction:column;gap:1.5rem}
.loaf-label{
  padding:1.2rem 1.5rem;border-radius:4px;cursor:pointer;
  border-left:3px solid transparent;transition:all .4s ease;
  opacity:.5;
}
.loaf-label.active{
  opacity:1;border-left-color:var(--gold);background:rgba(255,255,255,.5);
}
.loaf-label h4{font-size:1.1rem;margin-bottom:.4rem}
.loaf-label p{font-size:.9rem;color:var(--crust);font-weight:300;line-height:1.5}

/* ═══════════ BREAD GALLERY ═══════════ */
.bread{padding:8rem 0}
.bread .chapter-label{padding:0 4rem}
.bread-item{position:relative;width:100%;overflow:hidden;margin-bottom:2rem}
.bread-item img{width:100%;height:70vh;object-fit:cover;display:block;transition:transform 6s ease}
.bread-item:hover img{transform:scale(1.03)}
.bread-info{
  position:absolute;bottom:0;left:0;right:0;padding:4rem;
  background:linear-gradient(transparent,rgba(58,42,26,.85));color:var(--flour);
}
.bread-info h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.5rem;font-weight:400}
.bread-info p{max-width:500px;font-weight:300;opacity:.9}

/* ═══════════ SCHEDULE ═══════════ */
.schedule{padding:8rem 4rem}
.schedule-inner{max-width:700px;margin:0 auto}
.schedule-inner h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:1rem}
.schedule-intro{color:var(--crust);font-weight:300;margin-bottom:3rem;font-size:1.05rem}
.timeline{position:relative;padding-left:3rem}
.timeline-line{
  position:absolute;left:7px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),transparent);
}
.timeline-item{position:relative;margin-bottom:2.5rem;padding-left:2rem}
.timeline-dot{
  position:absolute;left:-3rem;top:.4rem;width:16px;height:16px;
  border-radius:50%;border:2px solid var(--gold);background:var(--flour);
  transition:all .4s ease;
}
.timeline-item.visible .timeline-dot{background:var(--gold)}
.timeline-card{
  padding:1.2rem 1.5rem;background:rgba(232,221,208,.4);border-radius:6px;
  transition:all .4s ease;
}
.timeline-item.visible .timeline-card{background:rgba(232,221,208,.6)}
.timeline-time{
  font-family:"Fraunces",serif;font-size:.9rem;color:var(--gold);
  font-weight:500;display:block;margin-bottom:.3rem;
}
.timeline-card h4{font-size:1.1rem;margin-bottom:.3rem}
.timeline-card p{font-size:.88rem;color:var(--crust);font-weight:300}

/* ═══════════ PASTRIES ═══════════ */
.pastries{padding:8rem 4rem}
.pastries h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:3rem}
.pastry-scroll{
  display:flex;gap:2rem;overflow-x:auto;padding-bottom:2rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
}
.pastry-scroll::-webkit-scrollbar{height:3px}
.pastry-scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
.pastry-card{
  flex:0 0 280px;scroll-snap-align:start;background:var(--stone);
  border-radius:6px;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease;
}
.pastry-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(58,42,26,.12)}
.pastry-card img{height:260px;object-fit:cover}
.pastry-card h4{padding:1.2rem 1.5rem 0;font-size:1.1rem}
.pastry-card p{padding:.4rem 1.5rem 1.5rem;font-size:.88rem;color:var(--crust);font-weight:300}

/* ═══════════ VISIT ═══════════ */
.visit{position:relative;height:90vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.visit-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit-overlay{position:absolute;inset:0;background:rgba(58,42,26,.35);z-index:0}
.visit-card{
  position:relative;z-index:1;
  background:rgba(250,245,239,.93);backdrop-filter:blur(16px);
  padding:3.5rem 4rem;border-radius:6px;max-width:440px;text-align:center;
  box-shadow:0 20px 60px rgba(58,42,26,.2);
}
.visit-card h2{font-size:2rem;margin-bottom:2rem}
.hours{margin-bottom:1.5rem}
.hours-row{
  display:flex;justify-content:space-between;padding:.7rem 0;
  border-bottom:1px solid var(--stone);font-size:.95rem;
}
.hours-row:last-child{border-bottom:none}
.visit-address{font-size:.85rem;color:var(--crust);margin-bottom:.5rem;font-weight:500;letter-spacing:.05em}
.visit-note{font-size:.82rem;color:var(--crust);font-style:italic;opacity:.8}

/* ═══════════ ORDER ═══════════ */
.order{padding:8rem 2rem;background:var(--stone);
  background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23m)' opacity='.02'/%3E%3C/svg%3E");
}
.order-inner{max-width:480px;margin:0 auto;text-align:center}
.order-inner h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:1rem}
.order-inner>p{margin-bottom:2.5rem;color:var(--crust);font-weight:300}
#order-form{display:flex;flex-direction:column;gap:1rem;text-align:left}
#order-form input,#order-form select,#order-form textarea{
  width:100%;padding:1rem 1.2rem;border:1px solid #d0c4b4;border-radius:4px;
  background:var(--flour);font-family:"Karla",sans-serif;font-size:.95rem;
  color:var(--espresso);transition:border-color .3s,box-shadow .3s;
}
#order-form input:focus,#order-form select:focus,#order-form textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,.15);
}
#order-form button{
  padding:1.1rem;background:var(--espresso);color:var(--flour);border:none;
  border-radius:4px;font-family:"Karla",sans-serif;font-size:.95rem;
  letter-spacing:.15em;text-transform:uppercase;cursor:pointer;
  transition:background .3s,transform .2s;
}
#order-form button:hover{background:var(--terra);transform:translateY(-1px)}
#order-form button:active{transform:translateY(0)}

/* ═══════════ FOOTER ═══════════ */
footer{
  padding:3rem 2rem;text-align:center;background:var(--espresso);color:var(--flour);
  border-top:1px solid rgba(200,169,110,.15);
}
.footer-inner{display:flex;flex-direction:column;gap:.5rem;opacity:.6;font-size:.82rem}
.footer-name{font-family:"Fraunces",serif;font-size:1.1rem;opacity:1}

/* ═══════════ REVEAL ═══════════ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:900px){
  .ferment-inner{grid-template-columns:1fr;text-align:center}
  .ferment-text p{margin-left:auto;margin-right:auto}
  .ferment-stages{align-items:center}
  .loaf-explorer{grid-template-columns:1fr}
  .loaf-svg-wrap{margin-bottom:2rem}
}
@media(max-width:768px){
  .story-grid{grid-template-columns:1fr;min-height:auto}
  .story-text{position:relative;height:auto;padding:4rem 2rem 2rem}
  .story-images{padding:0 2rem 4rem}
  .counter-grid{gap:3rem}
  .bread-item img{height:50vh}
  .pastries{padding:4rem 2rem}
  .schedule{padding:4rem 2rem}
  .fermentation{padding:4rem 2rem}
  .cross-section{padding:4rem 2rem}
  .visit-card{margin:0 1.5rem;padding:2.5rem 2rem}
  .divider{padding:0 2rem}
  .timer-container{width:240px;height:240px}
}