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

:root { --ink:#25342b; --green:#345441; --cream:#f5f0e6; --paper:#fcfaf5; --sand:#d9cbb7; --orange:#c66a3b; --line:#d8d3c9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans JP','Yu Gothic',sans-serif; line-height:1.9; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Noto Serif JP','Yu Mincho',serif; line-height:1.45; font-weight:600; letter-spacing:.06em; }
h2 { font-size:clamp(1.7rem,4vw,2.65rem); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(252,250,245,.94); border-bottom:1px solid rgba(52,84,65,.12); backdrop-filter:blur(10px); }
.header-inner { max-width:1180px; height:82px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:12px; font-family:'Noto Serif JP',serif; font-weight:600; letter-spacing:.09em; line-height:1.2; }
.logo-mark { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--green); border-radius:50%; font-style:italic; font-size:1.35rem; }
.logo small { display:block; margin-top:4px; font:500 .57rem/1 'Noto Sans JP'; letter-spacing:.16em; }
.global-nav { display:flex; gap:34px; font-size:.88rem; }
.global-nav a { position:relative; padding:27px 0; }
.global-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:20px; height:1px; background:var(--orange); transition:.25s; }
.global-nav a:hover::after,.global-nav a.active::after { right:0; }
.menu-button { display:none; background:none; border:0; padding:8px; }
.menu-button > span:not(.sr-only) { display:block; width:25px; height:1px; margin:6px; background:var(--ink); transition:.25s; }
.hero { min-height:680px; max-width:1440px; margin:auto; padding:75px max(7vw,35px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5vw; background:linear-gradient(110deg,var(--cream) 0 61%,#e5ddce 61%); }
.eyebrow { margin-bottom:14px; color:var(--orange); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.hero h1 { margin-bottom:28px; font-size:clamp(2.45rem,5vw,4.65rem); }
.hero-copy > p:not(.eyebrow) { margin-bottom:32px; }
.button { display:inline-flex; justify-content:space-between; align-items:center; gap:32px; min-width:205px; padding:14px 19px; color:#fff; background:var(--green); font-size:.86rem; transition:.2s; }
.button:hover { background:#223d2d; transform:translateY(-2px); }
.hero-visual { position:relative; height:480px; overflow:hidden; background:#d8a26f; border-radius:50% 50% 5px 5px; }
.sun { position:absolute; width:230px; height:230px; right:-30px; top:-40px; border-radius:50%; background:#f2c58e; }
.cup { position:absolute; width:250px; height:155px; left:50%; bottom:105px; transform:translateX(-50%); background:#f2eee3; border-radius:8px 8px 90px 90px; box-shadow:0 25px 30px rgba(63,49,36,.18); z-index:2; }
.coffee { position:absolute; left:10px; right:10px; top:-9px; height:29px; border-radius:50%; background:#493026; border:8px solid #f2eee3; }
.handle { position:absolute; right:-67px; top:25px; width:82px; height:80px; border:18px solid #f2eee3; border-radius:50%; }
.saucer { position:absolute; width:350px; height:55px; border-radius:50%; background:#eee6d7; left:50%; bottom:80px; transform:translateX(-50%); }
.steam { position:absolute; bottom:280px; width:55px; height:130px; border-left:3px solid rgba(255,255,255,.75); border-radius:50%; z-index:3; }
.steam-one { left:45%; transform:rotate(-8deg); }.steam-two { left:57%; height:105px; transform:rotate(12deg); }
.section { max-width:1180px; margin:auto; padding:110px 28px; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center; }
.intro h2 { margin-bottom:0; }.intro-text p { margin-bottom:25px; }
.text-link { display:inline-flex; gap:28px; padding-bottom:5px; border-bottom:1px solid var(--ink); font-size:.86rem; }
.text-link span { color:var(--orange); }
.featured { padding-top:75px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:45px; }
.section-heading h2 { margin-bottom:0; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.menu-card { background:#fff; border:1px solid #e6e0d5; }
.card-art { height:260px; display:grid; place-items:center; overflow:hidden; }
.art-coffee { color:#f6efe3; background:#617963; }.art-coffee span { display:grid; place-items:center; width:130px; height:160px; border-radius:5px 5px 45% 45%; border:1px solid; text-align:center; letter-spacing:.12em; }
.art-cake { background:#e2c3a6; }.cake-shape { width:165px; height:100px; background:#f7e9c4; transform:skew(-7deg); border-radius:5px 5px 12px 12px; border-top:18px solid #d26d61; box-shadow:0 20px 20px rgba(74,44,34,.13); }
.art-toast { background:#c98b5f; }.toast-shape { width:165px; height:140px; border:10px solid #a95f36; border-radius:50px 50px 15px 15px; background:#e9bd7d; box-shadow:0 20px 20px rgba(74,44,34,.15); }
.card-body { padding:25px 27px 28px; }.card-kind { margin-bottom:4px; color:var(--orange); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; }.card-body h3 { margin-bottom:7px; font-family:'Noto Serif JP'; font-size:1.15rem; }.card-body p { font-size:.82rem; }.card-body strong { font-size:.88rem; }
.visit-banner { max-width:1380px; margin:0 auto 70px; padding:75px max(7vw,35px); display:flex; align-items:end; justify-content:space-between; color:white; background:var(--green); }.visit-banner h2 { margin-bottom:15px; }.visit-banner p { margin-bottom:0; }.button-light { color:var(--ink); background:var(--paper); }.button-light:hover { color:white; background:var(--orange); }
.site-footer { max-width:1180px; margin:auto; padding:55px 28px 32px; display:grid; grid-template-columns:1fr auto; gap:25px; border-top:1px solid var(--line); font-size:.8rem; }.footer-logo { margin-bottom:15px; }.site-footer > small { grid-column:1/-1; color:#7a817c; }.footer-links { display:flex; gap:30px; align-items:center; }
.page-hero { padding:110px 28px 95px; text-align:center; background:var(--cream); }.page-hero h1 { margin-bottom:12px; font-size:clamp(2.5rem,6vw,4.2rem); }.page-hero p:last-child { margin-bottom:0; }
.menu-sections { max-width:1050px; }.menu-category { display:grid; grid-template-columns:260px 1fr; gap:60px; padding:55px 0; border-top:1px solid var(--line); }.category-heading { display:flex; gap:22px; }.category-heading > span { color:var(--orange); font:500 .7rem serif; }.category-heading h2 { margin:0; font-size:1.8rem; }.menu-list > div { position:relative; padding:0 80px 22px 0; margin-bottom:22px; border-bottom:1px dotted #bbb4a8; }.menu-list h3 { margin-bottom:2px; font:600 1.05rem 'Noto Serif JP'; }.menu-list p { margin-bottom:0; color:#697069; font-size:.8rem; }.menu-list strong { position:absolute; right:0; top:4px; font-size:.85rem; }.menu-note { color:#707770; font-size:.75rem; text-align:right; }
.story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:9%; }.story-art { min-height:480px; display:grid; place-items:center; background:#b9c2ad; }.window { position:relative; width:58%; height:75%; border:12px solid #f3ebdd; background:linear-gradient(90deg,transparent 48%,#f3ebdd 48% 52%,transparent 52%),linear-gradient(transparent 48%,#f3ebdd 48% 52%,transparent 52%),#91adba; box-shadow:25px 24px 0 rgba(52,84,65,.18); }.plant { position:absolute; bottom:-20px; left:-55px; color:var(--green); font:9rem/1 serif; transform:rotate(25deg); }.story-copy p:not(.eyebrow) { margin-bottom:20px; }.values-section { background:var(--cream); }.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }.values-grid article { padding:35px 28px; background:var(--paper); border-top:3px solid var(--green); }.values-grid span { color:var(--orange); font-size:.7rem; }.values-grid h3 { margin:18px 0 12px; font:600 1.15rem 'Noto Serif JP'; }.values-grid p { margin:0; font-size:.85rem; }.quote { text-align:center; }.quote p { margin-bottom:10px; font:500 clamp(1.4rem,4vw,2.3rem) 'Noto Serif JP'; }.quote span { font-size:.85rem; }
.access-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:8%; align-items:center; }.map-placeholder { position:relative; min-height:490px; overflow:hidden; background:#e3ddcf; }.road { position:absolute; background:#f8f4eb; }.road-h { left:0; right:0; top:44%; height:65px; transform:rotate(-5deg); }.road-v { top:0; bottom:0; left:45%; width:55px; transform:rotate(12deg); }.map-river { position:absolute; width:130%; height:80px; left:-15%; bottom:25px; background:#a9c5c6; transform:rotate(6deg); }.station { position:absolute; top:25%; left:12%; font-size:.75rem; }.map-pin { position:absolute; display:grid; place-items:center; top:45%; left:56%; width:58px; height:58px; color:white; background:var(--orange); border-radius:50% 50% 50% 0; transform:rotate(-45deg); font:600 1.4rem serif; }.map-pin small { position:absolute; width:110px; top:65px; left:21px; color:var(--ink); font:600 .65rem 'Noto Sans JP'; transform:rotate(45deg); }.access-info h2 { margin-bottom:35px; }.access-info dl div { display:grid; grid-template-columns:100px 1fr; padding:17px 0; border-top:1px solid var(--line); }.access-info dt { font-size:.76rem; font-weight:600; }.access-info dd { margin:0; font-size:.85rem; }.access-info dd small { color:#6d746f; }.access-info dd a { border-bottom:1px solid; }.access-notes { padding-top:0; display:grid; grid-template-columns:1fr 1fr; gap:25px; }.access-notes div { padding:30px; background:var(--cream); }.access-notes h3 { font:600 1.05rem 'Noto Serif JP'; }.access-notes p { margin:0; font-size:.83rem; }
@media (max-width:760px) {
  .header-inner { height:70px; padding:0 20px; }.menu-button { display:block; z-index:2; }.global-nav { position:absolute; inset:70px 0 auto; display:none; padding:20px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:0; }.global-nav.open { display:flex; }.global-nav a { padding:13px 8px; }.global-nav a::after { bottom:8px; }.menu-button.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.menu-button.open span:nth-child(2) { opacity:0; }.menu-button.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .hero { min-height:auto; padding:60px 25px 35px; grid-template-columns:1fr; background:var(--cream); }.hero h1 { font-size:2.65rem; }.hero-visual { height:390px; }.section { padding:75px 22px; }.intro,.story,.access-layout { grid-template-columns:1fr; gap:45px; }.card-grid,.values-grid { grid-template-columns:1fr; }.desktop-link { display:none; }.visit-banner { margin-bottom:30px; padding:55px 25px; align-items:start; flex-direction:column; gap:30px; }.site-footer { margin:0 20px; padding-left:0; padding-right:0; grid-template-columns:1fr; }.site-footer > small { grid-column:auto; }.footer-links { flex-wrap:wrap; }.page-hero { padding:75px 22px 65px; }.menu-category { grid-template-columns:1fr; gap:25px; padding:42px 0; }.story-art { min-height:380px; }.story-copy { order:-1; }.access-notes { grid-template-columns:1fr; }.map-placeholder { min-height:380px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* 2026 refined visual system */
:root { --ink:#2b2420; --green:#2b2420; --cream:#f1ebe1; --paper:#f8f4ec; --sand:#d7c8b7; --orange:#a65f45; --line:#d8cfc2; }
body { letter-spacing:.025em; }
.header-inner { max-width:1320px; height:94px; padding:0 42px; }
.logo { font-size:1.15rem; letter-spacing:.16em; }
.global-nav { gap:42px; font-size:.68rem; font-weight:600; letter-spacing:.15em; }
.eyebrow { margin-bottom:22px; font-size:.65rem; letter-spacing:.3em; }
.hero { min-height:calc(100vh - 94px); max-width:none; padding:90px max(7vw,35px) 110px; grid-template-columns:.78fr 1.22fr; gap:6vw; background:var(--paper); }
.hero h1 { margin-bottom:38px; font-size:clamp(4rem,7vw,7.4rem); line-height:.88; letter-spacing:-.035em; }
.hero h1 span,.section h2 span,.visit-banner h2 span,.page-hero h1 span { display:block; margin-top:28px; font:500 .88rem/1.8 'Noto Sans JP',sans-serif; letter-spacing:.12em; }
.hero-visual { height:min(72vh,720px); border-radius:0; background:#ded4c7; }
.hero-visual img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.65) contrast(.96); }
.intro-image { grid-column:1/-1; margin:65px 0 0; aspect-ratio:3/2; overflow:hidden; }
.intro-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.72) contrast(.96); }
.section { max-width:1240px; padding:150px 42px; }
.intro h2,.section-heading h2 { font-size:clamp(3.3rem,6vw,6rem); line-height:.95; letter-spacing:-.025em; }
.intro-text p { margin-bottom:35px; }
.featured { padding-top:110px; }
.menu-card { background:transparent; border:0; }
.card-body { padding:25px 0 28px; }
.card-art { height:auto; aspect-ratio:1/1; }
.card-art img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:var(--cream); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.menu-card:hover .card-art img { transform:scale(1.025); }
.art-coffee { background:#6d655c; }.art-cake { background:#cbb6a4; }.art-toast { background:#ad8068; }
.visit-banner { max-width:calc(100% - 84px); margin:0 auto 110px; padding:100px max(7vw,35px); color:var(--paper); background:var(--ink); }
.visit-banner h2 { margin-bottom:25px; font-size:clamp(3.2rem,6vw,6rem); line-height:.95; letter-spacing:-.025em; }
.site-footer { max-width:1240px; padding:80px 42px 40px; grid-template-columns:2fr 1fr 1fr; gap:55px; }
.footer-logo { margin-bottom:22px; font-size:1.3rem; }
.site-footer > small { grid-column:1/-1; padding-top:45px; border-top:1px solid var(--line); color:#82776f; }
.footer-hours span,.footer-social span { display:block; margin-bottom:18px; color:var(--orange); font-size:.6rem; font-weight:600; letter-spacing:.2em; }
.footer-hours p { margin:0; }.footer-social { display:flex; flex-direction:column; align-items:flex-start; }.footer-social a { margin-bottom:7px; border-bottom:1px solid transparent; }.footer-social a:hover { border-color:var(--orange); }
.page-hero { padding:150px 28px 125px; }
.page-hero h1 { margin-bottom:28px; font-size:clamp(5rem,10vw,9rem); line-height:.85; letter-spacing:-.04em; }
.values-grid article { padding:42px 32px; border-top:2px solid var(--orange); }
.map-placeholder { filter:saturate(.35); }
a:focus-visible,button:focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
@media (max-width:760px) {
  .header-inner { height:76px; padding:0 20px; }.global-nav { inset:76px 0 auto; }
  .hero { min-height:auto; padding:70px 22px 32px; grid-template-columns:1fr; background:var(--paper); }.hero h1 { font-size:4rem; }.hero-visual { height:62vh; min-height:420px; }
  .section { padding:95px 22px; }.intro h2,.section-heading h2 { font-size:3.4rem; }
  .intro-image { margin-top:15px; aspect-ratio:4/3; }.intro-image img { object-fit:contain; background:var(--cream); }
  .card-art { height:auto; aspect-ratio:1/1; }.card-art img { object-fit:contain; background:var(--cream); }
  .visit-banner { max-width:calc(100% - 32px); margin-bottom:60px; padding:70px 25px; }.visit-banner h2 { font-size:3.5rem; }
  .site-footer { margin:0 20px; padding:60px 0 30px; grid-template-columns:1fr; }.site-footer > small { grid-column:auto; }
  .page-hero { padding:100px 22px 85px; }.page-hero h1 { font-size:4.8rem; }
}

/* Interactive pages */
[hidden] { display:none!important; }
.filter-buttons { position:sticky; top:94px; z-index:8; display:flex; justify-content:center; gap:10px; margin:-35px 0 75px; padding:16px; background:rgba(248,244,236,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.filter-button { min-width:110px; padding:12px 18px; color:var(--ink); background:transparent; border:1px solid var(--line); font:600 .66rem 'Noto Sans JP',sans-serif; letter-spacing:.18em; cursor:pointer; transition:color .25s,background .25s,border-color .25s,transform .25s; }
.filter-button:hover { border-color:var(--orange); transform:translateY(-2px); }.filter-button.active { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.menu-category { transition:opacity .25s; }.menu-list > div { transition:transform .25s,background .25s; }.menu-list > div:hover { transform:translateX(8px); background:rgba(166,95,69,.045); }
.story-photo { min-height:540px; }.story-photo img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.7); }
.story-copy h2,.access-info h2 { font-size:clamp(3.2rem,5.5vw,5.8rem); line-height:.92; letter-spacing:-.03em; }.story-copy h2 span,.access-info h2 span { display:block; margin-top:24px; font:500 .88rem/1.8 'Noto Sans JP',sans-serif; letter-spacing:.1em; }
.shop-details { background:var(--cream); }.detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0; background:var(--line); border:1px solid var(--line); }.detail-grid > div { padding:38px 28px; background:var(--paper); }.detail-grid dt { margin-bottom:24px; color:var(--orange); font-size:.62rem; font-weight:600; letter-spacing:.22em; }.detail-grid dd { min-height:62px; margin:0 0 14px; font-family:'Noto Serif JP',serif; font-size:1.15rem; }.detail-grid dd strong { margin-right:5px; font-size:2.25rem; font-weight:500; }.detail-grid p { margin:0; color:#776e67; font-size:.76rem; }
.map-frame { min-width:0; }.map-frame iframe { display:block; width:100%; height:570px; border:0; filter:grayscale(.55) sepia(.12); }.map-frame > a { display:inline-block; margin-top:14px; padding-bottom:3px; border-bottom:1px solid var(--ink); font-size:.75rem; }.fiction-note { margin-top:28px; padding:18px 20px; background:var(--cream); color:#716861; font-size:.7rem; line-height:1.8; }
.to-top { position:fixed; right:28px; bottom:28px; z-index:15; display:grid; place-items:center; width:52px; height:52px; color:var(--paper); background:var(--ink); border:0; border-radius:50%; box-shadow:0 8px 28px rgba(43,36,32,.18); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s,visibility .3s,transform .3s,background .25s; }.to-top.visible { opacity:1; visibility:visible; transform:none; }.to-top:hover { background:var(--orange); transform:translateY(-3px); }
.reveal-ready [data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1); }.reveal-ready [data-reveal].revealed { opacity:1; transform:none; }
@media (max-width:900px) { .detail-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) {
  .filter-buttons { top:76px; justify-content:flex-start; overflow-x:auto; margin:-25px -22px 55px; padding:13px 22px; }.filter-button { flex:0 0 auto; min-width:92px; }
  .detail-grid { grid-template-columns:1fr; }.detail-grid dd { min-height:auto; }.story-photo { min-height:auto; aspect-ratio:4/3; }.story-photo img { object-fit:contain; background:var(--cream); }
  .map-frame iframe { height:56vh; min-height:390px; }.to-top { right:18px; bottom:18px; width:48px; height:48px; }
}
@media (prefers-reduced-motion:reduce) { .reveal-ready [data-reveal] { opacity:1; transform:none; } }