/* Emil design engineering: deliberate ambience, immediate functional feedback. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}
.lucide-icon{width:20px;height:20px;display:inline-block;flex:0 0 auto;background:currentColor;-webkit-mask:var(--lucide-mask) center/contain no-repeat;mask:var(--lucide-mask) center/contain no-repeat}
.lucide-map-pin{--lucide-mask:url('assets/lucide/map-pin.svg')}.lucide-clock-3{--lucide-mask:url('assets/lucide/clock-3.svg')}.lucide-coffee{--lucide-mask:url('assets/lucide/coffee.svg')}.lucide-navigation{--lucide-mask:url('assets/lucide/navigation.svg')}.lucide-phone{--lucide-mask:url('assets/lucide/phone.svg')}.lucide-sun{--lucide-mask:url('assets/lucide/sun.svg')}.lucide-paw-print{--lucide-mask:url('assets/lucide/paw-print.svg')}.lucide-book-open{--lucide-mask:url('assets/lucide/book-open.svg')}
.info-label,.hours-heading,.faq-title{display:flex;align-items:center;gap:8px}
.info-label .lucide-icon{width:15px;height:15px;color:var(--ink)}
.menu-heading .eyebrow{justify-content:center}.menu-heading .eyebrow .lucide-icon{width:17px;height:17px;color:var(--accent)}
.visit-address{display:grid;grid-template-columns:25px 1fr;gap:13px}.visit-address>.lucide-icon{width:21px;height:21px;margin-top:7px;color:var(--accent)}
.hours-heading{font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;margin-top:28px}.hours-heading .lucide-icon{width:17px;height:17px;color:var(--accent)}
.visit-actions .button,.visit-actions .phone{gap:12px}.visit-actions .lucide-icon{width:18px;height:18px}.visit-actions .phone .lucide-icon{color:var(--accent)}
.faq-title{gap:13px}.faq-title .lucide-icon{width:20px;height:20px;color:var(--accent)}
.hero{overflow:hidden}
.hero-image{transform:scale(1.035);transform-origin:53% 58%;animation:room-drift 18s var(--ease-in-out) -5s infinite alternate}
.hero-seal{position:absolute;right:max(48px,calc((100vw - 1280px)/2));top:calc(var(--header-height) + 40px);width:176px;height:176px;color:var(--ink);background:var(--accent);border-radius:50%;pointer-events:none}
.seal-ring{width:100%;height:100%;display:block;animation:coffee-orbit 24s linear infinite}
.seal-ring text{fill:currentColor;font:12px Outfit,Arial,sans-serif;letter-spacing:2px}
.seal-cup{position:absolute;width:76px;height:76px;left:50%;top:50%;transform:translate(-50%,-50%)}
.steam{transform-box:fill-box;transform-origin:center;animation:coffee-steam 3.8s var(--ease-in-out) infinite}
.steam-two{animation-delay:-1.25s}
.steam-three{animation-delay:-2.5s}
.brand-ribbon{overflow:hidden;padding-block:28px;border-block:1px solid var(--line);background:var(--paper);user-select:none;pointer-events:none}
.ribbon-track{width:max-content;display:flex;animation:brand-flow 26s linear infinite}
.ribbon-group{display:flex;align-items:center;flex-shrink:0;gap:46px;padding-right:46px}
.ribbon-group>span{font-family:var(--serif);font-size:clamp(40px,5.4vw,78px);line-height:1.15;letter-spacing:-.045em;white-space:nowrap}
.coffee-bean{position:relative;display:block;width:23px;height:34px;background:var(--accent);border-radius:50%;transform:rotate(28deg);flex-shrink:0}
.coffee-bean::after{content:'';position:absolute;inset:4px 7px;border-left:1.5px solid var(--ink);border-radius:50%;transform:rotate(-12deg)}
.feature-heading{display:flex;align-items:center;justify-content:space-between;gap:42px}
.feature-heading h2{max-width:940px}
.brunch-coaster{width:144px;height:144px;flex-shrink:0;display:grid;place-items:center;pointer-events:none}
.coaster-face{position:relative;display:grid;place-items:center;width:124px;height:124px;background:var(--accent);color:var(--ink);border-radius:50%;animation:coaster-float 5.5s var(--ease-in-out) -1s infinite}
.coaster-face::before{content:'';position:absolute;inset:7px;border:1px solid currentColor;border-radius:inherit;opacity:.65}
.coaster-face>span{text-align:center;font:27px/.93 var(--serif);letter-spacing:-.04em}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.desktop-nav a{position:relative;text-decoration:none!important}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-out)}
.desktop-nav a[aria-current="location"]::after{transform:scaleX(1)}
.button{transition:transform 140ms var(--ease-out),background-color 180ms ease,box-shadow 180ms ease}
.button .icon,.icon-button .icon,.socials .icon{transition:transform 180ms var(--ease-out)}
.icon-button,.socials a{transition:transform 140ms var(--ease-out),background-color 180ms ease,border-color 180ms ease}
.button:active,.icon-button:active,.socials a:active{transform:scale(.97)}
.gallery-trigger img{transition:transform 450ms var(--ease-out)}
.enlarge{transition:transform 200ms var(--ease-out),background-color 180ms ease}
.enlarge .icon{transition:transform 220ms var(--ease-out)}
.gallery-trigger:active .enlarge{transform:scale(.93)}
.gallery-trigger:focus-visible .enlarge{background:var(--accent)}
.faq-list summary .icon{transition:transform 220ms var(--ease-out)}
.lightbox-stage{overflow:hidden;touch-action:pan-y pinch-zoom}
.lightbox-stage img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:pan-y pinch-zoom}
.photo-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;background:#20211f;color:var(--paper);font-size:14px;pointer-events:none}
.menu-stage img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.menu-stage.is-panning{cursor:grabbing}
.mobile-actions{transform-origin:50% 100%}
/* Ambient layers run only while their section is visible. */
.ambient-loop{animation-play-state:paused}
.is-motion-visible .ambient-loop{animation-play-state:running}
.page-hidden .ambient-loop,.dialog-open .ambient-loop{animation-play-state:paused}
@keyframes room-drift{from{transform:scale(1.025) translate3d(-.35%,0,0)}to{transform:scale(1.085) translate3d(.65%,-.4%,0)}}
@keyframes coffee-orbit{to{transform:rotate(360deg)}}
@keyframes coffee-steam{0%{opacity:0;transform:translate3d(-2px,5px,0) scaleY(.8)}30%{opacity:.95}75%{opacity:.7}100%{opacity:0;transform:translate3d(3px,-9px,0) scaleY(1.15)}}
@keyframes brand-flow{to{transform:translate3d(-50%,0,0)}}
@keyframes coaster-float{0%,100%{transform:translate3d(0,6px,0) rotate(-9deg)}50%{transform:translate3d(0,-10px,0) rotate(7deg)}}
@media(hover:hover) and (pointer:fine){
 .desktop-nav a:hover::after{transform:scaleX(1)}
 .button:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgb(41 62 52 / .09)}
 .button:hover .icon{transform:translateX(3px)}
 .button:active{transform:translateY(0) scale(.97);box-shadow:none}
 .text-link:hover .icon{transform:translate(3px,-3px)}
 .socials a:hover .icon{transform:translateY(-2px) rotate(-5deg)}
 .gallery-trigger:hover img,.menu-card:hover .portrait img{transform:scale(1.055)}
 .menu-card .portrait img{transition:transform 550ms var(--ease-out)}
 .gallery-trigger:hover .enlarge{background:var(--accent);transform:translate(-2px,-2px)}
 .gallery-trigger:hover .enlarge .icon{transform:rotate(90deg)}
 .menu-stage{cursor:grab}
 .menu-stage.is-panning{cursor:grabbing}
}
/* Keyboard actions are immediate; ambient decoration remains independent. */
html[data-input="keyboard"]{scroll-behavior:auto}
html[data-input="keyboard"] :is(.button,.button .icon,.icon-button,.socials a,.socials .icon,.text-link .icon,.enlarge,.enlarge .icon,.faq-list summary .icon){transition:none}
html[data-input="keyboard"] .desktop-nav a::after{transition:none}
@media(min-width:901px){
 .brand-ribbon{padding-block:20px}
 .ribbon-group{min-width:100vw;justify-content:space-around;gap:28px;padding-right:28px}
 .ribbon-group>span{font-size:clamp(36px,3vw,44px)}
 .coffee-bean{width:15px;height:23px}
 .coffee-bean::after{inset:3px 5px}
}
@media(max-width:1100px){.hero-seal{right:32px;width:156px;height:156px}.feature-heading{gap:28px}.brunch-coaster{width:116px;height:116px}.coaster-face{width:106px;height:106px}.coaster-face>span{font-size:24px}}
@media(max-width:639px){
 .hero-seal{right:20px;top:calc(var(--header-height) + 24px);width:126px;height:126px}
 .seal-cup{width:56px;height:56px}.seal-ring text{font-size:12px}
 .brand-ribbon{padding-block:23px}.ribbon-group{gap:27px;padding-right:27px}.ribbon-group>span{font-size:44px}.coffee-bean{width:16px;height:25px}.coffee-bean::after{inset:3px 5px}
 .feature-heading{gap:18px}.feature-heading h2{font-size:41px;max-width:270px}.brunch-coaster{width:90px;height:104px}.coaster-face{width:86px;height:86px}.coaster-face>span{font-size:21px}.coaster-face::before{inset:5px}
 .reading-progress{height:2px}
 .menu-heading .eyebrow{justify-content:flex-start}.visit-address{grid-template-columns:22px 1fr;gap:10px}.visit-address>.lucide-icon{width:19px;height:19px}.hours-heading{margin-top:24px}.faq-title{gap:11px}.faq-title .lucide-icon{width:19px;height:19px}
}
@media(max-height:640px){.hero-seal{display:none}}
@media(max-width:359px){.feature-heading{gap:12px}.feature-heading h2{font-size:36px}.brunch-coaster{width:76px}.coaster-face{width:72px;height:72px}.coaster-face>span{font-size:18px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-image{transform:none}
 .ribbon-track{width:100%;transform:none;display:block}
 .ribbon-group{justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:0 20px}
 .ribbon-group>span{font-size:clamp(25px,3vw,44px);white-space:normal}
 .ribbon-group+.ribbon-group{display:none}
 .coaster-face{transform:rotate(-5deg)}
 .steam{opacity:.65}
 .button:hover,.button:hover .icon,.text-link:hover .icon,.button:active,.socials a:active,.socials a:hover .icon,.gallery-trigger:hover img,.menu-card:hover .portrait img,.gallery-trigger:hover .enlarge,.gallery-trigger:hover .enlarge .icon,.gallery-trigger:active .enlarge,.icon-button:active{transform:none}
}