:root{--canvas:#f3efe7;--paper:#faf7f0;--ink:#28221e;--muted:#746a61;--accent:#9a5d49;--line:rgba(40,34,30,.16);--serif:Georgia,"Times New Roman","Yu Mincho",serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);line-height:2;letter-spacing:.035em}body.nav-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}h1,h2,h3,p{margin-top:0}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{color:var(--paper);background:var(--accent)}
.site-header{position:relative;z-index:50;display:flex;align-items:center;justify-content:space-between;height:112px;padding:0 clamp(28px,6vw,96px);background:var(--paper);border-bottom:1px solid var(--line)}.logo{display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:1.05rem;letter-spacing:.18em;line-height:1}.logo-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid currentColor;border-radius:50%;font-size:1.15rem;letter-spacing:0}.logo small{display:block;margin-top:7px;font-family:var(--sans);font-size:.52rem;font-weight:500;letter-spacing:.34em}.global-nav{display:flex;align-items:center;gap:clamp(24px,3.5vw,58px)}.global-nav a{position:relative;padding:43px 0 39px;font-family:var(--serif);font-size:.72rem;letter-spacing:.2em}.global-nav a::after{content:"";position:absolute;right:0;bottom:31px;left:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .3s}.global-nav a:hover::after,.global-nav a.active::after{transform:scaleX(1)}.nav-toggle{display:none;width:44px;height:44px;padding:11px 8px;border:0;background:transparent;cursor:pointer}.nav-toggle span{display:block;width:27px;height:1px;margin:6px auto;background:var(--ink);transition:.25s}
.eyebrow{margin-bottom:22px;color:var(--accent);font-size:.66rem;font-weight:600;letter-spacing:.3em;line-height:1.4}.section{max-width:1240px;margin:0 auto;padding:clamp(110px,13vw,190px) clamp(24px,5vw,72px)}.section h2{margin-bottom:34px;font-family:var(--serif);font-size:clamp(2.7rem,6vw,5.4rem);font-weight:400;letter-spacing:-.025em;line-height:1.02}.text-link{display:inline-flex;align-items:center;gap:18px;margin-top:18px;padding-bottom:5px;border-bottom:1px solid var(--ink);font-family:var(--serif);font-size:.78rem;letter-spacing:.15em;transition:.2s}.text-link:hover{color:var(--accent);border-color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:space-between;min-width:220px;margin-top:34px;padding:17px 22px;color:var(--paper);background:var(--ink);border:1px solid var(--ink);font-size:.68rem;letter-spacing:.18em;transition:.25s}.button:hover{color:var(--ink);background:transparent}
.hero{min-height:calc(100vh - 112px);display:grid;grid-template-columns:1.04fr .96fr;background:var(--canvas)}.hero-content{align-self:center;padding:100px clamp(32px,8vw,140px)}.hero h1{max-width:700px;margin-bottom:38px;font-family:var(--serif);font-size:clamp(4.2rem,9vw,8.4rem);font-weight:400;letter-spacing:-.055em;line-height:.82}.hero h1 span{display:block;margin-top:30px;font-family:var(--sans);font-size:clamp(1.2rem,2.2vw,2rem);font-weight:500;letter-spacing:.08em;line-height:1.6}.hero-content>p:not(.eyebrow){max-width:520px;color:var(--muted);font-size:.9rem}.hero-visual{position:relative;min-height:640px;display:grid;place-items:center;overflow:hidden;color:var(--paper);background:#3a302a}.hero-visual::before{content:"";position:absolute;width:min(42vw,580px);aspect-ratio:1;border:1px solid rgba(250,247,240,.18);border-radius:50%;box-shadow:0 0 0 80px rgba(250,247,240,.025),0 0 0 160px rgba(250,247,240,.018)}.cup{position:relative;z-index:1;display:grid;place-items:center;width:230px;height:230px;border:1px solid rgba(250,247,240,.45);border-radius:50%}.cup span{font-size:0}.cup span::before{content:"K";font-family:var(--serif);font-size:6rem;font-style:italic}.hero-visual p{position:absolute;right:7%;bottom:7%;margin:0;font-family:var(--serif);font-size:.75rem;font-style:italic;letter-spacing:.2em;text-align:right}
.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:12%;align-items:start}.intro>div:last-child{padding-top:64px}.intro>div:last-child p{max-width:560px;color:var(--muted);font-size:.9rem}.featured{max-width:none;background:var(--canvas)}.featured>*{max-width:1100px;margin-right:auto;margin-left:auto}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:65px}.section-heading h2{margin-bottom:0}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.menu-card{padding-bottom:30px;border-bottom:1px solid var(--line)}.menu-art{position:relative;height:380px;display:grid;place-items:center;overflow:hidden;margin-bottom:27px;color:rgba(250,247,240,.86);background:#6a5548;font-family:var(--serif);font-size:0}.menu-art::before{font-size:7rem;font-style:italic}.menu-art::after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(250,247,240,.32);border-radius:50%}.menu-art.latte::before{content:"01"}.menu-art.cake::before{content:"02"}.menu-art.toast::before{content:"03"}.menu-art.cake{background:#7b6252}.menu-art.toast{background:#584a40}.tag{margin-bottom:8px;color:var(--accent);font-size:.61rem;letter-spacing:.28em}.menu-card h3{margin-bottom:11px;font-family:var(--serif);font-size:1.5rem;font-weight:400}.menu-card p:not(.tag){min-height:58px;margin-bottom:18px;color:var(--muted);font-size:.78rem}.menu-card strong{font-family:var(--serif);font-size:.92rem;font-weight:400}.visit-banner{padding:clamp(100px,13vw,175px) 24px;color:var(--paper);background:var(--ink);text-align:center}.visit-banner h2{margin-bottom:10px;font-family:var(--serif);font-size:clamp(3rem,8vw,7rem);font-weight:400;letter-spacing:-.04em;line-height:1}.visit-banner .button{color:var(--ink);background:var(--paper);border-color:var(--paper)}.visit-banner .button:hover{color:var(--paper);background:transparent}
.page-hero{padding:clamp(100px,14vw,190px) 24px clamp(85px,11vw,145px);background:var(--canvas);text-align:center}.page-hero h1{margin-bottom:35px;font-family:var(--serif);font-size:clamp(4.2rem,11vw,9rem);font-weight:400;letter-spacing:-.045em;line-height:.9}.page-hero p:last-child{color:var(--muted);font-size:.85rem}.menu-section{max-width:960px}.filter-buttons{display:flex;justify-content:center;gap:35px;margin-bottom:75px}.filter-buttons button{position:relative;padding:8px 0;color:var(--muted);background:transparent;border:0;font-family:var(--serif);font-size:.7rem;letter-spacing:.16em;cursor:pointer}.filter-buttons button::after{content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--accent);transform:scaleX(0);transition:.2s}.filter-buttons button:hover,.filter-buttons button.active{color:var(--ink)}.filter-buttons button:hover::after,.filter-buttons button.active::after{transform:scaleX(1)}.menu-list{border-top:1px solid var(--line)}.menu-list article{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 4px;border-bottom:1px solid var(--line)}.menu-list article.hidden{display:none}.menu-list article span{color:var(--accent);font-family:var(--serif);font-size:.72rem}.menu-list h2{display:inline;margin:0 0 0 24px;font-family:var(--serif);font-size:1.45rem;font-weight:400}.menu-list p{margin:5px 0 0 51px;color:var(--muted);font-size:.76rem}.menu-list strong{white-space:nowrap;font-family:var(--serif);font-weight:400}.note{margin-top:28px;color:var(--muted);font-size:.68rem}
.story{display:grid;grid-template-columns:.95fr 1.05fr;gap:11%;align-items:center}.story-visual{aspect-ratio:4/5;display:grid;place-items:center;color:var(--paper);background:#4b3e36}.story-visual span{font-family:var(--serif);font-size:12rem;font-style:italic;font-weight:400}.story>div:last-child p:not(.eyebrow){color:var(--muted);font-size:.88rem}.values{background:var(--canvas)}.narrow{max-width:1120px}.values .eyebrow,.values h2{text-align:center}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:70px;margin-top:75px}.value-grid article{padding-top:24px;border-top:1px solid var(--line)}.value-grid span{color:var(--accent);font-family:var(--serif);font-size:.72rem}.value-grid h3{margin:30px 0 15px;font-family:var(--serif);font-size:1.45rem;font-weight:400}.value-grid p{color:var(--muted);font-size:.78rem}.quote{max-width:1000px;text-align:center}.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.45}.quote p{margin-top:34px;color:var(--muted);font-size:.7rem;letter-spacing:.15em}
.access-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:10%;align-items:center}.map-placeholder{position:relative;aspect-ratio:1.2;overflow:hidden;background:#ded7ca}.road{position:absolute;background:var(--paper);border:1px solid rgba(40,34,30,.08)}.road-h{top:43%;right:0;left:0;height:16%}.road-v{top:0;bottom:0;left:29%;width:13%}.station,.park{position:absolute;font-size:.66rem;letter-spacing:.12em}.station{bottom:8%;left:6%;padding:4px 12px;background:var(--paper)}.park{top:12%;right:9%;color:var(--muted)}.map-pin{position:absolute;top:29%;left:49%;display:grid;place-items:center;width:76px;height:76px;color:var(--paper);background:var(--accent);border-radius:50%;font-family:var(--serif);font-size:1.6rem;text-align:center}.map-pin small{display:block;font-family:var(--sans);font-size:5px;letter-spacing:.12em;line-height:1.3}.shop-info h2{font-size:clamp(2.2rem,4vw,3.5rem)}.shop-info dl div{display:grid;grid-template-columns:105px 1fr;padding:22px 0;border-bottom:1px solid var(--line)}dt{font-size:.68rem;font-weight:600;letter-spacing:.12em}dd{margin:0;font-size:.78rem}dd small{color:var(--muted)}.directions{padding-top:30px}.directions>h2,.directions>.eyebrow{text-align:center}.directions ol{max-width:800px;margin:65px auto 0;padding:0;list-style:none}.directions li{display:flex;gap:30px;padding:30px 0;border-bottom:1px solid var(--line)}.directions li>span{flex:0 0 auto;color:var(--accent);font-family:var(--serif);font-size:1.8rem}.directions h3{margin:0 0 4px;font-family:var(--serif);font-size:1.25rem;font-weight:400}.directions p{margin:0;color:var(--muted);font-size:.76rem}
.site-footer{padding:95px clamp(28px,7vw,110px) 28px;color:var(--paper);background:var(--ink)}.footer-main{display:grid;grid-template-columns:1.15fr .85fr .7fr;gap:60px;align-items:start}.footer-brand .logo{margin-bottom:25px}.footer-brand .logo-mark{border-color:rgba(250,247,240,.55)}.footer-tagline{max-width:320px;margin:0;color:rgba(250,247,240,.65);font-family:var(--serif);font-size:1.25rem;line-height:1.55}.footer-block h2{margin-bottom:18px;color:var(--accent);font-family:var(--sans);font-size:.6rem;letter-spacing:.26em}.footer-block p,.footer-block a{color:rgba(250,247,240,.68);font-size:.72rem}.social-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.social-links a{border-bottom:1px solid transparent}.social-links a:hover{color:var(--paper);border-color:var(--paper)}.copyright{margin:75px 0 0;padding-top:24px;border-top:1px solid rgba(250,247,240,.15);color:rgba(250,247,240,.4);font-family:var(--serif);font-size:.58rem;letter-spacing:.18em}
@media(max-width:820px){.site-header{height:80px;padding:0 22px}.logo{font-size:.86rem}.logo-mark{width:40px;height:40px}.nav-toggle{display:block}.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.global-nav{position:fixed;top:80px;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:45px 30px;visibility:hidden;opacity:0;background:var(--paper);transform:translateY(-12px);transition:.25s}.global-nav.open{visibility:visible;opacity:1;transform:none}.global-nav a{width:100%;padding:19px 0;border-bottom:1px solid var(--line);font-size:1rem}.global-nav a::after{display:none}.hero{min-height:0;grid-template-columns:1fr}.hero-content{padding:85px 27px 95px}.hero h1{font-size:clamp(4rem,20vw,6rem)}.hero-visual{min-height:530px}.cup{width:190px;height:190px}.section{padding:100px 25px}.intro,.story,.access-layout{grid-template-columns:1fr;gap:65px}.intro>div:last-child{padding-top:0}.section-heading{align-items:flex-start}.section-heading .text-link{white-space:nowrap}.card-grid,.value-grid{grid-template-columns:1fr}.card-grid{gap:60px}.menu-art{height:420px}.value-grid{gap:38px}.filter-buttons{justify-content:flex-start;gap:28px;overflow-x:auto}.filter-buttons button{white-space:nowrap}.menu-list article span{display:none}.menu-list h2{margin-left:0;font-size:1.1rem}.menu-list p{margin-left:0}.story-visual{aspect-ratio:4/3}.story-visual span{font-size:9rem}.footer-main{grid-template-columns:1fr;gap:48px}.copyright{margin-top:55px}}
@media(max-width:480px){.section-heading{display:block}.section-heading .text-link{margin-top:25px}.menu-art{height:330px}.filter-buttons{gap:22px}.shop-info dl div{grid-template-columns:86px 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}

/* Home hero — generated project image */
.home .site-header{position:absolute;top:0;right:0;left:0;color:var(--paper);background:linear-gradient(to bottom,rgba(20,16,13,.5),transparent);border-bottom-color:rgba(250,247,240,.22)}
.home .nav-toggle span{background:var(--paper)}
.home .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:var(--paper);background-image:linear-gradient(90deg,rgba(26,20,16,.78) 0%,rgba(26,20,16,.54) 38%,rgba(26,20,16,.06) 76%),linear-gradient(0deg,rgba(20,15,12,.38),transparent 42%),url("images/cafe-hero.png");background-position:center;background-size:cover}
.home .hero-content{position:relative;z-index:1;width:min(900px,72vw);padding:180px clamp(28px,8vw,140px) 100px}
.home .hero .eyebrow{color:#d3a18e}
.home .hero h1{margin-bottom:42px;font-size:clamp(5rem,11vw,10.5rem);text-shadow:0 2px 28px rgba(0,0,0,.18)}
.home .hero h1 span{color:rgba(250,247,240,.9);font-size:clamp(1rem,1.65vw,1.45rem)}
.home .hero-content>p:not(.eyebrow){color:rgba(250,247,240,.78)}
.home .hero .button{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.home .hero .button:hover{color:var(--paper);background:transparent}
.hero-caption{position:absolute;right:clamp(25px,5vw,75px);bottom:48px;margin:0;font-family:var(--serif);font-size:.58rem;letter-spacing:.2em;line-height:1.8;text-align:right}
.scroll-cue{position:absolute;bottom:70px;left:30px;font-family:var(--serif);font-size:.52rem;letter-spacing:.22em;transform:rotate(-90deg)}
.scroll-cue::after{content:"";position:absolute;top:50%;left:calc(100% + 14px);width:52px;height:1px;background:currentColor}
@media(max-width:820px){.home .site-header{position:absolute}.home .global-nav{color:var(--ink)}.home .hero{min-height:780px;background-image:linear-gradient(90deg,rgba(26,20,16,.72),rgba(26,20,16,.16)),linear-gradient(0deg,rgba(20,15,12,.5),transparent 52%),url("images/cafe-hero.png");background-position:58% center}.home .hero-content{width:100%;padding:150px 27px 110px}.home .hero h1{font-size:clamp(4.8rem,22vw,7rem)}.hero-caption{right:22px;bottom:28px}.scroll-cue{display:none}}

/* Responsive editorial photography */
.intro{grid-template-columns:.78fr 1.22fr;align-items:center}.intro-copy{padding-right:5%}.intro-copy p:not(.eyebrow){max-width:520px;color:var(--muted);font-size:.9rem}.intro-image{min-width:0;margin:0}.intro-image picture,.intro-image img{display:block;width:100%}.intro-image img{height:auto;aspect-ratio:3/2;object-fit:contain}.intro-image figcaption{margin-top:12px;color:var(--muted);font-family:var(--serif);font-size:.6rem;font-style:italic;letter-spacing:.18em;text-align:right}
.menu-card .menu-art{display:block;width:100%;height:auto;aspect-ratio:1;margin-bottom:27px;background:var(--canvas)}.menu-card .menu-art::before,.menu-card .menu-art::after{content:none}.menu-card .menu-art img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:820px){.intro{grid-template-columns:1fr}.intro-copy{padding-right:0}.intro-image{margin-top:8px}.menu-card .menu-art{height:auto}}

/* Menu page */
.menu-group{margin-top:110px}.menu-group:first-of-type{margin-top:0}.menu-group.hidden{display:none}.menu-group-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.menu-group-heading .eyebrow{margin-bottom:8px}.menu-group-heading h2{margin:0;font-size:clamp(3.4rem,7vw,5.8rem)}.menu-group .menu-list h3{margin:0;font-family:var(--serif);font-size:1.45rem;font-weight:400}.menu-group .menu-list p{margin:5px 0 0;color:var(--muted);font-size:.76rem}

/* About page facts */
.shop-details{display:grid;grid-template-columns:.78fr 1.22fr;gap:10%;align-items:start}.details-heading>p:not(.eyebrow){max-width:390px;color:var(--muted);font-size:.82rem}.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.facts-grid>div{min-height:245px;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.facts-grid dt{color:var(--accent);font-size:.61rem;letter-spacing:.25em}.facts-grid dd{display:flex;flex-direction:column;justify-content:space-between;height:150px;margin-top:20px}.facts-grid strong{font-family:var(--serif);font-size:clamp(2.5rem,5vw,4.2rem);font-weight:400;letter-spacing:-.04em;line-height:1}.facts-grid span{color:var(--muted);font-size:.72rem;line-height:1.8}

/* Live OpenStreetMap */
.osm-map{min-width:0}.osm-map iframe{display:block;width:100%;height:clamp(460px,56vw,670px);border:0;background:#ded7ca;filter:saturate(.45) sepia(.08)}.osm-map>a{display:inline-block;margin-top:15px;padding-bottom:3px;border-bottom:1px solid var(--ink);font-family:var(--serif);font-size:.62rem;letter-spacing:.17em}.osm-map>a:hover{color:var(--accent);border-color:var(--accent)}.fiction-note{max-width:1100px;margin:0 auto clamp(60px,8vw,100px);padding:28px clamp(24px,4vw,48px);border:1px solid var(--line);background:var(--canvas)}.fiction-note .eyebrow{margin-bottom:10px}.fiction-note p:last-child{margin:0;color:var(--muted);font-size:.72rem;line-height:1.9}

@media(max-width:820px){.menu-group{margin-top:80px}.menu-group-heading h2{font-size:3.5rem}.shop-details{grid-template-columns:1fr;gap:60px}.facts-grid>div{min-height:210px;padding:24px}.facts-grid dd{height:125px}.osm-map iframe{height:460px}.fiction-note{margin-right:24px;margin-left:24px}}
@media(max-width:480px){.facts-grid{grid-template-columns:1fr}.facts-grid>div{min-height:190px}.osm-map iframe{height:390px}}

/* Progressive motion: content remains visible when JavaScript is unavailable */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease var(--reveal-delay,0ms),transform .8s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms)}.js .reveal.is-visible{opacity:1;transform:none}
.back-to-top{position:fixed;right:clamp(18px,3vw,42px);bottom:clamp(18px,3vw,38px);z-index:45;display:grid;place-items:center;width:58px;height:58px;padding:7px;color:var(--paper);background:var(--ink);border:1px solid rgba(250,247,240,.28);border-radius:50%;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s,background .25s;cursor:pointer;box-shadow:0 10px 30px rgba(40,34,30,.16)}.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}.back-to-top span{font-family:var(--serif);font-size:1rem;line-height:1}.back-to-top small{font-family:var(--serif);font-size:.45rem;letter-spacing:.16em}
@media(hover:hover){.button:hover{transform:translateY(-3px)}.text-link:hover{transform:translateX(4px)}.menu-card,.value-grid article,.facts-grid>div,.menu-list article{transition:transform .35s ease,background-color .35s ease,box-shadow .35s ease}.menu-card:hover{transform:translateY(-8px)}.menu-card .menu-art img{transition:transform .65s cubic-bezier(.2,.65,.25,1)}.menu-card:hover .menu-art img{transform:scale(1.035)}.value-grid article:hover{transform:translateY(-6px)}.facts-grid>div:hover,.menu-list article:hover{background:rgba(154,93,73,.055)}.menu-list article:hover{transform:translateX(7px)}.back-to-top:hover{background:var(--accent);transform:translateY(-3px)}}
@media(max-width:820px){.back-to-top{width:52px;height:52px;right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.back-to-top,.button,.text-link,.menu-card,.menu-card .menu-art img,.value-grid article,.facts-grid>div,.menu-list article{transition:none!important}}