:root { --ink:#253127; --cream:#f7f3ea; --paper:#fffdf9; --orange:#c87542; --line:#ded8ca; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; font-size:15px; line-height:1.9; } a { color:inherit; text-decoration:none; } .site-header { height:92px; padding:0 clamp(24px,6vw,92px); display:flex; justify-content:space-between; align-items:center; background:var(--paper); } .logo { font-family:"DM Serif Display",serif; font-size:22px; line-height:1; letter-spacing:.04em; } .logo span { display:block; font-family:"Noto Sans JP",sans-serif; font-size:8px; letter-spacing:.25em; margin-top:4px; } .site-nav { display:flex; gap:30px; align-items:center; } .site-nav a { font-size:13px; position:relative; padding:8px 0; } .site-nav a::after { content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--orange); transition:width .25s; } .site-nav a:hover::after,.site-nav .active::after { width:100%; } .menu-toggle { display:none; border:0; background:transparent; font-size:25px; color:var(--ink); cursor:pointer; }
.hero { min-height:610px; display:grid; grid-template-columns:1fr 1fr; background:var(--cream); } .hero-copy { align-self:center; padding:80px clamp(24px,10vw,160px); } .eyebrow { margin:0 0 15px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.16em; } h1,h2,h3 { margin:0; font-weight:500; line-height:1.4; } h1,h2 { font-family:"DM Serif Display","Noto Sans JP",serif; } .hero h1 { font-size:clamp(48px,6vw,80px); margin-bottom:25px; } .hero-copy > p:not(.eyebrow) { margin-bottom:32px; } .button { display:inline-block; padding:12px 26px; background:var(--ink); color:#fff; font-size:13px; transition:opacity .2s; } .button:hover { opacity:.75; } .hero-image,.feature-image,.menu-visual,.about-hero { background-size:cover; background-position:center; } .hero-image { background-image:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0)),url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1200&q=80'); }
.section { max-width:1100px; margin:auto; padding:105px 30px; } .intro { text-align:center; } .intro h2,.story h2 { font-size:clamp(30px,4vw,46px); margin-bottom:23px; } .text-link { display:inline-block; margin-top:20px; font-size:13px; border-bottom:1px solid var(--ink); } .text-link span { margin-left:15px; } .feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:55px; padding-top:10px; } .feature-image { height:310px; margin-bottom:24px; } .coffee-card .feature-image { background-image:url('https://images.unsplash.com/photo-1497636577773-f1231844b336?auto=format&fit=crop&w=900&q=80'); } .pastry-card .feature-image { background-image:url('https://images.unsplash.com/photo-1519915028121-7d3463d20b13?auto=format&fit=crop&w=900&q=80'); } .feature-card h3 { font-size:23px; margin-bottom:9px; } .feature-card > p:last-child { margin:0; font-size:13px; }.visit-banner { min-height:300px; padding:60px max(30px,calc((100vw - 920px)/2)); background:var(--ink); color:white; display:flex; justify-content:space-between; align-items:center; } .visit-banner h2 { font-size:clamp(29px,4vw,43px); } .button-light { color:var(--ink); background:#fff; white-space:nowrap; }
.page-heading { padding:85px 30px 75px; text-align:center; background:var(--cream); }.page-heading h1 { font-size:clamp(42px,5vw,62px); margin-bottom:10px; }.page-heading p:last-child { margin:0; }.menu-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:95px; }.menu-section.reverse .menu-visual { order:2; }.menu-visual { height:410px; }.menu-coffee { background-image:url('https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=900&q=80'); }.menu-sweets { background-image:url('https://images.unsplash.com/photo-1559620192-032c4bc4674e?auto=format&fit=crop&w=900&q=80'); }.menu-list h2 { font-size:35px; margin-bottom:24px; }.menu-list dl { margin:0; }.menu-list dl div { display:flex; justify-content:space-between; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }.menu-list dt,.menu-list dd { margin:0; font-size:14px; }.menu-note { margin:-35px 30px 90px; text-align:center; font-size:12px; color:#6d746d; }
.about-hero { height:470px; background-image:url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=1600&q=80'); }.story { text-align:center; max-width:800px; }.story > p:last-child { text-align:left; }.values { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding-top:0; }.values article { padding:30px 0; border-top:1px solid var(--ink); }.values span { color:var(--orange); font-family:"DM Serif Display",serif; font-size:24px; }.values h3 { font-size:20px; margin:16px 0 10px; }.values p { font-size:13px; margin:0; }
.access-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:75px; align-items:start; }.map-placeholder { height:460px; position:relative; overflow:hidden; background-color:#dfe8dc; background-image:linear-gradient(35deg,transparent 45%,rgba(255,255,255,.75) 46%,rgba(255,255,255,.75) 49%,transparent 50%),linear-gradient(-18deg,transparent 36%,rgba(255,255,255,.85) 37%,rgba(255,255,255,.85) 42%,transparent 43%); }.map-placeholder::before,.map-placeholder::after { content:""; position:absolute; border-radius:50%; background:rgba(165,191,160,.45); }.map-placeholder::before { width:190px; height:190px; left:-45px; top:-30px; }.map-placeholder::after { width:130px; height:130px; right:5px; bottom:10px; }.map-placeholder span { position:absolute; z-index:1; top:48%; left:48%; transform:translate(-50%,-50%); width:86px; height:86px; padding-top:21px; border-radius:50%; background:var(--orange); color:#fff; text-align:center; font-family:"DM Serif Display",serif; font-size:13px; line-height:1.5; }.access-info h2 { font-size:30px; margin-bottom:25px; }.access-info dl { margin:0; }.access-info dl div { display:grid; grid-template-columns:90px 1fr; padding:17px 0; border-top:1px solid var(--line); }.access-info dl div:last-child { border-bottom:1px solid var(--line); }.access-info dt,.access-info dd { margin:0; font-size:14px; }.small-note { font-size:12px; color:#6d746d; }.site-footer { padding:55px clamp(24px,6vw,92px) 30px; background:#e9e2d3; }.site-footer > p { margin:22px 0 0; font-size:12px; }.site-footer .copyright { margin-top:40px; font-size:10px; color:#687068; }
@media (max-width:720px) { .site-header { height:70px; padding:0 22px; position:relative; }.menu-toggle { display:block; }.site-nav { display:none; position:absolute; z-index:2; top:70px; left:0; right:0; padding:18px 22px 25px; background:var(--paper); box-shadow:0 7px 10px rgba(0,0,0,.05); flex-direction:column; align-items:flex-start; gap:8px; }.site-nav.open { display:flex; }.hero { min-height:0; grid-template-columns:1fr; }.hero-copy { padding:75px 30px; }.hero-image { height:320px; }.section { padding:72px 24px; }.feature-grid,.menu-section,.access-layout { grid-template-columns:1fr; gap:35px; }.feature-grid { padding-top:0; gap:55px; }.feature-image { height:260px; }.visit-banner { padding:55px 30px; display:block; }.visit-banner .button { margin-top:28px; }.page-heading { padding:65px 24px 55px; }.menu-section.reverse .menu-visual { order:0; }.menu-visual { height:300px; }.menu-section { padding-bottom:30px; }.menu-note { margin:15px 20px 60px; }.about-hero { height:300px; }.values { grid-template-columns:1fr; gap:0; }.access-layout { gap:45px; }.map-placeholder { height:320px; }.site-footer { padding:45px 24px 25px; } }

/* Refined visual system */
:root { --ink:#30271f; --cream:#f7f3ea; --paper:#fdfbf6; --orange:#9a624a; --line:#d8d0c3; }
body { background:var(--paper); color:var(--ink); font-size:14px; line-height:2.15; letter-spacing:.035em; }
.site-header { height:108px; padding:0 clamp(28px,6.5vw,110px); border-bottom:1px solid rgba(48,39,31,.12); background:rgba(253,251,246,.96); }
.logo { font-size:25px; }.logo span { margin-top:7px; font-size:8px; letter-spacing:.31em; }
.site-nav { gap:clamp(20px,2.6vw,46px); }.site-nav a { font-size:10px; font-weight:700; letter-spacing:.16em; }.site-nav a::after { height:1px; background:var(--orange); transform:scaleX(0); transform-origin:right; transition:transform .3s ease; }.site-nav a:hover::after,.site-nav .active::after { transform:scaleX(1); transform-origin:left; }
.hero { grid-template-columns:minmax(420px,.92fr) 1.08fr; min-height:700px; }.hero-copy { padding:90px clamp(40px,10vw,170px); }.eyebrow { margin-bottom:20px; color:var(--orange); font-size:10px; letter-spacing:.24em; }.hero h1 { margin-bottom:34px; font-size:clamp(58px,6.3vw,94px); letter-spacing:-.025em; }.hero-copy > p:not(.eyebrow) { margin-bottom:39px; color:#5e554c; }
.button { min-height:48px; padding:0 24px; gap:22px; font-size:10px; letter-spacing:.14em; }.button::after { content:'→'; font-size:16px; font-weight:400; }.button:hover { background:var(--orange); transform:translateY(-2px); }.hero-image,.feature-image,.menu-visual,.about-hero { filter:saturate(.7); }
.section { width:min(1180px,100%); padding:145px 40px; }.intro { max-width:940px; }.intro h2,.story h2 { margin-bottom:28px; font-size:clamp(37px,4.2vw,58px); letter-spacing:-.02em; }.intro > p:not(.eyebrow),.feature-card > p:last-child,.story > p:last-child,.values p { color:#766e65; }.text-link { gap:22px; margin-top:28px; padding-bottom:6px; font-size:11px; letter-spacing:.12em; }.text-link span { color:var(--orange); font-size:17px; }.feature-grid { gap:72px; padding-top:0; }.feature-image { height:390px; margin-bottom:30px; }.feature-card h3 { margin-bottom:11px; font-size:29px; }.visit-banner { min-height:360px; padding:70px max(40px,calc((100vw - 960px)/2)); }.visit-banner .eyebrow { color:#c99072; }.visit-banner h2 { font-size:clamp(37px,4vw,55px); }.button-light { background:var(--paper); color:var(--ink); }
.page-heading { padding:122px 30px 105px; }.page-heading h1 { margin-bottom:17px; font-size:clamp(54px,6vw,78px); letter-spacing:-.025em; }.page-heading p:last-child { color:#766e65; }.menu-section { grid-template-columns:1fr .85fr; gap:115px; }.menu-visual { height:495px; }.menu-list h2 { margin-bottom:32px; font-size:42px; }.menu-list dl div { padding:17px 0; border-color:var(--line); }.menu-list dt { font-size:13px; }.menu-list dd { font-family:'DM Serif Display',serif; font-size:17px; }.menu-note { margin:-50px 30px 115px; color:#766e65; }
.about-hero { height:555px; }.story { max-width:860px; }.story > p:last-child { max-width:650px; margin:auto; }.values { gap:55px; padding-top:0; }.values article { padding-top:27px; }.values span { color:var(--orange); }.values h3 { margin:18px 0 13px; font-size:26px; }.access-layout { gap:95px; }.map-placeholder { height:485px; }.access-info h2 { margin-bottom:31px; font-size:37px; }.access-info dl div { padding:19px 0; border-color:var(--line); }.small-note { color:#766e65; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:40px; padding:72px clamp(28px,6.5vw,110px) 28px; background:#e8e1d6; }.footer-tagline { margin:19px 0 0; font-family:'DM Serif Display',serif; font-size:18px; font-style:italic; letter-spacing:.01em; }.footer-details { display:flex; align-items:flex-start; gap:55px; }.footer-details p { margin:0; font-size:10px; font-weight:700; line-height:2.1; letter-spacing:.12em; }.social-links { display:flex; flex-direction:column; gap:8px; }.social-links a { font-size:10px; font-weight:700; letter-spacing:.11em; }.social-links a:hover { color:var(--orange); }.copyright { grid-column:1/-1; margin:20px 0 0; color:#766e65; font-size:9px; letter-spacing:.1em; }
@media (max-width:760px) { .site-header { height:78px; padding:0 24px; }.menu-toggle { display:block; }.site-nav { top:77px; z-index:5; padding:20px 24px 27px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:none; }.hero { display:flex; flex-direction:column; }.hero-copy { min-height:460px; padding:78px 30px 60px; }.hero h1 { font-size:59px; }.hero-image { height:330px; }.section { padding:94px 26px; }.feature-grid,.menu-section,.access-layout { grid-template-columns:1fr; gap:42px; }.feature-grid { gap:67px; }.feature-image { height:315px; }.visit-banner { display:block; min-height:300px; padding:65px 30px; }.visit-banner .button { margin-top:33px; }.page-heading { padding:88px 24px 75px; }.menu-section { padding-bottom:35px; }.menu-section.reverse .menu-visual { order:0; }.menu-visual { height:350px; }.menu-note { margin:15px 24px 75px; }.about-hero { height:350px; }.values { grid-template-columns:1fr; gap:20px; }.access-layout { gap:50px; }.map-placeholder { height:350px; }.site-footer { grid-template-columns:1fr; gap:35px; padding:57px 26px 24px; }.footer-details { gap:38px; }.copyright { margin-top:10px; } }

/* Top page finishing */
.hero-finished { position:relative; display:block; min-height:min(800px,calc(100vh - 108px)); overflow:hidden; background:#282018; }
.hero-finished .hero-image { position:absolute; inset:0; height:auto; background-image:linear-gradient(90deg,rgba(33,25,18,.66) 0%,rgba(33,25,18,.38) 42%,rgba(33,25,18,.08) 70%),url('images/cafe-interior-hero.png'); background-position:center; filter:none; }
.hero-finished .hero-copy { position:relative; z-index:1; width:min(780px,100%); min-height:min(800px,calc(100vh - 108px)); padding:clamp(90px,12vw,180px) clamp(32px,10vw,170px); color:#fffdf8; }
.hero-finished .eyebrow { color:#e8baa0; }.hero-finished h1 { margin:0 0 32px; font-size:clamp(65px,8.3vw,125px); line-height:.94; letter-spacing:-.035em; }.hero-finished .hero-copy > p:not(.eyebrow) { color:#f2e9df; font-size:15px; line-height:2; }.hero-finished .button { background:#f9f5ed; color:var(--ink); }.hero-finished .button:hover { background:#c88968; color:#fff; }.hero-scroll { position:absolute; z-index:1; right:clamp(28px,5vw,80px); bottom:33px; margin:0; color:#fffaf2; font-size:9px; font-weight:700; letter-spacing:.18em; writing-mode:vertical-rl; }.hero-scroll span { margin-top:14px; color:#e8baa0; font-size:15px; }
.intro { max-width:1180px; text-align:left; }.intro-layout { display:grid; grid-template-columns:1fr .8fr; gap:120px; align-items:start; }.intro h2 { margin:0; font-size:clamp(48px,5.7vw,78px); line-height:.98; }.intro-layout > div:last-child { padding-top:12px; }.intro-layout p { margin:0; color:#62594f; }.intro .text-link { margin-top:32px; }
.favorites { display:grid; grid-template-columns:minmax(210px,.52fr) 1.48fr; gap:80px; padding:140px max(40px,calc((100vw - 1100px)/2)); background:#f1ede4; }.favorites-heading h2 { font-size:clamp(42px,4.5vw,64px); line-height:.98; }.favorites-heading .text-link { margin-top:36px; }.menu-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.menu-card { min-width:0; }.card-image { height:300px; margin-bottom:21px; background-position:center; background-size:cover; filter:saturate(.7); }.card-coffee { background-image:url('https://images.unsplash.com/photo-1497636577773-f1231844b336?auto=format&fit=crop&w=700&q=85'); }.card-latte { background-image:url('https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=700&q=85'); }.card-tart { background-image:url('https://images.unsplash.com/photo-1559620192-032c4bc4674e?auto=format&fit=crop&w=700&q=85'); }.menu-card .eyebrow { margin-bottom:8px; font-size:8px; }.card-title { display:flex; justify-content:space-between; gap:8px; align-items:baseline; padding-bottom:10px; border-bottom:1px solid var(--line); }.card-title h3 { font-family:'DM Serif Display',serif; font-size:22px; line-height:1.2; }.card-title span { color:var(--orange); font-family:'DM Serif Display',serif; font-size:17px; white-space:nowrap; }.menu-card > p:last-child { margin:12px 0 0; color:#766e65; font-size:12px; line-height:1.9; }.visit-banner > div > p:last-child { margin:18px 0 0; color:#e8ddd1; }
@media (max-width:900px) { .favorites { grid-template-columns:1fr; gap:45px; }.menu-cards { gap:18px; }.card-image { height:255px; } }
@media (max-width:760px) { .hero-finished { min-height:640px; }.hero-finished .hero-copy { min-height:640px; padding:100px 30px 70px; }.hero-finished h1 { font-size:61px; }.hero-finished .hero-copy > p:not(.eyebrow) { font-size:13px; }.hero-scroll { display:none; }.intro-layout { grid-template-columns:1fr; gap:34px; }.intro h2 { font-size:51px; }.favorites { display:block; padding:90px 26px; }.favorites-heading { margin-bottom:45px; }.menu-cards { grid-template-columns:1fr; gap:45px; }.card-image { height:330px; }.visit-banner > div > p:last-child { font-size:12px; } }

/* Locally supplied photography: preserve proportions and defer below-the-fold downloads. */
.intro-image { width:100%; height:clamp(330px,42vw,530px); margin:74px 0 0; overflow:hidden; }
.intro-image img, .menu-card img.card-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.menu-card img.card-image { aspect-ratio:4 / 5; background:#e8e1d6; }
@media (max-width:760px) { .intro-image { height:320px; margin-top:48px; }.menu-card img.card-image { height:330px; } }

/* Secondary pages */
.menu-heading h1 { line-height:.9; }.menu-catalog { padding-top:120px; }.menu-catalog-top { display:flex; align-items:end; justify-content:space-between; gap:30px; padding-bottom:42px; border-bottom:1px solid var(--ink); }.menu-catalog-top h2 { font-size:54px; line-height:1; }.menu-filters { display:flex; flex-wrap:wrap; gap:9px; }.filter-button { min-width:72px; padding:10px 14px; border:1px solid var(--line); background:transparent; color:var(--ink); font:700 10px 'Noto Sans JP',sans-serif; letter-spacing:.14em; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }.filter-button:hover,.filter-button.is-active { border-color:var(--ink); background:var(--ink); color:#fff; }.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0 34px; }.product-card { min-height:246px; padding:34px 0 28px; border-bottom:1px solid var(--line); }.product-card[hidden] { display:none; }.product-card .eyebrow { margin-bottom:12px; font-size:8px; }.product-card h3 { margin-bottom:10px; font-family:'DM Serif Display',serif; font-size:25px; line-height:1.2; }.product-card > p:not(.eyebrow) { min-height:52px; margin:0; color:#766e65; font-size:12px; line-height:1.85; }.product-card span { display:block; margin-top:18px; color:var(--orange); font-family:'DM Serif Display',serif; font-size:19px; }.menu-catalog .menu-note { margin:42px 0 0; }
.space-info { padding:115px 40px; background:#f1ede4; }.space-info-inner { display:grid; grid-template-columns:.85fr 1.15fr; gap:130px; width:min(1100px,100%); margin:auto; }.space-info h2 { font-size:clamp(42px,4.5vw,61px); line-height:.98; }.space-info dl { margin:0; }.space-info dl div { display:grid; grid-template-columns:125px 1fr; gap:15px; padding:18px 0; border-top:1px solid var(--line); }.space-info dl div:last-child { border-bottom:1px solid var(--line); }.space-info dt { color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.15em; }.space-info dd { margin:0; font-size:13px; }
.map-wrap { height:485px; overflow:hidden; background:#e8e1d6; }.map-wrap iframe { display:block; width:100%; height:100%; border:0; filter:saturate(.65) contrast(.92); }.access-info h2 { line-height:.98; }.access-info a { border-bottom:1px solid var(--ink); }.access-info a:hover { color:var(--orange); border-color:var(--orange); }
@media (max-width:760px) { .menu-catalog { padding-top:80px; }.menu-catalog-top { display:block; padding-bottom:30px; }.menu-catalog-top h2 { margin-bottom:30px; font-size:46px; }.product-grid { grid-template-columns:1fr; }.product-card { min-height:0; padding:28px 0; }.product-card > p:not(.eyebrow) { min-height:0; }.space-info { padding:85px 26px; }.space-info-inner { grid-template-columns:1fr; gap:45px; }.space-info dl div { grid-template-columns:90px 1fr; gap:10px; }.map-wrap { height:380px; }.access-info h2 { font-size:42px; } }

/* Interaction and progressive motion */
.button, .filter-button, .text-link, .social-links a { transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; }
.menu-card, .product-card, .feature-card { transition:transform .35s ease, box-shadow .35s ease; }
@media (hover:hover) { .menu-card:hover, .feature-card:hover { transform:translateY(-8px); }.menu-card:hover .card-image, .feature-card:hover .feature-image { transform:scale(1.025); }.card-image, .feature-image { transition:transform .5s ease; }.product-card:hover { transform:translateY(-4px); }.product-card:hover h3 { color:var(--orange); }.filter-button:hover { transform:translateY(-2px); }.button:hover { transform:translateY(-3px); }.text-link:hover { border-color:var(--orange); color:var(--orange); } }
.back-to-top { position:fixed; z-index:10; right:24px; bottom:24px; display:flex; width:52px; height:52px; flex-direction:column; align-items:center; justify-content:center; gap:0; border:1px solid rgba(253,251,246,.6); border-radius:50%; background:var(--ink); color:#fff; box-shadow:0 10px 24px rgba(48,39,31,.18); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, background .25s ease; }.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }.back-to-top:hover { background:var(--orange); transform:translateY(-3px); }.back-to-top span { font-family:'DM Serif Display',serif; font-size:17px; line-height:1; }.back-to-top small { font-size:7px; font-weight:700; letter-spacing:.12em; }
/* Content is visible by default; JavaScript only adds this enhancement. */
html.motion-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); } html.motion-ready .reveal.is-revealed { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media (max-width:760px) { .back-to-top { right:16px; bottom:16px; width:47px; height:47px; }.menu-toggle { width:42px; height:42px; padding:0; font-size:23px; } }