@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&family=Manrope:wght@400;500;600&display=swap');
:root{--ink:#56463d;--paper:#faf9f6;--line:#ded9d1;--accent:#c99037}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.9 'Manrope',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{height:118px;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line)}.brand{display:flex;gap:18px;align-items:center}.brand img{width:57px;height:57px;object-fit:contain}.brand span{font-size:17px;letter-spacing:.24em;font-weight:600}.brand small{display:block;font-size:11px;letter-spacing:.24em;text-align:center;margin-top:4px}nav{display:flex;gap:48px}nav a{font-size:13px;letter-spacing:.14em;position:relative}nav small{display:block;font-size:12px;letter-spacing:.06em;opacity:.65}nav a:after{content:'';position:absolute;bottom:-10px;left:0;width:0;height:1px;background:var(--ink);transition:width .3s}nav a:hover:after,nav a[aria-current]:after{width:100%}.mobile-toggle{display:none}.hero{position:relative;height:calc(100svh - 118px);min-height:540px;max-height:850px;background:#2a2725;overflow:hidden;color:white}.hero img{width:100%;height:100%;object-fit:cover;object-position:center 53%;filter:brightness(.77);animation:heroIn 1.2s ease-out}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,19,16,.55),transparent 80%)}.hero-copy{position:absolute;z-index:1;left:8%;top:24%}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase}.hero h1{font:400 clamp(36px,4vw,62px)/1.65 'Noto Serif JP',serif;letter-spacing:.12em;margin:24px 0}.hero p{font-family:'Noto Serif JP',serif;letter-spacing:.08em}.text-link{display:inline-block;padding:12px 0 7px;border-bottom:1px solid currentColor;font-size:13px;letter-spacing:.12em;margin-top:20px;transition:opacity .25s}.text-link:hover{opacity:.55}.hero-foot{position:absolute;z-index:1;bottom:30px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em}.hero-foot b{font-weight:400}.intro{padding:110px 8%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.section-label{letter-spacing:.2em;font-size:13px;margin:0 0 18px}.intro h2,.headline{font:400 clamp(27px,3vw,43px)/1.7 'Noto Serif JP',serif;letter-spacing:.08em;margin:0}.intro p{margin:5px 0 0;line-height:2.4;font-size:15px}.section{padding:70px 8% 100px}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:44px;border-top:1px solid var(--line);padding-top:28px}.section-top h2{font:400 34px/1.4 Georgia,serif;margin:0}.section-top p{font-size:13px;margin:8px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.card-image{aspect-ratio:4/5;overflow:hidden;background:#ddd6cd}.card-image img{height:100%;width:100%;object-fit:cover;transition:transform .8s}.card:hover img{transform:scale(1.035)}.card:nth-child(1) img{object-position:80% 50%}.card:nth-child(2) img{object-position:10% 60%;transform:scale(1.35)}.card:nth-child(3) img{object-position:40% 50%}.card .number{font-size:11px;letter-spacing:.18em;margin:19px 0 5px}.card h3{font:400 21px 'Noto Serif JP',serif;margin:0 0 10px}.card p{font-size:14px;margin:0}.shop-band{display:grid;grid-template-columns:1.15fr 1fr;background:#eeeae3}.shop-band .photo{min-height:450px;background:url('assets/coffee.jpg') center/cover}.shop-band .content{padding:75px 14%}.shop-band h2{font:400 34px 'Noto Serif JP',serif}.shop-band p{font-size:15px}.page-head{padding:80px 8% 65px;border-bottom:1px solid var(--line)}.page-head h1{font:400 clamp(45px,6vw,80px)/1.2 Georgia,serif;margin:15px 0 22px;letter-spacing:-.025em}.page-head p{font-family:'Noto Serif JP',serif;max-width:630px;font-size:17px}.page-head .eyebrow{color:var(--accent)}.menu-tabs{display:flex;gap:12px;flex-wrap:wrap;padding:35px 8% 0}.menu-tabs button{border:1px solid var(--line);padding:10px 24px;background:transparent;font-size:14px}.menu-tabs button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.menu-grid{padding:55px 8% 100px;display:grid;grid-template-columns:1fr 1fr;gap:42px}.menu-item{display:grid;grid-template-columns:145px 1fr;gap:25px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:30px}.menu-item img{width:145px;height:160px;object-fit:cover}.menu-item h2{font:400 21px 'Noto Serif JP',serif;margin:8px 0}.menu-item p{font-size:14px;margin:0}.menu-item .tag{font-size:11px;letter-spacing:.16em;color:#947449}.wide-photo{margin:0 8%;height:470px;overflow:hidden}.wide-photo img{width:100%;height:100%;object-fit:cover}.story-body{padding:80px 15%;max-width:1200px;margin:auto}.story-body h2{font:400 29px/1.8 'Noto Serif JP',serif}.story-body p{font-size:16px;line-height:2.3}.atelier{margin-top:65px;padding-top:40px;border-top:1px solid var(--line)}.shop-detail{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:70px 8% 100px}.shop-detail h2{font:400 32px 'Noto Serif JP',serif}.shop-detail dl{margin:35px 0}.shop-detail dl div{padding:17px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;font-size:14px}.shop-detail dd{margin:0}.shop-detail .aside{background:#eeeae3;padding:40px;align-self:start}.aside img{display:block;width:95px;margin:0 auto 30px}.aside h3{font:400 24px 'Noto Serif JP',serif}.aside p{font-size:14px}.note{font-size:13px;opacity:.75}footer{padding:65px 8% 25px}.footer-brand{display:flex;align-items:center;gap:25px;margin-bottom:38px}.footer-brand img{width:67px}.footer-brand p{font-size:17px;letter-spacing:.19em;margin:0}.footer-brand small{display:block;font-size:13px;letter-spacing:.08em;margin-top:8px}footer>div:nth-child(2){display:flex;gap:30px;font-size:12px;letter-spacing:.1em}.copyright{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;margin-top:38px;font-size:11px;letter-spacing:.07em}#loader{position:fixed;z-index:100;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}#loader.active{opacity:1;visibility:visible}#loader img{width:90px;animation:bloom 1.2s ease-in-out infinite}#loader span{font-size:12px;letter-spacing:.26em}#loader i{height:1px;width:95px;background:var(--line);overflow:hidden}#loader i:after{content:'';display:block;height:1px;background:var(--ink);animation:line 1s ease infinite}.skip{position:fixed;z-index:200;top:0;left:20px;background:white;padding:12px;transform:translateY(-120%)}.skip:focus{transform:none}main{animation:fade .6s ease}@keyframes bloom{50%{transform:scale(.92) rotate(8deg);opacity:.6}}@keyframes line{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes fade{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes heroIn{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(max-width:760px){header{height:94px;padding:15px 6%}.brand img{width:42px;height:42px}.brand{gap:10px}.brand span{font-size:12px;letter-spacing:.14em}.brand small{font-size:9px}.mobile-toggle{display:block;background:none;border:0;font-size:12px;letter-spacing:.12em;padding:10px}nav{display:none;position:absolute;z-index:20;top:94px;left:0;right:0;background:var(--paper);padding:30px 8%;gap:28px;flex-direction:column;border-bottom:1px solid var(--line)}nav.open{display:flex}.hero{height:690px;min-height:0;max-height:calc(100svh - 94px)}.hero img{object-position:65% 50%}.hero-copy{left:8%;top:23%}.hero h1{font-size:34px}.hero-copy p{font-size:14px}.intro{grid-template-columns:1fr;padding:65px 8%;gap:30px}.intro h2{font-size:27px}.section{padding:35px 8% 65px}.section-top{gap:20px}.section-top h2{font-size:29px}.cards{grid-template-columns:1fr;gap:36px}.card-image{aspect-ratio:4/3}.shop-band{grid-template-columns:1fr}.shop-band .photo{min-height:300px}.shop-band .content{padding:45px 8%}.page-head{padding:55px 8% 40px}.page-head h1{font-size:54px}.page-head p{font-size:15px}.menu-grid{grid-template-columns:1fr;gap:28px}.menu-item{grid-template-columns:100px 1fr;gap:18px}.menu-item img{width:100px;height:130px}.menu-item h2{font-size:19px}.wide-photo{height:280px}.story-body{padding:40px 8%}.story-body h2{font-size:24px}.shop-detail{grid-template-columns:1fr;gap:35px;padding-top:40px}.shop-detail dl div{grid-template-columns:90px 1fr}.shop-detail .aside{padding:30px}.footer-brand p{font-size:13px}.copyright span{display:none}footer>div:nth-child(2){gap:18px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.hero img{object-position:70% 56%;filter:brightness(.82)}.hero:after{background:linear-gradient(90deg,rgba(23,19,16,.70),rgba(23,19,16,.12) 75%)}.shop-band .photo{background-image:url(assets/layer-cake.jpg)}.card:nth-child(n) img{object-position:center;transform:none}.card:hover img{transform:scale(1.035)}.coffee-info{grid-column:1/-1;padding:35px 0 60px}.coffee-info h2{font:400 25px/1.8 "Noto Serif JP",serif}.menu-item img{object-position:center}.menu-board{display:block;max-width:950px;width:84%;margin:0 auto 60px}.hero-copy{top:18%}@media(max-width:760px){.hero img{object-position:60% 50%}.hero-copy{top:15%}.hero h1{font-size:31px}}

header{gap:30px}nav{gap:27px}.icon-link{display:flex;align-items:center;gap:9px;white-space:nowrap}.nav-icon{width:36px;height:40px;display:flex;justify-content:center;align-items:center;flex-shrink:0;transition:transform .3s ease,background .3s;border-radius:12px}.nav-icon img{width:25px;height:25px;object-fit:contain}.nav-icon.flower img{width:30px;height:30px}.nav-label{font-size:12px;letter-spacing:.1em}.icon-link:hover .nav-icon{transform:translateY(-4px) rotate(-7deg);background:#f9e9c8}.icon-link[aria-current] .nav-icon{background:#ffedc6}.icon-link[aria-current] .nav-label{color:#8f5a19}.footer-nav .icon-link{gap:8px}.footer-nav .nav-icon{width:32px;height:36px}.footer-nav .nav-icon img{width:24px;height:24px}.footer-nav{align-items:center}
@media(min-width:761px) and (max-width:1100px){header{height:auto;min-height:118px;flex-wrap:wrap;justify-content:center;padding:18px 4%;gap:15px}nav{width:100%;justify-content:center;gap:26px}.hero{height:calc(100svh - 160px)}}
@media(max-width:760px){nav{gap:12px;padding:20px 8% 25px}.icon-link{gap:16px;padding:7px 0}.nav-icon{width:42px;height:42px}.nav-icon img{width:29px;height:29px}.nav-label{font-size:14px}nav small{font-size:12px}nav a:after{display:none}.footer-nav{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px 18px!important}.footer-nav .icon-link{gap:7px}.footer-nav .nav-label{font-size:11px}.footer-nav .nav-icon{width:25px}.footer-nav .nav-icon img{width:22px;height:22px}}
.icon-link[aria-current] .nav-icon,.icon-link:hover .nav-icon{background:transparent}.icon-link[aria-current] .nav-label{color:var(--ink)}
