:root { --paper:#f3ebdd; --paper-deep:#e9deca; --ink:#1f1b18; --brown:#3a241b; --moss:#67705a; --clay:#c9633d; --line:rgba(58,36,27,.18); --white:#fffaf2; --shadow:0 18px 50px rgba(58,36,27,.14); --serif:"Palatino Linotype","Book Antiqua",Georgia,serif; --sans:"Segoe UI",system-ui,-apple-system,sans-serif; --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; }
a,button,input,select { font:inherit; }
a { color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--clay); outline-offset:4px; }
.concept-bar { background:var(--brown); color:var(--paper); padding:9px 5vw; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.concept-bar span { margin-left:14px; color:#d6c7af; letter-spacing:.04em; text-transform:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1440px; margin:auto; padding:24px 5vw; }
.wordmark { display:flex; align-items:center; gap:10px; text-decoration:none; font:700 14px/1.05 var(--serif); letter-spacing:.01em; }
.wordmark em { font-weight:400; font-size:12px; }
.wordmark-mark { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--ink); border-radius:50%; font:600 11px var(--sans); letter-spacing:-.08em; }
.desktop-nav { display:flex; gap:32px; margin-left:auto; color:rgba(31,27,24,.7); font-size:12px; }
.desktop-nav a { text-decoration:none; }
.desktop-nav a:hover { color:var(--clay); }
.nav-cta { padding:11px 15px; border:1px solid var(--ink); border-radius:999px; font-size:12px; text-decoration:none; }
.nav-cta:hover { background:var(--ink); color:var(--paper); }
main { overflow:hidden; }
section { max-width:1440px; margin:auto; padding:100px 5vw; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.85fr); gap:7vw; align-items:center; min-height:680px; padding-top:72px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 24px; color:var(--moss); font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--clay); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
h1 { max-width:720px; margin-bottom:24px; font-size:clamp(58px,8vw,112px); letter-spacing:-.07em; line-height:.88; }
h1 i,h2 i { color:var(--clay); font-style:italic; }
.hero-lede { max-width:500px; margin-bottom:28px; color:rgba(31,27,24,.72); font-size:16px; }
.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:48px; padding:13px 18px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:700; text-decoration:none; transition:transform .2s ease, background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0) scale(.98); }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:var(--clay); }
.button-light { background:var(--paper); color:var(--ink); }
.text-link { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:12px; font-weight:700; text-decoration:none; }
.text-link:hover { color:var(--clay); }
.hero-note { display:flex; align-items:center; gap:10px; margin-top:50px; color:rgba(31,27,24,.58); font-size:11px; }
.hero-note strong { color:var(--moss); }
.note-sep { width:4px; height:4px; background:var(--clay); border-radius:50%; }
.hero-art { position:relative; min-height:560px; border-radius:180px 180px 22px 22px; background:#d4b89b; overflow:hidden; box-shadow:var(--shadow); }
.art-sun { position:absolute; width:310px; height:310px; right:-55px; top:-42px; border-radius:50%; background:#e6c16f; }
.art-grid { position:absolute; inset:0; opacity:.28; background:linear-gradient(90deg,transparent 49%,rgba(31,27,24,.22) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(31,27,24,.18) 50%,transparent 51%); background-size:75px 75px; transform:rotate(12deg) scale(1.4); }
.art-leaf { position:absolute; width:210px; height:95px; border:1px solid rgba(31,27,24,.35); border-radius:100% 0 100% 0; transform:rotate(-29deg); }
.art-leaf-one { left:-55px; top:110px; }
.art-leaf-two { right:-85px; bottom:140px; transform:rotate(27deg); }
.cup-shadow { position:absolute; width:230px; height:65px; left:50%; bottom:122px; background:rgba(58,36,27,.25); border-radius:50%; filter:blur(13px); transform:translateX(-50%); }
.cup { position:absolute; width:220px; height:185px; left:50%; bottom:150px; transform:translateX(-50%); }
.cup-rim { position:absolute; top:0; left:20px; width:180px; height:45px; border-radius:50%; background:#eee2c9; border:5px solid #5d3b27; z-index:3; }
.coffee { position:absolute; top:9px; left:32px; width:156px; height:27px; border-radius:50%; background:#382216; z-index:4; }
.cup-body { position:absolute; top:18px; left:27px; width:166px; height:140px; border-radius:16px 16px 58px 58px; background:#e9dcc4; border:5px solid #5d3b27; border-top:0; overflow:hidden; }
.cup-line { position:absolute; width:100%; height:16px; top:44px; border-top:2px solid rgba(93,59,39,.35); }
.cup-handle { position:absolute; top:53px; right:0; width:51px; height:65px; border:10px solid #5d3b27; border-left:0; border-radius:0 42px 42px 0; }
.art-caption { position:absolute; bottom:26px; left:28px; right:28px; display:flex; justify-content:space-between; color:var(--brown); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.art-caption span:first-child { opacity:.6; }
.menu-section { background:var(--brown); color:var(--paper); }
.section-heading { max-width:1100px; margin:0 auto 45px; }
.section-heading .eyebrow { color:#c7b9a6; }
.section-heading h2,.mood-section h2,.space-copy h2,.reserve-copy h2,.visit-section h2 { font-size:clamp(42px,5vw,70px); line-height:.94; letter-spacing:-.06em; }
.split-heading { display:grid; grid-template-columns:1fr .7fr; gap:7vw; align-items:end; }
.split-heading > p { max-width:310px; margin-bottom:7px; color:#c7b9a6; font-size:14px; }
.menu-controls { display:flex; gap:8px; max-width:1100px; margin:0 auto 26px; overflow:auto; scrollbar-width:none; }
.menu-controls::-webkit-scrollbar { display:none; }
.filter-button { border:1px solid rgba(243,235,221,.25); border-radius:999px; padding:10px 14px; background:transparent; color:#c7b9a6; font-size:11px; white-space:nowrap; }
.filter-button:hover,.filter-button.is-active { background:var(--paper); border-color:var(--paper); color:var(--brown); }
.menu-grid { display:grid; grid-template-columns:repeat(4,1fr); max-width:1100px; margin:auto; border-top:1px solid rgba(243,235,221,.22); border-bottom:1px solid rgba(243,235,221,.22); }
.menu-card { min-height:420px; padding:20px; border-left:1px solid rgba(243,235,221,.22); display:flex; flex-direction:column; transition:transform .25s ease, background .25s ease; }
.menu-card:first-child { border-left:0; }
.menu-card:hover { background:rgba(243,235,221,.06); transform:translateY(-5px); }
.menu-card.is-hidden { display:none; }
.menu-number { color:#c7b9a6; font-size:10px; }
.menu-illustration { position:relative; height:180px; margin:12px -20px 12px; overflow:hidden; }
.coffee-illustration { background:#af7d5b; }
.coffee-cup-mini { position:absolute; width:90px; height:70px; left:50%; top:51px; background:#eddbc0; border:4px solid #3a241b; border-radius:8px 8px 27px 27px; transform:translateX(-50%); }
.coffee-cup-mini::before { content:""; position:absolute; left:8px; right:8px; top:-9px; height:18px; border-radius:50%; background:#3a241b; border:4px solid #eddbc0; }
.coffee-bean { position:absolute; width:36px; height:54px; border:2px solid rgba(58,36,27,.65); border-radius:50%; }
.bean-a { left:32px; top:32px; transform:rotate(-35deg); }.bean-b { right:34px; bottom:20px; transform:rotate(38deg); }
.tea-illustration { background:#b8c5aa; }.tea-orb { position:absolute; width:112px; height:112px; left:50%; top:35px; border-radius:50%; background:#e8d58f; transform:translateX(-50%); }.tea-leaf { position:absolute; width:50px; height:85px; right:31px; bottom:14px; border:2px solid #67705a; border-radius:100% 0 100% 0; transform:rotate(30deg); }
.tonic-illustration { background:#d39a6d; }.tonic-glass { position:absolute; width:70px; height:100px; left:50%; top:35px; border:3px solid #3a241b; border-top:0; background:rgba(243,235,221,.48); transform:translateX(-50%) skew(-5deg); }.tonic-bubble { position:absolute; width:15px; height:15px; border:2px solid #3a241b; border-radius:50%; }.bubble-a { left:32%; top:58px; }.bubble-b { right:31%; top:92px; }
.toast-illustration { background:#e0ba7d; }.toast-shape { position:absolute; width:115px; height:105px; left:50%; top:42px; background:#d88743; border:4px solid #3a241b; border-radius:16px 16px 33px 33px; transform:translateX(-50%) rotate(-8deg); }.toast-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:#f3ebdd; }.dot-a { left:43%; top:77px; }.dot-b { left:56%; top:115px; }
.menu-info { margin-top:auto; }.menu-tag { margin-bottom:8px; color:#e1a66b; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }.menu-info h3 { margin-bottom:7px; font-size:27px; }.menu-info p:not(.menu-tag) { min-height:42px; color:#c7b9a6; font-size:12px; }.menu-info > div { display:flex; align-items:center; justify-content:space-between; margin-top:20px; }.menu-info strong { font-family:var(--serif); font-size:19px; font-weight:400; }.menu-type { color:#c7b9a6; font-size:10px; }
.section-footnote { display:flex; gap:12px; max-width:1100px; margin:22px auto 0; color:#c7b9a6; font-size:11px; }.footnote-mark { color:#e1a66b; }
.mood-section { display:grid; grid-template-columns:.75fr 1fr; gap:10vw; align-items:center; background:var(--paper-deep); }.mood-intro { max-width:390px; margin-left:max(0px, 5vw); }.mood-intro p:last-child { color:rgba(31,27,24,.65); font-size:14px; }.mood-list { display:flex; flex-direction:column; }.mood-card { display:grid; grid-template-columns:48px 1fr 24px; align-items:center; gap:14px; padding:20px 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }.mood-card:last-of-type { border-bottom:1px solid var(--line); }.mood-card:hover,.mood-card.is-selected { color:var(--clay); }.mood-icon { font:12px var(--serif); }.mood-card strong,.mood-card small { display:block; }.mood-card strong { font:17px var(--serif); font-weight:400; }.mood-card small { margin-top:3px; color:rgba(31,27,24,.55); font-size:11px; }.mood-arrow { text-align:right; font-size:18px; }.mood-result { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; padding:18px; background:var(--moss); color:var(--paper); }.result-label { color:#d2d7c7; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }.mood-result strong { font:20px var(--serif); }.mood-result span:last-child { grid-column:2; color:#d2d7c7; font-size:12px; }
.space-section { display:grid; grid-template-columns:1fr .8fr; gap:8vw; align-items:center; background:var(--paper); }.space-photo { position:relative; min-height:490px; overflow:hidden; background:#9aa68b; }.space-stamp { position:absolute; z-index:2; top:24px; left:24px; color:var(--paper); font:italic 18px/1 var(--serif); transform:rotate(-8deg); }.window-light { position:absolute; width:65%; height:130%; top:-20%; right:-10%; background:#e6c16f; transform:rotate(11deg); opacity:.72; }.chair-shape { position:absolute; left:19%; bottom:0; width:190px; height:290px; border-radius:92px 92px 0 0; background:#6a4b3b; }.table-shape { position:absolute; right:12%; bottom:0; width:270px; height:70px; border-radius:50%; background:#3a241b; }.table-shape::after { content:""; position:absolute; top:28px; left:46%; width:26px; height:170px; background:#3a241b; }.plant-shape { position:absolute; right:20%; bottom:50px; width:46px; height:140px; background:#67705a; border-radius:100% 0 100% 0; transform:rotate(28deg); }.space-copy { max-width:410px; }.space-copy > p:not(.eyebrow) { color:rgba(31,27,24,.65); font-size:14px; }.space-list { margin:35px 0; border-top:1px solid var(--line); }.space-list div { display:grid; grid-template-columns:42px 1fr; gap:3px; padding:15px 0; border-bottom:1px solid var(--line); }.space-list span { grid-row:span 2; color:var(--clay); font-size:11px; }.space-list strong { font:17px var(--serif); font-weight:400; }.space-list small { color:rgba(31,27,24,.55); font-size:11px; }
.reserve-section { display:grid; grid-template-columns:1fr .75fr; gap:10vw; background:var(--clay); color:var(--paper); }.reserve-copy { max-width:420px; }.reserve-copy .eyebrow { color:#f4d8b4; }.reserve-copy h2 { color:var(--paper); }.reserve-copy h2 i { color:#f6dfb4; }.reserve-copy > p { max-width:360px; color:#f4d8b4; font-size:14px; }.reserve-detail { display:flex; flex-wrap:wrap; gap:9px; margin-top:35px; }.reserve-detail span { padding:8px 11px; border:1px solid rgba(243,235,221,.45); border-radius:999px; color:var(--paper); font-size:10px; }.booking-form { padding:30px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }.form-top { display:flex; justify-content:space-between; margin-bottom:28px; color:var(--moss); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.booking-form label { display:block; margin-bottom:16px; color:rgba(31,27,24,.58); font-size:11px; }.booking-form input,.booking-form select { display:block; width:100%; margin-top:7px; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.form-submit { width:100%; margin-top:10px; border:0; }.form-feedback { min-height:18px; margin:12px 0 0; color:var(--moss); font-size:12px; }.form-feedback.is-error { color:var(--clay); }.form-privacy { margin:14px 0 0; color:rgba(31,27,24,.52); font-size:10px; }
.visit-section { display:grid; grid-template-columns:.75fr 1fr; gap:8vw; background:var(--brown); color:var(--paper); }.visit-section .eyebrow { color:#c7b9a6; }.visit-section h2 { color:var(--paper); }.visit-section h2 i { color:#e1a66b; }.visit-details { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(243,235,221,.25); }.visit-card { display:flex; flex-direction:column; min-height:210px; padding:22px; background:var(--brown); }.visit-card span { margin-bottom:auto; color:#c7b9a6; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.visit-card strong { font:22px/1.08 var(--serif); font-weight:400; }.visit-card small { margin-top:18px; color:#c7b9a6; font-size:11px; }.visit-card-note { background:var(--moss); }.visit-card-note span,.visit-card-note small { color:#d2d7c7; }.site-footer { display:flex; justify-content:space-between; gap:24px; padding:18px 5vw 26px; background:var(--brown); color:#c7b9a6; font-size:10px; }
.mobile-sticky { display:none; }
@media (max-width:900px) { section { padding:76px 6vw; }.hero { grid-template-columns:1fr; gap:50px; min-height:auto; }.hero-art { min-height:480px; border-radius:150px 150px 22px 22px; }.split-heading,.mood-section,.space-section,.reserve-section,.visit-section { grid-template-columns:1fr; gap:45px; }.mood-intro { margin-left:0; }.mood-result { max-width:520px; }.space-photo { min-height:420px; }.menu-grid { grid-template-columns:repeat(2,1fr); }.menu-card:nth-child(3) { border-left:0; border-top:1px solid rgba(243,235,221,.22); }.menu-card:nth-child(4) { border-top:1px solid rgba(243,235,221,.22); }.visit-details { max-width:650px; } }
@media (max-width:620px) { .concept-bar { padding:8px 6vw; font-size:9px; }.concept-bar span { display:block; margin:4px 0 0; }.site-header { padding:18px 6vw; }.desktop-nav { display:none; }.nav-cta { font-size:11px; }.hero { padding-top:62px; }.hero h1 { font-size:clamp(54px,16vw,80px); }.hero-lede { font-size:14px; }.hero-note { align-items:flex-start; flex-wrap:wrap; margin-top:35px; }.hero-art { min-height:380px; }.cup { bottom:110px; transform:translateX(-50%) scale(.82); }.cup-shadow { bottom:84px; }.menu-grid { grid-template-columns:1fr; }.menu-card { min-height:390px; border-left:0; border-top:1px solid rgba(243,235,221,.22); }.menu-card:first-child { border-top:0; }.menu-card:nth-child(3) { border-top:1px solid rgba(243,235,221,.22); }.menu-illustration { height:155px; }.mood-result { grid-template-columns:1fr; }.mood-result span:last-child { grid-column:auto; }.space-photo { min-height:320px; }.space-stamp { font-size:15px; }.form-row { grid-template-columns:1fr; gap:0; }.booking-form { padding:22px; }.visit-details { grid-template-columns:1fr; }.visit-card { min-height:170px; }.site-footer { flex-direction:column; padding-bottom:85px; }.mobile-sticky { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr 1fr; padding:9px 6vw calc(9px + env(safe-area-inset-bottom)); background:rgba(31,27,24,.96); }.mobile-sticky a { padding:10px; color:var(--paper); font-size:11px; text-align:center; text-decoration:none; }.mobile-sticky a + a { background:var(--clay); border-radius:999px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }