:root { --cream:#f3eadb; --paper:#fbf7ef; --ink:#29231e; --brown:#7a3f27; --rust:#a85231; --tan:#d9c2a5; --line:rgba(41,35,30,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.site-header { height:88px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:var(--cream); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; font-family:"DM Serif Display",serif; font-size:21px; }
.brand-mark { width:39px; height:39px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font:11px "DM Sans",sans-serif; letter-spacing:-1px; }
nav { display:flex; align-items:center; gap:38px; font-size:13px; font-weight:600; }
nav a:not(.nav-cta) { position:relative; }
nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:currentColor; transition:.3s; }
nav a:hover::after { width:100%; }
.nav-cta { border:1px solid var(--ink); border-radius:30px; padding:11px 21px; transition:.25s; }
.nav-cta:hover { background:var(--ink); color:var(--paper); }
.nav-toggle { display:none; background:none; border:0; }
.hero { min-height:calc(100vh - 88px); background:var(--cream); display:grid; grid-template-columns:54% 46%; position:relative; overflow:hidden; }
.hero-copy { padding:12vh 7vw 10vh 9vw; z-index:2; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin:0 0 24px; }
h1,h2 { font-family:"DM Serif Display",serif; font-weight:400; margin:0; line-height:.94; }
h1 { font-size:clamp(64px,7.7vw,124px); letter-spacing:-.045em; }
h1 em { color:var(--rust); }
.hero-intro { max-width:520px; font:18px/1.65 "DM Sans"; margin:34px 0; color:#5f554c; }
.hero-actions { display:flex; align-items:center; gap:34px; }
.button { display:inline-flex; gap:35px; align-items:center; padding:16px 22px; font-size:13px; font-weight:600; }
.button-dark { background:var(--ink); color:white; }
.button-dark:hover span { transform:translate(3px,3px); }
.button span { transition:.2s; }
.text-link { display:inline-flex; gap:12px; align-items:center; font-size:13px; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:5px; }
.hero-visual { margin:4vh 4vw 4vh 0; background:#a75636; position:relative; overflow:hidden; min-height:610px; }
.hero-visual::before { content:""; position:absolute; width:80%; height:70%; background:radial-gradient(circle,rgba(255,218,167,.25),transparent 65%); left:10%; top:15%; }
.cup { position:absolute; width:290px; height:230px; border-radius:35px 35px 100px 100px; background:linear-gradient(90deg,#d8b894,#f1d8b5 60%,#c99d76); left:50%; top:48%; transform:translate(-50%,-50%); z-index:2; box-shadow:0 35px 35px rgba(54,22,10,.28); }
.coffee { position:absolute; width:276px; height:82px; left:7px; top:-15px; border-radius:50%; background:#47261a; border:13px solid #ead0ae; overflow:hidden; }
.latte-art { position:absolute; width:85px; height:45px; border:4px solid #d8a975; border-radius:50%; left:90px; top:16px; transform:rotate(-8deg); opacity:.8; }
.latte-art::before,.latte-art::after { content:""; position:absolute; border:3px solid #d8a975; border-radius:50%; inset:7px 14px; }
.latte-art::after { inset:15px 26px; }
.handle { position:absolute; width:100px; height:110px; border:25px solid #d4ac85; border-left:0; right:-82px; top:45px; border-radius:0 60px 60px 0; }
.saucer { position:absolute; width:390px; height:75px; border-radius:50%; background:#d8b58e; left:50%; top:68%; transform:translateX(-50%); box-shadow:0 22px 25px rgba(53,22,10,.28); }
.steam { position:absolute; width:25px; height:100px; border-left:3px solid rgba(255,238,215,.5); border-radius:50%; top:-130px; animation:steam 3s ease-in-out infinite; }
.steam-one { left:105px; }.steam-two { left:165px; animation-delay:1.2s; }
@keyframes steam { 0%,100% { opacity:0; transform:translateY(15px) skewX(-10deg); } 50% { opacity:1; transform:translateY(-15px) skewX(10deg); } }
.hero-note { position:absolute; top:8%; left:8%; display:flex; gap:12px; color:#f6e7d5; font:13px/1.4 "DM Serif Display"; font-style:italic; }
.note-star { font-style:normal; }
.hero-caption { position:absolute; right:6%; bottom:4%; text-align:right; color:#efd3bc; font:italic 18px/1.25 "DM Serif Display"; }
.bean { width:28px; height:18px; background:#48251a; border-radius:50%; position:absolute; transform:rotate(35deg); box-shadow:inset 1px 0 #9a5a40; }
.bean-one { top:23%; right:13%; }.bean-two { bottom:17%; left:12%; transform:rotate(-25deg); }.bean-three { bottom:10%; right:20%; }
.scroll-cue { position:absolute; bottom:28px; left:3vw; writing-mode:vertical-rl; font-size:10px; text-transform:uppercase; letter-spacing:.2em; display:flex; gap:12px; align-items:center; }
.section { padding:120px 9vw; }
.story { display:grid; grid-template-columns:1fr 2.2fr .8fr; gap:7vw; align-items:center; background:var(--paper); }
.handwritten { font:italic 28px "DM Serif Display"; color:var(--rust); transform:rotate(-8deg); margin-left:45px; }
.story-copy h2 { font-size:clamp(44px,5vw,76px); max-width:760px; margin-bottom:35px; }
.story-copy>p { max-width:650px; font-size:16px; line-height:1.8; color:#675d54; margin:0 0 32px; }
.story-stamp { width:150px; aspect-ratio:1; border:1px solid var(--brown); border-radius:50%; display:grid; place-items:center; color:var(--brown); transform:rotate(8deg); }
.story-stamp span { font-size:8px; letter-spacing:.08em; position:absolute; }
.story-stamp b { font:34px "DM Serif Display"; }
.menu-section { background:#25211d; color:#f6eee2; }
.section-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:42px; }
.section-heading h2 { font-size:clamp(64px,8vw,112px); }
.section-heading>p { color:#b8aea4; line-height:1.7; font-size:13px; }
.menu-tabs { display:flex; gap:14px; padding:35px 0; overflow:auto; }
.menu-tabs button { flex-shrink:0; border:1px solid rgba(255,255,255,.25); border-radius:30px; padding:11px 20px; color:#d8cec3; background:transparent; cursor:pointer; font:500 12px "DM Sans"; transition:.25s; }
.menu-tabs button.active,.menu-tabs button:hover { background:#f4eadc; color:#25211d; border-color:#f4eadc; }
.menu-panel { display:grid; grid-template-columns:1fr 1fr; column-gap:8vw; min-height:340px; }
.menu-item { display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.15); padding:23px 0; }
.menu-item h3 { margin:0 0 8px; font:22px "DM Serif Display"; }
.menu-item p { margin:0; color:#a99f95; font-size:12px; line-height:1.5; }
.menu-item strong { font:18px "DM Serif Display"; color:#d9a27e; }
.menu-note { color:#968d84; font-size:11px; margin:35px 0 0; }
.quote-banner { background:var(--rust); color:#f8eadc; padding:75px 5vw; text-align:center; }
.quote-banner p { font:italic clamp(32px,4vw,55px) "DM Serif Display"; margin:0 0 15px; }
.quote-banner span { font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.visit { display:grid; grid-template-columns:1fr 1.2fr; gap:10vw; background:#e8d8c4; }
.visit-intro h2 { font-size:clamp(58px,7vw,98px); color:var(--brown); }
.visit-intro>p:not(.eyebrow) { max-width:380px; line-height:1.7; color:#65584d; margin:30px 0; }
.socials { display:flex; gap:9px; }
.socials a { width:35px; height:35px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; transition:.2s; }
.socials a:hover { background:var(--ink); color:white; }
.detail-block { display:grid; grid-template-columns:50px 1fr; border-top:1px solid rgba(41,35,30,.25); padding:28px 0; }
.detail-number { font-size:10px; color:var(--rust); }
.detail-block h3 { font:28px "DM Serif Display"; margin:0 0 15px; }
.detail-block p { margin:0; line-height:1.75; color:#554a40; font-size:14px; }
.detail-block a { border-bottom:1px solid currentColor; }
.detail-block p a { border:0; }
.detail-block div>a { display:inline-block; margin-top:14px; font-size:12px; font-weight:600; }
.hours { display:grid; grid-template-columns:1fr auto; gap:10px 40px; max-width:360px; }
.hours b { font-weight:500; color:var(--ink); }
footer { padding:70px 6vw 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:5vw; background:var(--paper); align-items:start; border-top:1px solid var(--line); }
footer p { font:italic 18px/1.5 "DM Serif Display"; margin:0; color:var(--brown); }
footer>div { display:flex; flex-direction:column; gap:10px; font-size:12px; }
footer small { font-size:10px; line-height:1.8; color:#83776d; }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s,transform .7s; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:800px) {
  .site-header { height:72px; padding:0 20px; }
  .nav-toggle { display:flex; flex-direction:column; gap:5px; padding:10px; }
  .nav-toggle span:not(.sr-only) { width:22px; height:1px; background:var(--ink); }
  nav { display:none; position:absolute; top:72px; left:0; right:0; background:var(--cream); padding:28px; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); }
  nav.open { display:flex; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:80px 24px 55px; }
  h1 { font-size:60px; }
  .hero-intro { font-size:16px; }
  .hero-visual { margin:0 20px 55px; min-height:460px; }
  .cup { transform:translate(-50%,-50%) scale(.72); }.saucer { transform:translateX(-50%) scale(.75); }
  .scroll-cue { display:none; }
  .section { padding:80px 24px; }
  .story { grid-template-columns:1fr; gap:20px; }
  .story-side .eyebrow { margin-bottom:0; }.handwritten { display:none; }.story-stamp { margin-top:30px; }
  .section-heading { display:block; }.section-heading>p { margin-top:25px; }
  .menu-panel { grid-template-columns:1fr; }.menu-item h3 { font-size:19px; }
  .visit { grid-template-columns:1fr; gap:60px; }
  footer { grid-template-columns:1fr 1fr; row-gap:45px; }
}
@media (max-width:480px) {
  .hero-actions { align-items:flex-start; flex-direction:column; gap:24px; }
  .hero-visual { min-height:390px; }
  .visit-intro h2 { font-size:58px; }
  footer { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }