/* ============ EMBER & OAK ============ */
:root{
  --espresso:  #20140d;
  --espresso-2:#2c1d12;
  --oat:       #ece0cb;
  --oat-dim:   #b6a387;
  --ember:     #e08a2b;
  --ember-deep:#c06a16;
  --oxblood:   #7a2e22;
  --brass:     #b8924f;
  --line:      rgba(236,224,203,.13);
  --maxw: 1380px;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--espresso);
  color:var(--oat);
  font-family:"Bitter", Georgia, serif;
  font-weight:400;
  line-height:1.65;
  font-size:clamp(1rem, 0.55vw + 0.9rem, 1.12rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--ember); }

/* warm vignette atmosphere on the whole page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(224,138,43,.10), transparent 55%),
    radial-gradient(100% 70% at 50% 120%, rgba(122,46,34,.18), transparent 60%);
}
body > *{ position:relative; z-index:1; }

/* ============ GRAIN OVERLAY ============ */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background-image:url("assets/grain.png");
  background-size:340px;
  opacity:.05; mix-blend-mode:overlay;
}

/* ============ TYPE PRIMITIVES ============ */
.eyebrow{
  font-family:"Bitter",serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--ember);
}
.big{
  font-family:"Anton", Impact, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:.005em;
  font-size:clamp(2.7rem, 8vw, 6.5rem);
  color:var(--oat);
}
.big.center{ text-align:center; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  font-family:"Bitter",serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  padding:.95em 1.7em;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .35s ease, background .25s ease, color .25s ease;
}
.btn-ember{
  background:var(--ember);
  color:#1c1108;
  box-shadow:0 0 0 rgba(224,138,43,0);
}
.btn-ember:hover{
  background:#f2992f;
  box-shadow:0 8px 34px -6px rgba(224,138,43,.65);
  transform:translateY(-2px);
}
.btn-ghost{
  border-color:var(--line);
  color:var(--oat);
}
.btn-ghost:hover{
  border-color:var(--ember);
  color:var(--ember);
  transform:translateY(-2px);
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--pad);
  background:linear-gradient(to bottom, rgba(20,12,8,.82), rgba(20,12,8,0));
  backdrop-filter:blur(2px);
}
.wordmark{
  font-family:"Anton",sans-serif;
  font-size:1.5rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.wordmark .amp{ color:var(--ember); margin:0 .12em; }
.nav-links{
  display:flex; gap:2rem; margin-left:auto;
}
.nav-links a{
  font-family:"Bitter",serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; font-size:.74rem;
  color:var(--oat-dim);
  position:relative; padding:.3em 0;
  transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ember); transition:width .3s ease;
}
.nav-links a:hover{ color:var(--oat); }
.nav-links a:hover::after{ width:100%; }
.nav .btn{ margin-left:.5rem; }
.nav-toggle{ display:none; }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(2rem,5vh,3.5rem);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:65% center;
}
.hero-glow{
  position:absolute; z-index:1;
  right:8%; top:38%; width:60vw; height:60vw; max-width:760px; max-height:760px;
  transform:translate(0,-50%);
  background:radial-gradient(circle, rgba(224,138,43,.42), rgba(192,106,22,.14) 38%, transparent 66%);
  filter:blur(10px);
  animation:emberPulse 6.5s ease-in-out infinite;
}
.hero-scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to right, rgba(20,12,8,.92) 0%, rgba(20,12,8,.55) 38%, rgba(20,12,8,.05) 70%),
    linear-gradient(to top, rgba(20,12,8,.95), transparent 45%);
}
.hero-inner{
  position:relative; z-index:3;
  max-width:var(--maxw); width:100%; margin:0 auto;
  padding-bottom:clamp(1.5rem,4vh,3rem);
}
.hero .eyebrow{ margin-bottom:1.1rem; }
.hero-title{
  font-family:"Anton",sans-serif; font-weight:400;
  text-transform:uppercase;
  line-height:.84; letter-spacing:.004em;
  font-size:clamp(3.6rem, 15vw, 13rem);
  color:var(--oat);
  margin-bottom:1.4rem;
  text-shadow:0 6px 50px rgba(0,0,0,.5);
}
.hero-title .line{ display:block; }
.hero-title em{
  color:var(--ember);
  text-shadow:0 0 38px rgba(224,138,43,.55);
}
.hero-sub{
  font-size:clamp(1.02rem, .6vw + .95rem, 1.28rem);
  max-width:46ch; color:var(--oat);
  line-height:1.6; margin-bottom:1.9rem;
}
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-foot{
  position:relative; z-index:3;
  max-width:var(--maxw); width:100%; margin:0 auto;
  display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line); padding-top:1.1rem;
  font-family:"Bitter",serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; font-size:.66rem;
  color:var(--oat-dim);
}
.scroll-hint{ color:var(--ember); }

/* ============ MARQUEE ============ */
.marquee{
  background:var(--ember);
  color:#1c1108;
  overflow:hidden; white-space:nowrap;
  padding:.7rem 0;
  border-top:1px solid rgba(28,17,8,.25);
  border-bottom:1px solid rgba(28,17,8,.25);
}
.marquee-track{
  display:inline-block;
  font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.12em;
  animation:scrollX 26s linear infinite;
}
.marquee-track span{ display:inline-block; }

/* ============ STORY ============ */
.story{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(5rem,11vh,9rem) var(--pad);
}
.sec-num{
  position:absolute; top:clamp(2.5rem,6vh,5rem); left:var(--pad);
  font-family:"Anton",sans-serif; font-size:clamp(7rem,16vw,16rem);
  line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(182,163,135,.2);
  letter-spacing:0; pointer-events:none; z-index:0; user-select:none;
}
.sec-num.right{ left:auto; right:var(--pad); }
.sec-num.outline{ -webkit-text-stroke:1.5px rgba(224,138,43,.22); }
.story-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.story-head .eyebrow{ margin-bottom:1.2rem; }
.story-body p{ margin-bottom:1.4rem; max-width:54ch; color:var(--oat); }
.story-body p:last-child{ margin-bottom:0; }

/* ============ ROASTS ============ */
.roasts{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vh,7rem) var(--pad) clamp(5rem,11vh,9rem);
}
.roasts-head{ position:relative; z-index:1; margin-bottom:clamp(2.5rem,6vh,4rem); max-width:34ch; }
.roasts-head .eyebrow{ margin-bottom:1rem; }
.roasts-lede{ margin-top:1.2rem; color:var(--oat-dim); max-width:42ch; }

.bean-list{ list-style:none; position:relative; z-index:1; }
.bean{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) auto;
  gap:clamp(1rem,3vw,3rem);
  align-items:center;
  padding:clamp(1.6rem,3.4vh,2.6rem) 0;
  border-top:1px solid var(--line);
  transition:background .3s ease, padding-left .3s ease;
}
.bean:last-child{ border-bottom:1px solid var(--line); }
.bean:hover{ background:linear-gradient(to right, rgba(224,138,43,.06), transparent 60%); padding-left:.8rem; }
.bean-main{ display:flex; flex-direction:column; gap:.35rem; }
.bean-rank{
  font-family:"Bitter",serif; font-weight:600; letter-spacing:.2em;
  font-size:.66rem; color:var(--ember);
}
.bean-name{
  font-family:"Anton",sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:.95;
  color:var(--oat); transition:color .25s;
}
.bean:hover .bean-name{ color:var(--ember); }
.bean-origin{
  font-family:"Bitter",serif; font-style:italic; color:var(--oat-dim);
  font-size:.92rem;
}
.bean-notes{ color:var(--oat-dim); font-size:.96rem; max-width:42ch; }
.bean-price{
  font-family:"Anton",sans-serif; font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--ember); text-align:right; white-space:nowrap;
}

/* ============ TAPROOM ============ */
.taproom{
  position:relative;
  display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch;
  min-height:78vh;
  background:var(--espresso-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.taproom-media{ position:relative; overflow:hidden; }
.taproom-media img{ width:100%; height:100%; min-height:340px; object-fit:cover; }
.taproom-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, rgba(44,29,18,.7));
}
.taproom .sec-num.outline{ top:auto; bottom:2vh; right:auto; left:42%; z-index:0; }
.taproom-copy{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:1.3rem;
  padding:clamp(3rem,7vw,6rem);
  justify-content:center;
}
.taproom-copy .eyebrow{ margin-bottom:.2rem; }
.taproom-copy p{ color:var(--oat); max-width:42ch; }
.taproom-copy .btn{ margin-top:.6rem; }

/* ============ CRAFT ============ */
.craft{
  position:relative; overflow:hidden;
  padding:clamp(5rem,11vh,9rem) 0;
}
.craft-glow{
  position:absolute; z-index:0; left:62%; top:40%;
  width:50vw; height:50vw; max-width:640px; max-height:640px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(224,138,43,.18), transparent 64%);
  filter:blur(20px);
  animation:emberPulse 7.5s ease-in-out infinite;
}
.craft-grid{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
.craft-copy .eyebrow{ margin-bottom:1.1rem; }
.craft-copy h2{ margin-bottom:1.6rem; }
.craft-copy p{ color:var(--oat); max-width:46ch; margin-bottom:1.3rem; }
.craft-stats{
  display:flex; gap:clamp(1.2rem,3vw,2.6rem); flex-wrap:wrap;
  margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.craft-stats > div{ display:flex; flex-direction:column; gap:.3rem; }
.stat-num{
  font-family:"Anton",sans-serif; font-size:clamp(1.9rem,3.6vw,2.8rem);
  color:var(--ember); line-height:1;
}
.stat-num small{ font-size:.42em; color:var(--oat-dim); margin-left:.15em; }
.stat-lbl{
  font-family:"Bitter",serif; text-transform:uppercase; letter-spacing:.14em;
  font-size:.62rem; color:var(--oat-dim);
}
.craft-media{
  position:relative;
  border:1px solid var(--line);
}
.craft-media img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
}
.craft-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px 10px rgba(224,138,43,.18);
}

