*{box-sizing:border-box}
:root{
  --espresso:#2b1c14;
  --wood:#6f4a31;
  --wood2:#9c7352;
  --cream:#f2eadc;
  --paper:#fbf7ef;
  --sage:#7f8c70;
  --green:#3e5540;
  --ink:#2b241e;
  --muted:#6d6259;
  --line:#d8cdbd;
  --honey:#c99b5c;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6
}
a{text-decoration:none;color:inherit}
.demo-bar{
  min-height:34px;
  background:var(--espresso);
  color:#eadfce;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  padding:7px 20px;
  font-size:9px;
  letter-spacing:.16em
}
.demo-bar a{color:#d7b982}
.site-header{
  height:82px;
  padding:0 4.5%;
  display:grid;
  grid-template-columns:310px 1fr 130px;
  align-items:center;
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(251,247,239,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:14px}
.mark{
  font-family:Georgia,serif;
  font-size:28px;
  color:var(--wood);
  border:1px solid var(--wood2);
  width:52px;height:52px;
  border-radius:50%;
  display:grid;place-items:center;
  letter-spacing:-.06em
}
.brand-copy{display:grid;line-height:1.05}
.brand-copy strong{font-family:Georgia,serif;font-size:18px;letter-spacing:.08em}
.brand-copy small{font-size:7px;letter-spacing:.24em;color:var(--wood2);margin-top:7px}
.nav{display:flex;justify-content:center;gap:28px;font-size:9px;letter-spacing:.16em}
.nav a:hover{color:var(--wood)}
.order-btn{
  justify-self:end;
  border:1px solid var(--wood);
  padding:11px 14px;
  font-size:9px;
  letter-spacing:.14em
}
.menu-toggle{display:none}
.hero{
  min-height:740px;
  padding:80px 4.5%;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
  background:linear-gradient(135deg,#f5ede0,#eee1cf)
}
.eyebrow{
  margin:0 0 15px;
  color:var(--wood);
  font-size:9px;
  letter-spacing:.22em;
  font-weight:700
}
.eyebrow.dark{color:#5f4938}
.eyebrow.light{color:#e5c78d}
h1,h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:.98;
  letter-spacing:-.04em;
  margin:0
}
h1{font-size:clamp(64px,7vw,104px)}
h2{font-size:clamp(48px,5vw,74px)}
h1 em{color:var(--green);font-weight:400}
.lead{
  max-width:590px;
  font-family:Georgia,serif;
  font-size:20px;
  color:#65594e;
  margin-top:25px
}
.hero-actions{display:flex;gap:24px;align-items:center;margin-top:30px;flex-wrap:wrap}
.btn{
  min-height:50px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  font-size:9px;
  letter-spacing:.15em;
  font-weight:700
}
.primary{background:var(--espresso);color:#fff}
.text-link{font-size:9px;letter-spacing:.13em;color:var(--wood)}
.hero-scene{
  height:540px;
  position:relative;
  overflow:hidden;
  border-radius:180px 180px 24px 24px;
  background:
    linear-gradient(rgba(95,69,48,.08),rgba(95,69,48,.05)),
    linear-gradient(90deg,#e6d7c2 0 65%,#cab597 65%);
  box-shadow:0 25px 60px rgba(73,49,30,.14)
}
.window{
  position:absolute;right:8%;top:10%;width:35%;height:46%;
  background:linear-gradient(#d8e0d7,#afc2b4);
  border:12px solid #7a5a42;
  box-shadow:inset 0 0 0 2px #aa8768
}
.window:before,.window:after{content:"";position:absolute;background:#7a5a42}
.window:before{width:8px;height:100%;left:50%;top:0}.window:after{height:8px;width:100%;top:50%;left:0}
.shelf{position:absolute;left:6%;width:44%;height:12px;background:#774d31;box-shadow:0 6px 0 #5d3c29}
.shelf-one{top:24%}.shelf-two{top:43%}
.shelf:before,.shelf:after{content:"";position:absolute;bottom:12px;width:34px;height:50px;border-radius:5px;background:#9f7655}
.shelf:before{left:18%}.shelf:after{left:62%;background:#6f7b61}
.counter{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(#6a452e,#4d3223);
  box-shadow:inset 0 12px 0 #936849
}
.cup{
  position:absolute;left:24%;top:22%;width:120px;height:80px;
  border-radius:0 0 46px 46px;background:#e8dfcf;
  box-shadow:0 20px 24px rgba(0,0,0,.18)
}
.cup:after{content:"";position:absolute;right:-32px;top:14px;width:44px;height:44px;border:10px solid #e8dfcf;border-left:0;border-radius:0 30px 30px 0}
.steam{position:absolute;top:-65px;width:8px;height:55px;border-radius:50%;border-left:2px solid rgba(255,255,255,.7)}
.s1{left:24px}.s2{left:52px;transform:translateY(-9px)}.s3{left:80px}
.croissant{
  position:absolute;right:18%;top:33%;width:130px;height:70px;border-radius:60% 60% 45% 45%;
  background:linear-gradient(#d9a454,#a86c31);
  transform:rotate(-8deg);
  box-shadow:0 15px 20px rgba(0,0,0,.2)
}
.plant{position:absolute;width:70px;height:120px;bottom:38%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#8da17d 0 18%,transparent 19%),radial-gradient(ellipse at 20% 55%,#718763 0 20%,transparent 21%),radial-gradient(ellipse at 80% 60%,#597253 0 20%,transparent 21%)}
.plant-one{right:5%}.plant-two{left:50%;bottom:32%;transform:scale(.75)}
.section{padding:100px 4.5%}
.story{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  background:var(--paper)
}
.story-card{
  padding:70px;
  background:#efe2cf;
  border:1px solid #dfd1bd
}
.story-card p{font-family:Georgia,serif;font-size:18px;color:#5f544a;max-width:700px}
.quote-card{
  min-height:100%;
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--green);
  color:#f3ebdf
}
.quote-card>span{font-family:Georgia,serif;font-size:80px;color:#d9c192;line-height:.5}
.quote-card blockquote{font-family:Georgia,serif;font-size:34px;line-height:1.25;margin:25px 0 0}
.menu-section{background:var(--espresso);color:#f7efe5}
.section-heading{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:end
}
.section-heading>p{color:#c7b6a7;max-width:500px}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:55px
}
.menu-column h3{
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  color:#e4c693;
  padding-bottom:14px;
  border-bottom:1px solid #6c4f3c
}
.menu-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 15px;
  padding:16px 0;
  border-bottom:1px solid #4a3528
}
.menu-item span{font-family:Georgia,serif;font-size:18px}
.menu-item b{font-size:12px}
.menu-item small{grid-column:1/-1;color:#bdaea2;font-size:11px}
.space-section{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  background:#e9dece
}
.space-visual{
  min-height:650px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#d8c7ae,#b89e7d)
}
.wall-panel{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 100px,rgba(100,67,43,.08) 101px 103px)}
.bench{position:absolute;left:0;right:0;bottom:0;height:38%;background:#7b5539}
.table{position:absolute;bottom:18%;width:120px;height:20px;background:#553924;border-radius:50%}
.table:after{content:"";position:absolute;left:55px;top:15px;width:10px;height:110px;background:#453024}
.table-a{left:20%}.table-b{right:18%;transform:scale(.9)}
.hanging-light{position:absolute;top:0;width:4px;height:180px;background:#4b382d}
.hanging-light:after{content:"";position:absolute;bottom:-30px;left:-28px;width:60px;height:60px;border-radius:50%;background:#d8a354;box-shadow:0 0 30px rgba(216,163,84,.55)}
.light-a{left:34%}.light-b{right:26%;height:150px}
.tree{position:absolute;right:4%;bottom:35%;width:180px;height:250px;background:radial-gradient(ellipse at 50% 10%,#738364 0 18%,transparent 19%),radial-gradient(ellipse at 20% 40%,#64785c 0 18%,transparent 19%),radial-gradient(ellipse at 80% 45%,#809170 0 18%,transparent 19%)}
.space-copy{padding:80px 8%;display:flex;flex-direction:column;justify-content:center}
.space-copy>p{font-family:Georgia,serif;font-size:18px;color:#67584b}
.features{display:grid;margin-top:35px;border-top:1px solid #c8b9a5}
.features div{display:grid;grid-template-columns:50px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid #c8b9a5}
.features span{color:var(--wood)}.features p{margin:0}
.favorites{background:#f8f1e6}
.favorite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.favorite-card{border:1px solid #dfd1bd;background:#fff9f0}
.favorite-art{height:250px;position:relative;overflow:hidden;background:#e7d8c3}
.favorite-card>div:last-child{padding:22px}
.favorite-card h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:0}
.favorite-card p{color:var(--muted);margin-bottom:0}
.drink-cup,.matcha-cup{position:absolute;left:50%;top:50%;transform:translate(-50%,-45%);width:130px;height:90px;border-radius:0 0 50px 50px;background:#f6eee2;box-shadow:0 20px 25px rgba(0,0,0,.12)}
.drink-cup:before,.matcha-cup:before{content:"";position:absolute;left:8px;right:8px;top:8px;height:22px;border-radius:50%;background:#8b5a36}
.matcha-cup:before{background:#89a46d}
.drink-cup:after,.matcha-cup:after{content:"";position:absolute;right:-32px;top:20px;width:40px;height:40px;border:10px solid #f6eee2;border-left:0;border-radius:0 25px 25px 0}
.pastry-shape{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);width:180px;height:100px;border-radius:60%;background:linear-gradient(#e2b16a,#9e642d);box-shadow:0 22px 24px rgba(0,0,0,.13)}
.visit{background:#f4eadc}
.visit-details{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:45px 0}
.visit-details small{font-size:8px;letter-spacing:.16em;color:#8c7157}
.visit-details p{font-family:Georgia,serif;font-size:18px}
.map{height:360px;position:relative;overflow:hidden;background:#d4d8cf;border:1px solid #bec4b8}
.street{position:absolute;background:#eff1eb}
.s-a{left:12%;top:-10%;width:35px;height:130%;transform:rotate(12deg)}
.s-b{left:-10%;top:45%;width:120%;height:28px;transform:rotate(-5deg)}
.s-c{right:16%;top:-20%;width:26px;height:150%;transform:rotate(-18deg)}
.pin{position:absolute;left:55%;top:45%;width:55px;height:55px;border-radius:50% 50% 50% 0;background:var(--green);color:white;display:grid;place-items:center;transform:rotate(-45deg);font-size:0}
.pin:after{content:"B&B";font-size:10px;transform:rotate(45deg)}
.map>span{position:absolute;left:5%;bottom:6%;font-family:Georgia,serif;font-size:34px;color:#66715f}
.studio-cta{
  padding:90px 20px;
  text-align:center;
  background:var(--green);
  color:#f5eee2
}
.studio-cta h2{max-width:900px;margin:0 auto}
.studio-cta p{max-width:720px;margin:25px auto;color:#d9d3c8}
.cta-btn{background:#e2c68f;color:#273528}
footer{
  padding:42px 4.5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#2b1c14;
  color:#eee1cf
}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand .mark{color:#e0c08d;border-color:#9b7453}
.footer-brand>div{display:grid}
.footer-brand strong{font-family:Georgia,serif;letter-spacing:.08em}
.footer-brand small{font-size:7px;letter-spacing:.16em;color:#b7a18d;margin-top:4px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:8px;letter-spacing:.13em}
@media(max-width:920px){
  .site-header{grid-template-columns:1fr auto}
  .nav,.order-btn{display:none}
  .menu-toggle{display:block;justify-self:end;background:none;border:1px solid var(--wood);padding:9px 12px;font-size:9px;letter-spacing:.14em}
  .nav.open{display:flex;position:absolute;top:82px;left:0;right:0;background:var(--paper);padding:22px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .hero,.story,.space-section{grid-template-columns:1fr}
  .hero{padding-top:55px}
  .hero-scene{max-width:780px;width:100%;margin:auto}
  .section-heading{grid-template-columns:1fr}
}
@media(max-width:680px){
  .demo-bar{justify-content:center}.demo-bar a{display:none}
  .site-header{height:72px;padding:0 18px}.nav.open{top:72px}
  .brand-copy strong{font-size:14px}.brand-copy small{font-size:6px}.mark{width:44px;height:44px;font-size:23px}
  .hero,.section{padding-left:20px;padding-right:20px}
  h1{font-size:58px}h2{font-size:46px}
  .hero-scene{height:430px;border-radius:120px 120px 18px 18px}
  .story-card,.quote-card{padding:40px}
  .menu-grid,.favorite-grid{grid-template-columns:1fr}
  .space-visual{min-height:500px}
  .visit-details{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start;gap:25px}
}