:root { --ink:#26231e; --cream:#f4f0e8; --paper:#fcfaf6; --brown:#725e4b; --line:#d9d2c6; --orange:#cc7248; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Zen Kaku Gothic New", sans-serif; font-size:15px; line-height:1.9; }
a { color:inherit; text-decoration:none; }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; z-index:5; width:100%; padding:0 7vw; color:#fff; transition:.3s; }
.site-header.is-scrolled { position:fixed; background:rgba(252,250,246,.96); color:var(--ink); box-shadow:0 1px 12px #0000000c; }
.logo { letter-spacing:.08em; font-family:"DM Serif Display", serif; font-size:20px; line-height:1; }
.logo span { display:block; font-size:10px; letter-spacing:.23em; margin-top:4px; }
.global-nav { display:flex; gap:33px; font-size:13px; letter-spacing:.09em; }
.global-nav a { position:relative; }
.global-nav a::after { content:""; width:0; height:1px; background:currentColor; bottom:-4px; left:0; position:absolute; transition:.2s; }
.global-nav a:hover::after { width:100%; }
.menu-toggle { display:none; }
.hero { min-height:730px; height:100vh; color:#fff; display:flex; align-items:center; padding:125px 10vw 70px; position:relative; background:linear-gradient(90deg,rgba(29,23,15,.63),rgba(29,23,15,.1)), url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=2000&q=85') center/cover; }
.hero-content { max-width:700px; }
.eyebrow { margin:0 0 14px; color:var(--orange); font-family:"DM Serif Display", serif; letter-spacing:.17em; font-size:12px; }
.hero .eyebrow { color:#f2c6a8; }
h1,h2,h3 { margin:0; font-family:"DM Serif Display", "Zen Kaku Gothic New", serif; font-weight:400; letter-spacing:.03em; line-height:1.34; }
h1 { font-size:clamp(44px,5.1vw,74px); } h1 em { font-style:italic; }
.hero-copy { margin:24px 0 35px; font-size:15px; line-height:2.1; }
.button { display:inline-flex; gap:36px; align-items:center; padding:14px 20px; border:1px solid; font-size:13px; letter-spacing:.1em; transition:.25s; }
.button:hover { background:#fff; color:var(--ink); }
.button span,.text-link span,.menu-card a span { font-size:18px; line-height:1; }
.scroll-cue { position:absolute; display:flex; gap:12px; align-items:center; right:7vw; bottom:34px; font:11px "DM Serif Display",serif; letter-spacing:.14em; transform:rotate(90deg); transform-origin:right; }
.scroll-cue span { width:55px; height:1px; background:#fff; }
.section-padding { padding:115px 10vw; }
.intro { background:var(--cream); }.intro-layout { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:start; }.intro h2 { font-size:clamp(33px,4vw,53px); }.intro-layout p { margin:6px 0 0; max-width:510px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:46px; }.section-heading h2 { font-size:clamp(38px,4.3vw,57px); }.section-heading > p { margin:0; font-size:14px; line-height:1.8; }
.menu-section { background:var(--paper); }.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:23px; }.menu-card { min-height:415px; display:flex; align-items:end; padding:42px; color:#fff; background-size:cover; background-position:center; position:relative; overflow:hidden; }.menu-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(25,20,15,.75),rgba(25,20,15,.05)); }.card-coffee { background-image:url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=85'); }.card-food { background-image:url('https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&w=1200&q=85'); }.menu-card-content { position:relative; }.card-number { margin:0 0 10px; color:#f3c19e; font:15px "DM Serif Display",serif; }.menu-card h3 { font-size:36px; }.menu-card-content > p:not(.card-number) { max-width:310px; font-size:13px; line-height:1.8; }.menu-card a { display:inline-flex; align-items:center; gap:17px; border-bottom:1px solid #ffffff80; padding-bottom:4px; font-size:12px; letter-spacing:.08em; }.menu-list { border-top:1px solid var(--line); margin-top:55px; }.menu-list div { padding:18px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; font:15px "DM Serif Display",serif; letter-spacing:.07em; }.menu-list strong { font-weight:400; }
.about-section { display:grid; grid-template-columns:1fr 1fr; background:#e9e0d3; }.about-image { min-height:650px; background:url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=1200&q=85') center/cover; }.about-content { padding-left:12%; padding-right:12%; }.about-content h2 { font-size:clamp(37px,4vw,56px); margin-bottom:32px; }.about-content > p:not(.eyebrow) { font-size:14px; margin:0 0 18px; }.text-link { display:inline-flex; gap:22px; align-items:center; margin-top:14px; border-bottom:1px solid var(--ink); padding-bottom:4px; font-size:13px; letter-spacing:.06em; }
.access-section { background:var(--cream); }.access-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:10%; }.map-placeholder { min-height:360px; display:grid; place-items:center; background-color:#d9ccba; background-image:linear-gradient(30deg,transparent 48%,#c1af98 49%,#c1af98 51%,transparent 52%),linear-gradient(-47deg,transparent 48%,#c7b69f 49%,#c7b69f 51%,transparent 52%); background-size:160px 120px; }.map-placeholder span { padding:22px; text-align:center; border:1px solid #725e4b; color:var(--brown); background:#f4f0e8d9; font:23px/1.1 "DM Serif Display",serif; letter-spacing:.12em; }.shop-info { margin:0; }.shop-info div { display:grid; grid-template-columns:105px 1fr; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); }.shop-info dt { font:12px "DM Serif Display",serif; letter-spacing:.14em; }.shop-info dd { margin:0; font-size:14px; line-height:1.75; }.shop-info dd a { border-bottom:1px solid; }
.site-footer { display:flex; align-items:center; justify-content:space-between; padding:42px 7vw; color:#fff; background:#39352e; }.site-footer p,.instagram { margin:0; font-size:11px; letter-spacing:.08em; }.instagram { border-bottom:1px solid #fff8; }
@media (max-width: 700px) { .site-header { height:70px; padding:0 6vw; }.menu-toggle { display:grid; gap:5px; padding:8px 0 8px 8px; background:none; border:0; cursor:pointer; }.menu-toggle span { display:block; width:25px; height:1px; background:currentColor; transition:.2s; }.global-nav { display:none; position:absolute; top:70px; right:0; left:0; padding:27px 6vw; background:var(--paper); color:var(--ink); flex-direction:column; gap:17px; box-shadow:0 6px 12px #00000010; }.global-nav.open { display:flex; }.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }.hero { min-height:640px; padding:100px 8vw 70px; }.scroll-cue { right:8vw; }.section-padding { padding:75px 8vw; }.intro-layout,.access-grid,.about-section { grid-template-columns:1fr; }.intro-layout { gap:26px; }.section-heading { align-items:start; flex-direction:column; gap:20px; margin-bottom:32px; }.menu-grid { grid-template-columns:1fr; gap:15px; }.menu-card { min-height:335px; padding:29px; }.menu-list { margin-top:35px; }.about-image { min-height:360px; }.about-content { padding-left:8vw; padding-right:8vw; }.access-grid { gap:30px; }.map-placeholder { min-height:275px; }.site-footer { align-items:flex-start; flex-direction:column; gap:23px; padding:35px 8vw; } }