:root{
  --espresso:#2A1810;
  --espresso-deep:#1C120C;
  --cream:#F3E7D6;
  --cream-dim:#EADCC7;
  --caramel:#A8642E;
  --moss:#5C6B45;
  --type-display:'Petrona', serif;
  --type-body:'Work Sans', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--espresso-deep);
  font-family:var(--type-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
a{color:inherit;}
h1,h2,h3{font-family:var(--type-display); font-weight:600; color:var(--espresso-deep); letter-spacing:-0.01em;}

/* header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(243,231,214,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(42,24,16,0.12);
}
.header-row{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{font-family:var(--type-display); font-weight:700; font-size:1.2rem;}
.brand.small{font-size:1rem;}
nav{display:flex; gap:26px;}
nav a{
  font-size:0.9rem; text-decoration:none; color:var(--espresso);
  font-weight:500; border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .2s ease;
}
nav a:hover{border-color:var(--caramel);}

/* hero */
.hero{padding:90px 0 70px;}
.hero-row{display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center;}
.eyebrow{
  font-size:0.8rem; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--caramel); font-weight:600; margin-bottom:16px;
}
.hero h1{font-size:clamp(2.2rem, 4.6vw, 3.3rem); line-height:1.08; margin-bottom:22px;}
.hero-sub{max-width:480px; color:#4a3628; font-size:1.05rem; margin-bottom:32px;}
.btn{
  display:inline-block; background:var(--espresso-deep); color:var(--cream);
  padding:13px 26px; border-radius:2px; text-decoration:none; font-weight:600;
  font-size:0.95rem; transition:background .2s ease;
}
.btn:hover{background:var(--caramel);}

/* hero cup illustration */
.hero-cup{display:flex; justify-content:center;}
.cup{
  position:relative; width:180px; height:140px;
  background:var(--espresso-deep);
  border-radius:0 0 90px 90px / 0 0 70px 70px;
}
.crema{
  position:absolute; top:-14px; left:8px; right:8px; height:28px;
  background:var(--caramel); border-radius:50%;
}
.steam{
  position:absolute; top:-70px; width:6px; height:60px;
  background:linear-gradient(to top, rgba(42,24,16,0.35), transparent);
  border-radius:4px;
  animation:rise 3s ease-in-out infinite;
}
.s1{left:50px; animation-delay:0s;}
.s2{left:90px; animation-delay:0.6s;}
.s3{left:130px; animation-delay:1.2s;}
@keyframes rise{
  0%{transform:translateY(0) scaleY(1); opacity:0.7;}
  50%{transform:translateY(-18px) scaleY(1.2); opacity:0.3;}
  100%{transform:translateY(-36px) scaleY(1.4); opacity:0;}
}

/* roast lab */
.roast-lab{background:var(--espresso-deep); color:var(--cream); padding:96px 0;}
.roast-lab h2{color:var(--cream);}
.section-lede{max-width:560px; color:#d8c7b3; margin-top:14px; margin-bottom:52px;}

.roast-widget{display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:center;}
.bean-display{display:flex; justify-content:center;}
.bean{
  width:150px; height:100px;
  background:#C99A65;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  position:relative;
  transition:background-color .4s ease, box-shadow .4s ease;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.08);
}
.bean::after{
  content:'';
  position:absolute; top:8%; left:50%; width:2px; height:84%;
  background:rgba(28,18,12,0.35);
  transform:translateX(-50%);
  border-radius:2px;
}

.roast-controls input[type="range"]{
  width:100%; appearance:none; height:4px; background:#5a4231; border-radius:2px; margin-bottom:12px;
}
.roast-controls input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--caramel); cursor:pointer; border:3px solid var(--cream);
}
.roast-controls input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--caramel); cursor:pointer; border:3px solid var(--cream);
}
.roast-scale{
  display:flex; justify-content:space-between;
  font-size:0.78rem; color:#c3ac91; margin-bottom:32px;
}
.roast-readout h3{color:var(--cream); font-size:1.5rem; margin-bottom:8px;}
.roast-readout p{color:#d8c7b3; max-width:460px; margin-bottom:14px;}
.tasting-label{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--caramel); font-weight:600; margin-bottom:4px !important;
}
.tasting-notes{font-family:var(--type-display); font-size:1.05rem; color:var(--cream) !important;}

/* menu */
.menu{padding:96px 0;}
.menu h2{margin-bottom:44px;}
.menu-columns{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.menu-col h3{
  font-size:1rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--caramel); margin-bottom:16px; font-family:var(--type-body); font-weight:600;
}
.menu-item{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px dotted rgba(42,24,16,0.25);
  font-size:0.98rem;
}
.price{color:#6b5847; font-variant-numeric:tabular-nums;}

/* origin */
.origin{background:var(--cream-dim); padding:96px 0;}
.origin h2{margin-bottom:44px;}
.origin-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.origin-card{background:var(--cream); padding:28px; border-top:3px solid var(--moss);}
.origin-card h3{font-size:1.1rem; margin-bottom:10px;}
.origin-card p{color:#4a3628; font-size:0.95rem;}

/* visit */
.visit{padding:96px 0;}
.visit-row{display:grid; grid-template-columns:1.3fr 0.7fr; gap:48px; align-items:start;}
.visit h2{margin-bottom:16px;}
.visit p{max-width:440px; color:#4a3628;}
.hours-row{
  display:flex; justify-content:space-between; padding:12px 0;
  border-bottom:1px solid rgba(42,24,16,0.15); font-size:0.95rem;
}

/* footer */
.site-footer{
  border-top:1px solid rgba(42,24,16,0.15);
  padding:32px 0 48px;
}
.site-footer .wrap{display:flex; justify-content:space-between; align-items:baseline;}
.site-footer p{color:#6b5847; font-size:0.85rem;}

a:focus-visible, input:focus-visible{outline:2px solid var(--caramel); outline-offset:3px;}

@media (max-width:800px){
  nav{display:none;}
  .hero-row, .roast-widget, .visit-row{grid-template-columns:1fr;}
  .menu-columns, .origin-grid{grid-template-columns:1fr;}
  .hero-cup{margin-top:32px;}
}

@media (prefers-reduced-motion: reduce){
  .steam{animation:none; display:none;}
  html{scroll-behavior:auto;}
}