/* ============ BURN / NEWSLETTER ============ */
.burn{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(5rem,12vh,9rem) var(--pad);
  background:var(--espresso-2);
  border-top:1px solid var(--line);
}
.burn-glow{
  position:absolute; z-index:0; left:50%; top:50%;
  width:80vw; height:50vw; max-width:900px; max-height:520px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(224,138,43,.16), transparent 64%);
  filter:blur(18px);
  animation:emberPulse 8s ease-in-out infinite;
}
.burn > *{ position:relative; z-index:1; }
.burn .eyebrow{ margin-bottom:1rem; }
.burn .big{ margin-bottom:1.2rem; }
.burn-lede{ color:var(--oat-dim); max-width:48ch; margin:0 auto 2.2rem; }
.burn-form{
  display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap;
  max-width:520px; margin:0 auto;
}
.burn-form input{
  flex:1 1 240px;
  background:rgba(20,12,8,.7);
  border:1px solid var(--line);
  color:var(--oat);
  font-family:"Bitter",serif; font-size:1rem;
  padding:.95em 1.2em;
}
.burn-form input::placeholder{ color:var(--oat-dim); }
.burn-form input:focus{ outline:none; border-color:var(--ember); }

/* ============ FOOTER / VISIT ============ */
.visit{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vh,7rem) var(--pad) 2.5rem;
}
.visit-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid var(--line);
}
.visit-brand .wordmark{ font-size:1.9rem; }
.visit-tag{ font-style:italic; color:var(--oat-dim); margin-top:.8rem; }
.visit-col h4{
  font-family:"Bitter",serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:.7rem; color:var(--ember); margin-bottom:1rem;
}
.visit-col p{ color:var(--oat-dim); font-size:.95rem; line-height:1.9; }
.visit-col a{ transition:color .2s; }
.visit-col a:hover{ color:var(--ember); }
.visit-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem;
  font-family:"Bitter",serif; text-transform:uppercase; letter-spacing:.16em;
  font-size:.64rem; color:var(--oat-dim);
}

/* ============ MOTION ============ */
.reveal, .reveal-up{ opacity:0; }
.reveal{ transform:translateY(34px); }
.reveal-up{ transform:translateY(48px); }
.reveal.in, .reveal-up.in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.16,.84,.32,1), transform .8s cubic-bezier(.16,.84,.32,1);
}
/* hero stagger */
.hero .reveal[data-d="0"]{ transition-delay:.05s; }
.hero .reveal[data-d="1"]{ transition-delay:.18s; }
.hero .reveal[data-d="2"]{ transition-delay:.32s; }
.hero .reveal[data-d="3"]{ transition-delay:.52s; }
.hero .reveal[data-d="4"]{ transition-delay:.66s; }
.hero .reveal[data-d="5"]{ transition-delay:.8s; }

@keyframes emberPulse{
  0%,100%{ opacity:.78; transform:translate(0,-50%) scale(1); }
  50%{ opacity:1; transform:translate(0,-50%) scale(1.06); }
}
.craft-glow,.burn-glow{ transform-origin:center; }
@keyframes scrollX{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav-links, .nav .btn{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; margin-left:auto;
    background:none; border:none; cursor:pointer; padding:.4rem;
  }
  .nav-toggle span{ width:26px; height:2px; background:var(--oat); display:block; }
  .story-grid{ grid-template-columns:1fr; gap:2rem; }
  .taproom{ grid-template-columns:1fr; }
  .taproom-media{ min-height:300px; }
  .taproom-media::after{ background:linear-gradient(to top, rgba(44,29,18,.85), transparent 55%); }
  .taproom .sec-num.outline{ left:auto; right:var(--pad); top:1rem; bottom:auto; }
  .craft-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .craft-media{ order:-1; }
  .visit-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:560px){
  .bean{
    grid-template-columns:1fr auto;
    grid-template-areas:"main price" "notes notes";
    gap:.4rem 1rem; align-items:start;
  }
  .bean-main{ grid-area:main; }
  .bean-notes{ grid-area:notes; max-width:none; }
  .bean-price{ grid-area:price; }
  .hero-foot{ font-size:.58rem; flex-wrap:wrap; }
  .hero-foot .scroll-hint{ display:none; }
  .visit-grid{ grid-template-columns:1fr; }
  .visit-base{ flex-direction:column; gap:.5rem; }
  .burn-form{ flex-direction:column; }
  .burn-form .btn{ width:100%; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-glow,.craft-glow,.burn-glow{ animation:none; }
  .marquee-track{ animation:none; transform:translateX(-12%); }
  .reveal,.reveal-up{ opacity:1; transform:none; }
}