@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap');

:root { --canvas:#f5f1e9; --surface:#fbf9f4; --ink:#29231e; --muted:#706861; --accent:#a5634d; --line:#d9d0c4; --dark:#30271f; --serif:'Playfair Display','Times New Roman','Hiragino Mincho ProN',serif; --sans:'DM Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font:400 16px/2 var(--sans); letter-spacing:.025em; }
a { color:inherit; text-decoration:none; }

.site-header { position:relative; display:flex; align-items:center; justify-content:space-between; width:min(100%,1280px); min-height:100px; margin:auto; padding:25px 56px; }
.brand { font:500 1.3rem/1.15 var(--serif); letter-spacing:.04em; }
.brand small { display:block; margin-top:8px; font:500 .59rem/1 var(--sans); letter-spacing:.2em; }
.nav { display:flex; align-items:center; gap:clamp(19px,2.8vw,42px); font-size:.68rem; font-weight:600; letter-spacing:.15em; }
.nav a { position:relative; padding:10px 0; white-space:nowrap; }
.nav a::after { position:absolute; right:0; bottom:4px; left:0; height:1px; background:var(--accent); content:''; transform:scaleX(0); transform-origin:right; transition:transform .3s ease; }
.nav a:hover::after,.nav a[aria-current='page']::after { transform:scaleX(1); transform-origin:left; }
.menu-toggle { display:none; width:38px; height:38px; padding:0; border:0; background:transparent; color:var(--ink); font-size:1.45rem; cursor:pointer; }

.hero { position:relative; display:grid; min-height:min(720px,calc(100vh - 100px)); place-items:center; overflow:hidden; padding:95px 40px; background:linear-gradient(90deg,rgba(38,29,23,.72),rgba(38,29,23,.24)),url('images/cafe-hero.png') center/cover; color:#fffdf9; }
.hero::after { position:absolute; right:38px; bottom:30px; width:1px; height:74px; background:rgba(255,255,255,.66); content:''; }
.hero-content { position:relative; z-index:1; width:min(100%,1010px); text-align:left; }
.eyebrow,.section-label { display:inline-block; color:var(--accent); font-size:.66rem; font-weight:600; letter-spacing:.23em; line-height:1.4; text-transform:uppercase; }
.hero .eyebrow { color:#f4dfd4; }
.hero h1,.page-hero h1 { margin:22px 0 24px; font:400 clamp(3.5rem,8.1vw,7.4rem)/.98 var(--serif); letter-spacing:-.03em; }
.hero p { max-width:465px; margin:0; font-size:.95rem; line-height:2; }
.button { display:inline-flex; align-items:center; gap:17px; margin-top:39px; padding-bottom:7px; border-bottom:1px solid currentColor; font-size:.69rem; font-weight:600; letter-spacing:.15em; line-height:1.2; text-transform:uppercase; transition:color .25s ease,gap .25s ease; }
.button::after { content:'→'; font-size:1rem; font-weight:400; }
.button:hover { gap:24px; color:var(--accent); }
.hero .button:hover { color:#fff; }
.button:focus-visible,.filter-button:focus-visible,.back-to-top:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.section { width:min(100%,1280px); margin:auto; padding:152px 56px; }
h2 { margin:18px 0 31px; font:400 clamp(2.65rem,5vw,5rem)/1.12 var(--serif); letter-spacing:-.03em; }
.lead { max-width:500px; margin:0; color:var(--muted); font-size:.97rem; line-height:2.2; }
.intro { display:grid; grid-template-columns:.91fr 1.09fr; align-items:center; gap:clamp(55px,9vw,145px); }
.photo { display:block; width:100%; min-height:575px; object-fit:cover; object-position:center; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:67px; border-top:1px solid var(--line); }
.feature { min-height:250px; padding:32px 30px 30px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature + .feature { padding-left:30px; }.feature:last-child { border-right:0; }
.feature h3 { margin:0 0 18px; font:400 1.4rem var(--serif); letter-spacing:-.015em; }
.feature p { max-width:260px; margin:0; color:var(--muted); font-size:.85rem; line-height:2; }

.favorites { padding-top:36px; }
.menu-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:65px; }
.menu-card { overflow:hidden; background:var(--surface); }
.menu-card { transition:transform .35s ease,box-shadow .35s ease; }
.menu-card:hover { box-shadow:0 18px 35px rgba(46,35,27,.12); transform:translateY(-7px); }
.menu-card-image { display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center; }
.menu-card:hover .menu-card-image { transform:scale(1.035); }
.menu-card-image { transition:transform .6s ease; }
.menu-card-body { padding:27px 27px 29px; }
.menu-card-body h3 { margin:0 0 8px; font:400 1.35rem var(--serif); letter-spacing:-.02em; }
.menu-card-body p { min-height:50px; margin:0; color:var(--muted); font-size:.8rem; line-height:1.8; }
.menu-card-body span { display:block; margin-top:22px; color:var(--accent); font:400 1rem var(--serif); }
.dark-button { color:var(--ink); }
.visit-section { margin-top:18px; padding:130px 56px; background:var(--dark); color:#f7f2ea; }
.visit-inner { width:min(100%,1168px); margin:auto; }
.visit-section .section-label { color:#cb9b83; }
.visit-section h2 { max-width:650px; margin-top:18px; font-size:clamp(2.8rem,5.4vw,5.2rem); }
.visit-section p { max-width:430px; margin:0; color:#ddd4ca; font-size:.9rem; line-height:2.1; }

.page-hero { padding:142px 40px 131px; background:#ebe4d9; text-align:center; }
.page-hero h1 { margin-bottom:0; font-size:clamp(3.5rem,7vw,6.1rem); }
.page-hero p { max-width:530px; margin:27px auto 0; color:var(--muted); font-size:.91rem; }
.menu-list { margin-top:0; border-top:1px solid var(--line); }
.menu-row { display:grid; grid-template-columns:148px 1fr auto; column-gap:30px; padding:33px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.menu-row .category { color:var(--accent); font-size:.62rem; font-weight:600; letter-spacing:.18em; }
.menu-row h3 { margin:0; font:400 1.48rem var(--serif); letter-spacing:-.01em; }
.menu-row p { grid-column:2; margin:6px 0 0; color:var(--muted); font-size:.84rem; line-height:1.8; }
.menu-row .price { grid-column:3; grid-row:1 / 3; font:400 1.1rem var(--serif); }
.note { margin-top:29px; color:var(--muted); font-size:.76rem; }

.menu-section { max-width:1180px; }
.menu-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.menu-heading p { max-width:315px; margin:0 0 31px; color:var(--muted); font-size:.85rem; }
.filter-controls { display:flex; flex-wrap:wrap; gap:10px; margin:68px 0 27px; }
.filter-button { padding:10px 16px; border:1px solid var(--line); background:transparent; color:var(--ink); font:600 .65rem/1 var(--sans); letter-spacing:.13em; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.filter-button:hover,.filter-button.is-active { border-color:var(--accent); background:var(--accent); color:#fff; }
.product-list { border-top:1px solid var(--line); }
.product-item { display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:baseline; padding:31px 0; border-bottom:1px solid var(--line); }
.product-item.is-hidden { display:none; }
.product-category { margin:0; color:var(--accent); font-size:.63rem; font-weight:600; letter-spacing:.18em; }
.product-item h3 { margin:0; font:400 1.48rem var(--serif); letter-spacing:-.01em; }
.product-item div p { margin:6px 0 0; color:var(--muted); font-size:.83rem; line-height:1.8; }
.price { font:400 1.1rem var(--serif); }

.concept-section { display:grid; grid-template-columns:1fr .8fr; gap:clamp(60px,13vw,185px); align-items:center; max-width:1100px; }
.concept-copy { max-width:560px; }
.concept-copy p { color:var(--muted); font-size:.95rem; line-height:2.3; }
.concept-quote { margin:0; padding:44px 0; border-top:1px solid var(--accent); border-bottom:1px solid var(--accent); font:400 clamp(2rem,4vw,3.5rem)/1.28 var(--serif); letter-spacing:-.03em; }
.details-section { max-width:1100px; padding-top:16px; }
.cafe-details { max-width:950px; margin:58px 0 0; border-top:1px solid var(--line); }
.cafe-details div { display:grid; grid-template-columns:190px 1fr; padding:22px 0; border-bottom:1px solid var(--line); }
.cafe-details dt { color:var(--accent); font-size:.65rem; font-weight:600; letter-spacing:.17em; }
.cafe-details dd { margin:0; font-size:.88rem; }
.fiction-note { margin:25px 0 0; color:var(--muted); font-size:.76rem; }

.access-layout { display:grid; grid-template-columns:.79fr 1.21fr; gap:clamp(55px,10vw,145px); align-items:start; }
.map-wrap { overflow:hidden; background:#e6dfd3; }
.map-wrap iframe { display:block; width:100%; height:560px; border:0; }
.map-wrap p { margin:0; padding:10px 15px; color:var(--muted); font-size:.72rem; }

.back-to-top { position:fixed; z-index:10; right:27px; bottom:27px; display:grid; width:54px; height:54px; place-items:center; border:1px solid rgba(247,242,234,.65); border-radius:50%; background:var(--dark); color:#fff; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .25s ease,transform .25s ease,background .25s ease; }
.back-to-top span { margin-bottom:-8px; font-size:1.05rem; line-height:1; }.back-to-top small { font-size:.52rem; font-weight:600; letter-spacing:.13em; }.back-to-top:hover { background:var(--accent); transform:translateY(-3px); }.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
body.has-motion .reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.3,1); }
body.has-motion .reveal.is-revealed { opacity:1; transform:translateY(0); }
body.has-motion .menu-card:nth-child(2) { transition-delay:.1s; } body.has-motion .menu-card:nth-child(3) { transition-delay:.2s; }
body.has-motion .menu-card.reveal.is-revealed:hover { box-shadow:0 18px 35px rgba(46,35,27,.12); transform:translateY(-7px); }

.story { max-width:860px; padding-right:56px; padding-left:56px; font-size:1rem; line-height:2.35; }
.story p { margin:0 0 1.8em; }
.quote { margin:84px 0; padding:52px 0; border-top:1px solid var(--accent); border-bottom:1px solid var(--accent); font:400 clamp(1.7rem,3.2vw,2.65rem)/1.5 var(--serif); letter-spacing:-.02em; text-align:center; }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:82px; }
.values div { padding-top:22px; border-top:1px solid var(--line); }
.values h3 { margin:0 0 12px; font:400 1.32rem var(--serif); }.values p { margin:0; color:var(--muted); font-size:.84rem; line-height:2; }
.access-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(55px,9vw,140px); }
.map-placeholder { position:relative; display:grid; min-height:540px; place-items:center; overflow:hidden; background:linear-gradient(130deg,#ded6c7 0 22%,#aaa890 22% 25%,#eee8de 25% 48%,#a49d87 48% 51%,#d9c5ad 51% 70%,#b6b5a0 70% 73%,#e6dfd1 73%); color:var(--ink); text-align:center; }
.map-placeholder::before { position:absolute; inset:16px; border:1px solid rgba(41,35,30,.27); content:''; }
.map-placeholder span { position:relative; padding:20px 32px; background:rgba(251,249,244,.91); font:400 1.35rem/1.4 var(--serif); letter-spacing:.08em; }
.map-placeholder small { font:600 .63rem var(--sans); letter-spacing:.12em; }
.access-details { margin:38px 0 0; border-top:1px solid var(--line); }.access-details div { display:grid; grid-template-columns:110px 1fr; padding:20px 0; border-bottom:1px solid var(--line); font-size:.86rem; line-height:1.85; }
.access-details dt { color:var(--accent); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }.access-details dd { margin:0; }

.site-footer { background:var(--dark); color:#f7f2ea; }.footer-inner { display:grid; width:min(100%,1280px); grid-template-columns:1.15fr .85fr .7fr; gap:38px; margin:auto; padding:76px 56px 45px; }
.footer-tagline { max-width:255px; margin:21px 0 0; color:#d4c9bb; font:400 1.05rem/1.6 var(--serif); }.footer-title { margin:0 0 15px; color:#c99a80; font-size:.63rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; }
.footer-text,.social-links { margin:0; color:#ded6cc; font-size:.76rem; line-height:2; }.social-links { display:flex; gap:18px; letter-spacing:.12em; }.social-links a { border-bottom:1px solid transparent; transition:border-color .2s; }.social-links a:hover { border-color:#c99a80; }
.copyright { display:block; width:min(100%,1280px); margin:auto; padding:0 56px 27px; color:#a89c90; font-size:.61rem; letter-spacing:.12em; }

@media (max-width:760px) {
 .site-header { min-height:77px; padding:17px 24px; }.menu-toggle { display:block; }.nav { position:absolute; z-index:5; top:77px; right:0; left:0; display:none; padding:22px 24px 28px; background:var(--surface); box-shadow:0 15px 28px rgba(41,35,30,.1); }.nav.is-open { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }.nav a { width:100%; padding:11px 0; }
 .hero { min-height:630px; padding:70px 25px; }.hero::after { right:25px; bottom:18px; height:48px; }.hero h1 { font-size:clamp(3.35rem,16vw,5.1rem); }.hero p { font-size:.87rem; }.section { padding:100px 24px; }.intro,.access-grid { grid-template-columns:1fr; gap:53px; }.photo { min-height:0; aspect-ratio:3 / 2; }
 .feature-grid,.values,.menu-cards { grid-template-columns:1fr; margin-top:48px; }.feature,.feature + .feature { min-height:auto; padding:28px 0; border-right:0; }.menu-card { display:grid; grid-template-columns:42% 58%; }.menu-card-image { min-height:0; height:100%; aspect-ratio:auto; }.menu-card-body { padding:23px; }.menu-card-body p { min-height:auto; }.favorites { padding-top:0; }.visit-section { margin-top:0; padding:92px 24px; }.page-hero { padding:100px 24px 90px; }.page-hero h1 { font-size:clamp(3.25rem,15vw,5.2rem); }.menu-row { grid-template-columns:1fr auto; gap:4px 16px; padding:26px 0; }.menu-row .category { grid-column:1; }.menu-row h3 { font-size:1.29rem; }.menu-row p { grid-column:1; }.menu-row .price { grid-column:2; grid-row:1 / 4; }.story { padding-right:24px; padding-left:24px; }.quote { margin:60px 0; padding:37px 0; }.map-placeholder { min-height:400px; }.access-details div { grid-template-columns:87px 1fr; }.footer-inner { grid-template-columns:1fr; gap:32px; padding:60px 24px 35px; }.copyright { padding:0 24px 23px; }
 .menu-heading { display:block; }.menu-heading p { margin-top:-10px; margin-bottom:0; }.filter-controls { margin-top:45px; }.product-item { grid-template-columns:1fr auto; gap:5px 16px; padding:26px 0; }.product-category { grid-column:1; }.product-item div p { margin-top:4px; }.price { grid-column:2; grid-row:1 / 3; }.concept-section,.access-layout { grid-template-columns:1fr; gap:55px; }.concept-quote { max-width:420px; }.cafe-details { margin-top:42px; }.cafe-details div { grid-template-columns:105px 1fr; gap:13px; }.map-wrap iframe { height:420px; }
 .back-to-top { right:17px; bottom:17px; width:48px; height:48px; }.menu-card:hover { box-shadow:none; transform:none; }.menu-card:hover .menu-card-image { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}