@charset "UTF-8";
:root{--ink:#254838;--paper:#f7f5ee;--line:#d9dfd2;--muted:#657368}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #af602e;outline-offset:5px}
header,main>section.section,footer{padding-left:max(6%,calc((100% - 1320px)/2));padding-right:max(6%,calc((100% - 1320px)/2))}
header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.logo{font-size:33px;letter-spacing:7px;font-family:Georgia,"Batang",serif;font-weight:700}
.logo span{display:block;font:9px sans-serif;letter-spacing:2px;margin-top:0}
nav{display:flex;gap:38px;font-size:14px}
nav a:last-child span{margin-left:12px}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:660px}
.hero-copy{padding:75px 9% 55px max(12%,calc((200% - 1320px)/2))}
.eyebrow{font:11px sans-serif;letter-spacing:2px;font-weight:600;margin:0 0 28px}
h1{font-family:Georgia,"Batang",serif;font-size:clamp(42px,4.5vw,68px);font-weight:500;line-height:1.3;letter-spacing:-3px;margin:0 0 25px}
p{word-break:keep-all}
.intro{font-size:17px;color:var(--muted);line-height:1.9}
.button{display:inline-flex;gap:38px;align-items:center;padding:14px 22px;background:var(--ink);color:white;border-radius:2px;font-size:14px;margin:20px 0}
.quiet{font-size:12px;margin-top:36px;color:var(--muted)}
.hero-art{background:#d4d9c8;position:relative;overflow:hidden;display:flex;align-items:center}
.hero-art img{width:100%;height:100%;object-fit:cover}
.art-note{position:absolute;bottom:24px;left:30px;font:10px sans-serif;letter-spacing:2px}
.round-stamp{position:absolute;right:25px;top:26px;border:1px solid #25483870;border-radius:50%;width:94px;height:94px;display:grid;place-content:center;font-size:12px;text-align:center;transform:rotate(12deg);background:#f7f5ee55}
.ribbon{display:flex;justify-content:center;gap:clamp(18px,5vw,85px);padding:22px 20px;background:var(--ink);color:#f3f2e9;font-size:13px}
.ribbon span:nth-child(even){color:#bacc9f}
.section{padding-top:90px;padding-bottom:90px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}
.section-heading .eyebrow{margin-bottom:18px}
h2{font-size:clamp(26px,2.5vw,37px);line-height:1.45;font-weight:500;letter-spacing:-1px;margin:0 0 16px}
.section-heading>p{font-size:14px;color:var(--muted)}
.filters{display:flex;gap:8px;margin:30px 0}
.filters button{border:1px solid var(--line);color:var(--ink);background:transparent;padding:8px 21px;border-radius:30px;font-size:13px}
.filters button[aria-pressed=true]{color:white;background:var(--ink);border-color:var(--ink)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.menu-card[hidden]{display:none}
.menu-art{height:230px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:2px}
.cream{background:#eae4d5}
.olive{background:#dce0cb}
.sand{background:#e3d7c5}
.peach{background:#eddbcf}
.sage{background:#d2dacf}
.tag{position:absolute;top:17px;left:17px;font:9px sans-serif;letter-spacing:1.5px;background:var(--paper);padding:7px 9px}
.cup{font-size:100px;filter:grayscale(1) sepia(.4);transform:rotate(-7deg)}
.glass{display:block;width:81px;height:120px;border-radius:3px 3px 24px 24px;border:5px solid #ffffff85;box-shadow:15px 20px 16px #25483820;transform:rotate(-7deg)}
.latte{background:linear-gradient(#d0ae84 5%,#815838 28%,#d5ba95 36%,#ebdac1)}
.black{background:linear-gradient(#906a44,#3e2b1c)}
.tea{background:linear-gradient(#eab279,#e98859 50%,#edbe70)}
.matcha{background:linear-gradient(#698352 30%,#e8e6cd 38%,#e8e6cd)}
.cake{display:block;width:132px;height:85px;border-radius:50% 50% 18% 18%;background:linear-gradient(#95643a 25%,#e6c998 30%,#efd9b0);box-shadow:10px 25px 15px #25483820;transform:rotate(-8deg)}
.menu-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px}
.menu-title h3{font-size:17px;font-weight:500;margin:0}
.menu-title>span{font-size:14px}
.menu-card p{font-size:13px;color:var(--muted);margin:6px 0}
.small{font-size:12px;color:var(--muted);margin-top:30px}
.story{background:#e6eadf;padding:70px 6%;display:flex;align-items:center;justify-content:center;gap:8%;position:relative}
.story-flower{font-size:150px;line-height:1;color:#778d61}
.story .eyebrow{margin-bottom:18px}
.story p:last-child{font-size:14px;color:var(--muted);line-height:2}
.story-mark{font:48px Georgia,serif;line-height:1.6;border-left:1px solid #adbaa5;padding-left:40px;color:#7d8e70}
.visit{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.visit p{color:var(--muted);font-size:14px}
dl{margin:0}
dl div{border-top:1px solid var(--line);padding:19px 0}
dt{font-size:14px;font-weight:600}
dd{margin:4px 0 0;font-size:13px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding-top:35px;padding-bottom:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px}
footer p{font-size:13px}
footer small{width:100%;font-size:11px;color:var(--muted);margin-top:10px}
.skip,.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}
.skip:focus{width:auto;height:auto;clip:auto;padding:10px;background:white;z-index:5}
@media(max-width:760px){header{height:88px}
.logo{font-size:28px}
nav{gap:18px;font-size:12px}
nav a:last-child span{display:none}
.hero{grid-template-columns:1fr}
.hero-copy{padding:48px 6% 30px}
.hero-copy .eyebrow{font-size:9px;margin-bottom:20px}
.hero h1{font-size:49px}
.hero .quiet{margin-top:15px}
.hero-art{height:390px}
.ribbon{font-size:10px;gap:12px}
.section{padding-top:55px;padding-bottom:55px}
.section-heading{display:block}
.section-heading>p br{display:none}
.menu-grid{grid-template-columns:repeat(2,1fr);gap:25px 16px}
.menu-art{height:180px}
.menu-title{display:block}
.menu-title h3{font-size:15px}
.menu-card p{font-size:12px}
.filters button{padding:7px 15px}
.story{padding:48px 6%;justify-content:start}
.story-flower{position:absolute;right:6%;top:34px;font-size:60px;opacity:.3}
.story-mark{display:none}
.visit{grid-template-columns:1fr;gap:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}