@font-face{font-family:Fraunces;src:url('assets/fonts/fraunces.woff2?v=1af996e519') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans.woff2?v=5a6a41796b') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-600.woff2?v=2c42d2011a') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Caveat;src:url('assets/fonts/caveat.woff2?v=c8071584ab') format('woff2');font-weight:500;font-display:swap}
:root{--cream:#f3ebda;--paper:#f3e5cc;--brown:#4b3024;--sage:#657149;--content:1040px;--serif:Fraunces,Georgia,serif;--sans:'DM Sans','Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;color:var(--brown);background:var(--cream);font:400 17px/1.65 var(--sans)}h1,h2,h3,h4,p,figure{margin:0}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #b9802e;outline-offset:5px}h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-.04em}.skip-link{position:fixed;top:-80px;left:16px;background:var(--cream);padding:10px 18px;z-index:50}.skip-link:focus{top:10px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 28px;background:var(--brown);color:var(--cream);border:1px solid var(--brown);border-radius:30px;text-decoration:none;font-size:16px;font-weight:600;line-height:1.4;transition:background .2s,transform .25s,box-shadow .25s}.button:hover{background:#67412c;transform:translateY(-3px);box-shadow:0 5px 0 #4b302422}.button:active{transform:translateY(0)}
.section-wrap{width:min(var(--content),calc(100% - 64px));margin:auto}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;line-height:1.5;margin-bottom:16px}.section-heading{text-align:center;margin-bottom:44px}.section-heading h2{font-size:clamp(48px,5.5vw,72px);margin-bottom:16px}.section-heading>p:last-child{font-size:19px;letter-spacing:-.015em}.light-heading{color:#fff8e9;text-shadow:0 1px 3px #27301966}
/* The panel tile is cut from the phone/tablet artwork, so drawn at full width its grooves continue the panels above. */
main{position:relative;isolation:isolate;background:var(--sage) url('assets/panel-tile.webp?v=cb439d1421') left top/100% auto repeat}
/* Keep the original rail, sunlight and plants in one image; fade only its lower panels. */
.room-stage{position:relative}.hero-wall{position:relative;min-height:33.333vw}.hero-wall:before{display:none}
.site-header{height:110px;width:min(1000px,calc(100% - 440px));margin-left:clamp(260px,20vw,380px);display:flex;align-items:center;gap:28px;position:relative}.brand{width:146px;display:block;flex-shrink:0}.brand img{width:100%;height:auto}.main-nav{display:flex;gap:36px;align-items:center;margin-left:auto}.main-nav a{position:relative;text-decoration:none;font-size:16px;padding:8px 0;white-space:nowrap}.main-nav a:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--brown);transform:scaleX(0);transform-origin:left;transition:transform .25s}.main-nav a:hover:after{transform:scaleX(1)}.instagram-link{display:flex;align-items:center;gap:9px;text-decoration:none;border:1px solid #4b302466;border-radius:30px;padding:9px 16px;font-size:15px;transition:background .2s,transform .25s}.instagram-link:hover{background:#fff8e966;transform:rotate(-2deg)}.instagram-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.instagram-link .icon-dot{fill:currentColor;stroke:none}
.hero{width:min(920px,calc(100% - 430px));margin-left:clamp(260px,20vw,380px);padding:32px 0 68px;position:relative}.hero h1{font-size:clamp(76px,7.4vw,110px);line-height:.99;letter-spacing:-.055em;margin-bottom:24px}.hero p{font-size:19px;line-height:1.6;margin-bottom:26px;max-width:750px}.mobile-break{display:none}.panelled{background:transparent}.menu-section{padding:60px 0 76px;position:relative}
/* Cream boards with the cafe's fine outline, without wooden frames. */
.menu-boards{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}.paper{background:var(--paper)}.menu-board{position:relative;background:var(--paper);padding:11px;border:1px solid #dfdccf;box-shadow:3px 5px 9px #26301940}.menu-board:after{content:'';position:absolute;inset:8px;border:1px solid #4b302459;pointer-events:none}.menu-board .paper{padding:29px 25px 30px;height:100%}.menu-board h3{font-size:36px;margin-bottom:28px;text-align:center;letter-spacing:-.035em}.drinks-list{margin:0;font-size:16px}.drinks-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:9px 0;border-bottom:1px solid #4b302415;align-items:baseline}.drinks-list dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:15px}.drinks-list small{display:block;font-size:13px;line-height:1.5;color:#75695f;margin-top:3px}.menu-detail{font-size:13px;line-height:1.75;margin-top:23px;color:#66564a}.menu-detail strong{font-weight:600;font-size:14px;color:var(--brown)}.menu-additions{margin-top:28px;padding:24px 35px;box-shadow:3px 5px 9px #26301940}.menu-additions h3{font-size:25px;text-align:center;margin-bottom:14px}.menu-additions .drinks-list{display:grid;grid-template-columns:1fr .8fr 1.15fr;gap:32px;font-size:14px}.menu-additions .drinks-list>div{border:0;gap:8px}.menu-additions .drinks-list dd{font-size:14px}.menu-footnote{text-align:center;color:#fff8e9;margin:30px auto 0;font-size:14px;max-width:750px}
.cream-section{background:var(--cream);background-image:radial-gradient(ellipse at 80% 30%,#ffffff60,transparent 70%)}.our-nook{padding:100px 0 105px;border-top:1px solid #fff5dc}.nook-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:85px;align-items:center}.nook-story h2{font-size:clamp(44px,4.8vw,64px);margin-bottom:28px}.nook-story>p:not(.eyebrow){font-size:17px;line-height:1.9;margin-bottom:21px}.nook-story .button{margin-top:9px}.nook-photo-stack{position:relative;padding:0 14px 30px}.polaroid{display:block;background:#f5ecd8;padding:14px 14px 10px;box-shadow:6px 10px 20px #26301c3b;text-align:center;border:0;text-decoration:none}.polaroid>span,.polaroid figcaption{display:block;font-family:Caveat,cursive;font-weight:500;font-size:29px;line-height:1.25;margin-top:13px}.story-photo{transform:rotate(-4deg);max-width:385px;margin:auto;animation:photo-sway 9s ease-in-out infinite}.story-photo img{height:390px;width:100%;object-fit:cover;object-position:center 46%}.brand-stamp{position:absolute;bottom:-10px;right:-20px;width:138px;height:138px;background:var(--cream);border-radius:50%;padding:5px;box-shadow:3px 5px 12px #4b302426;transform:rotate(12deg);transition:transform .55s cubic-bezier(.2,.8,.2,1)}.nook-photo-stack:hover .brand-stamp{transform:rotate(-12deg) scale(1.05)}
.visit-section{padding:82px 0 95px}.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px}.visit-note{padding:38px;box-shadow:3px 5px 9px #26301940}.visit-note h3{font-size:40px;margin-bottom:25px}.visit-note address{font-size:17px;font-style:normal;line-height:1.85;margin-bottom:24px}.visit-note address strong{font-weight:600}.hours-note{font-size:13px;line-height:1.7;max-width:300px;margin-top:22px}.map-frame{display:flex;flex-direction:column;padding:12px;min-height:420px;box-shadow:3px 5px 9px #26301940}.map-frame iframe{width:100%;flex:1;min-height:340px;border:0;background:var(--cream)}.map-frame>a{display:block;text-align:center;font-size:13px;padding:12px 8px 2px}.visit-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:64px}.gallery-photo{width:100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transform:rotate(-3deg)}.gallery-photo:nth-child(2){transform:rotate(3deg)}.gallery-photo:nth-child(3){transform:rotate(-1deg)}.gallery-photo:hover,.gallery-photo:focus-visible{transform:translateY(-9px) rotate(0);box-shadow:6px 18px 24px #26301c55}.gallery-photo img{width:100%;height:290px;object-fit:cover}.gallery-photo:first-child img{object-position:center 52%}.gallery-photo:nth-child(2) img{object-position:center 48%}.gallery-photo:nth-child(3) img{object-position:center 54%}.gallery-photo>span{font-size:26px;min-height:64px;display:flex;align-items:center;justify-content:center}
.site-footer{text-align:center;padding:48px 24px 30px}.footer-brand{width:144px;margin:0 auto 15px}.site-footer p{font-size:14px;margin-bottom:12px}.site-footer>a:not(.brand){font-size:14px}.site-footer small{display:block;font-size:11px;margin-top:29px;opacity:.75}.photo-dialog{padding:44px 20px 20px;background:var(--cream);border:0;max-width:min(900px,92vw);max-height:92dvh;overflow:auto;color:var(--brown);box-shadow:0 20px 80px #0009}.photo-dialog::backdrop{background:#192519ce;backdrop-filter:blur(4px)}.photo-dialog figure{display:flex;flex-direction:column;align-items:center}.photo-dialog img{max-height:74dvh;width:auto;object-fit:contain}.photo-dialog figcaption{font-family:Caveat,cursive;font-size:28px;text-align:center;margin-top:15px}.dialog-close{position:absolute;right:7px;top:3px;border:0;background:transparent;font-size:30px;width:40px;height:40px;line-height:1}.photo-dialog[open]{animation:photo-open .25s ease-out}.reveal{opacity:0;translate:0 18px;transition:opacity .7s,translate .7s}.reveal.arrived{opacity:1;translate:0 0}.menu-board:nth-child(2){transition-delay:.12s}
@keyframes photo-sway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}@keyframes photo-open{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.hero-actions .instagram-link{display:inline-flex;margin:0;position:static;grid-area:auto;padding:12px 22px;min-height:50px;border:1px solid #4b3024;background:#f5e9d2ed;box-shadow:0 2px 8px #4b302413;font-size:16px;font-weight:600}
.hero-actions .instagram-link span{display:inline}.hero-actions .instagram-link:hover{background:#fff2db;transform:translateY(-3px)}
.menu-board{border-color:#ddcdb1;background:#f7eddb}.menu-board .paper,.menu-additions{background:linear-gradient(135deg,#faf3e6,#f4e8d2)}
.opening .cafe-scene{animation:welcome-room 1.4s ease-out both}
.opening .site-header .brand{animation:welcome-copy .8s ease-out .1s both}
.opening .main-nav{animation:welcome-copy .8s ease-out .2s both}
.opening .hero h1{animation:welcome-copy .9s cubic-bezier(.2,.7,.2,1) .2s both}
.opening .hero>p{animation:welcome-copy .85s ease-out .35s both}
.opening .hero-actions{animation:welcome-copy .85s ease-out .5s both}
@keyframes welcome-room{from{filter:brightness(.92)}to{filter:brightness(1)}}
@keyframes welcome-copy{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(min-width:1700px){.site-header,.hero{margin-left:max(340px,calc((100% - 1000px)/2))}.hero-wall{min-height:600px}.hero{padding-top:40px}}
@media(min-width:1151px) and (max-width:1535px){.site-header{height:90px}.hero{padding:20px 0}.hero h1{font-size:86px}}
@media(min-width:751px) and (max-width:1150px){main:before{height:1040px;background-size:1560px 1040px;background-position:left top}.hero-wall{min-height:540px}}
@media(max-width:1150px){.site-header{width:calc(100% - 340px);margin-left:230px;gap:24px}.main-nav{gap:26px}.instagram-link{padding:10px;border:0}.instagram-link span{display:none}.hero{margin-left:230px;width:calc(100% - 340px)}.hero h1{font-size:86px}.nook-layout{gap:45px}.menu-boards{gap:28px}.menu-board .paper{padding:25px 18px}.drinks-list{font-size:15px}.drinks-list dd{font-size:14px}.menu-additions{padding:22px 26px}.menu-additions .drinks-list{gap:22px}.visit-note{padding:30px}.gallery-photo img{height:255px}}
@media(max-width:850px){.hero-wall{min-height:530px}.site-header{margin-left:170px;width:calc(100% - 225px);gap:16px}.brand{width:122px}.main-nav{gap:22px}.main-nav a{font-size:14px}.hero{margin-left:170px;width:calc(100% - 225px);padding-top:40px}.hero h1{font-size:76px}.hero p{font-size:17px;max-width:470px}.section-wrap{width:calc(100% - 44px)}.menu-board .paper{padding:23px 13px}.menu-board h3{font-size:32px}.drinks-list{font-size:14px}.drinks-list>div{gap:7px}.drinks-list dd{font-size:13px}.menu-additions .drinks-list{gap:18px;grid-template-columns:1fr 1fr 1fr}.menu-additions .drinks-list>div{display:block}.menu-additions dd{margin-top:7px}.nook-story h2{font-size:46px}.nook-story>p:not(.eyebrow){font-size:16px}.story-photo img{height:330px}.brand-stamp{width:112px;height:112px;right:-10px}.visit-grid{gap:22px}.visit-note h3{font-size:34px}.visit-note address{font-size:15px}.visit-gallery{gap:20px}.gallery-photo{padding:11px}.gallery-photo img{height:225px}.gallery-photo>span{font-size:24px}}
@media(max-width:750px){main:before{display:none}.hero-wall{min-height:540px;background:var(--cream)}.hero-wall:before{display:block;content:'';position:absolute;inset:0 0 auto;height:120px;background:none;z-index:-1;pointer-events:none}.hero-wall:after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:14px;background:linear-gradient(#829168,#63764e 28%,#536240 54%,#7b875a 66%,#596844);box-shadow:0 3px 4px #25301960}.site-header{width:calc(100% - 40px);margin:0 20px;height:136px;display:grid;grid-template-columns:1fr auto;grid-template-rows:78px 42px;gap:0}.brand{width:120px;margin-left:62px}.instagram-link{grid-row:1;grid-column:2;padding:8px;border:1px solid #4b302466;background:var(--cream)}.main-nav{grid-column:1/-1;grid-row:2;margin:0;justify-content:center;gap:34px}.main-nav a{font-size:15px}.hero{width:calc(100% - 52px);margin:0 26px;padding:39px 0 54px}.hero h1{font-size:clamp(57px,12.8vw,82px);line-height:1.01;margin-bottom:25px}.hero p{font-size:16px;line-height:1.8;margin-bottom:25px;max-width:420px}.mobile-break{display:block}.button{min-height:48px;font-size:15px;padding:12px 25px}.section-wrap{width:calc(100% - 40px)}.section-heading{margin-bottom:32px}.section-heading h2{font-size:51px}.section-heading>p:last-child{font-size:17px}.eyebrow{font-size:10px;letter-spacing:.16em}.menu-section{padding:58px 0 55px}.menu-boards{grid-template-columns:1fr;gap:28px;max-width:470px;margin:auto}.menu-board .paper{padding:27px 19px 30px}.menu-board h3{font-size:35px;margin-bottom:22px}.drinks-list{font-size:15px}.drinks-list dd{font-size:14px}.drinks-list>div{padding:10px 0;gap:12px}.menu-detail{font-size:13px}.menu-additions{max-width:470px;margin:24px auto 0;padding:24px 30px}.menu-additions .drinks-list{display:block}.menu-additions .drinks-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid #4b302415;padding:13px 0}.menu-additions .drinks-list>div:last-child{border:0}.menu-additions dd{margin:0}.menu-additions h3{font-size:28px;margin-bottom:7px}.menu-footnote{font-size:13px;margin:25px 13px 0}.our-nook{padding:62px 0 70px}.nook-layout{grid-template-columns:1fr;gap:43px}.nook-story{max-width:470px;margin:auto}.nook-story h2{font-size:46px}.nook-story>p:not(.eyebrow){font-size:16px}.nook-photo-stack{width:calc(100% - 30px);max-width:360px;margin:auto;padding-bottom:22px}.story-photo img{height:340px}.brand-stamp{right:-8px;bottom:-8px;width:110px;height:110px}.visit-section{padding:62px 0 65px}.visit-grid{grid-template-columns:1fr;gap:26px;max-width:470px;margin:auto}.visit-note{padding:32px}.visit-note h3{font-size:37px}.visit-note address{font-size:16px}.map-frame{min-height:340px}.map-frame iframe{min-height:290px}.visit-gallery{grid-template-columns:1fr;gap:33px;max-width:350px;margin:46px auto 0;padding:0 14px}.gallery-photo{padding:14px}.gallery-photo img{height:310px}.gallery-photo>span{font-size:28px;min-height:42px}.site-footer{padding:40px 20px 28px}.site-footer p,.site-footer>a:not(.brand){font-size:13px}.footer-brand{margin:0 auto 15px}}
@media(min-width:751px) and (max-width:1150px){.site-header,.hero{margin-left:250px;width:calc(100% - 310px)}}
@media(min-width:751px) and (max-width:850px){.site-header{height:90px}.hero{padding:20px 0 25px;width:calc(100% - 295px)}.hero h1{font-size:68px}.hero p{font-size:16px;line-height:1.6}}
@media(max-width:750px){.hero-wall{isolation:isolate}.hero-actions{gap:12px}.hero-actions .instagram-link{padding:12px 20px;min-height:48px;font-size:15px}}
@media(max-width:370px){.hero h1{font-size:54px}.hero p{font-size:15px}.brand{margin-left:43px;width:115px}.menu-board .paper{padding:25px 13px}.drinks-list{font-size:14px}.drinks-list dd{font-size:13px}.main-nav{gap:28px}}
/* The café scene stays opaque and ends at an architectural section boundary. */
@media(min-width:751px){main:before{display:none}.hero-wall{background:none}.menu-section{background:transparent}.cafe-scene{border-bottom:12px solid #e2d4b7;box-shadow:inset 0 -5px 8px #26301938}.main-nav{margin-left:clamp(60px,13vw,220px);margin-right:auto;gap:30px}}
@media(min-width:751px) and (max-width:1150px){.main-nav{margin-left:auto;margin-right:20px;gap:22px}.hero-wall{min-height:520px}}
.nook-photo-stack{isolation:isolate}.nook-photo-stack:before{content:'';position:absolute;inset:24px 5px 3px 22px;background:#657149;border:1px solid #4b30242e;box-shadow:8px 14px 22px #34281926;transform:rotate(3deg);z-index:-1}.story-photo{background:#fff5e1;box-shadow:0 2px 3px #30231826,9px 18px 26px #30231855;border:1px solid #4b302422}.brand-stamp{border:1px solid #4b30242b;box-shadow:4px 7px 13px #3023183b}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.reveal{opacity:1;translate:none}}
/* Keep navigation in the clear wall area immediately left of the hanging leaves. */
@media(min-width:1151px){.site-header{width:auto;margin-right:20%}.main-nav{margin-left:auto;margin-right:0}}
@media(min-width:751px) and (max-width:1150px){.site-header{width:auto;margin-right:60px}.main-nav{margin-left:auto;margin-right:0}}
.drink-extras{margin-top:24px;padding-top:22px;border-top:1px solid #4b302430}.drink-extras h4{font-family:var(--serif);font-size:24px;line-height:1.25;letter-spacing:-.025em;margin-bottom:12px}.drink-extras .drinks-list{font-size:14px}.drink-extras .drinks-list dd{font-size:14px}
.food-menu{position:relative;padding:34px 38px 30px;border:1px solid #ddcdb1}.food-menu:after{content:'';position:absolute;inset:8px;border:1px solid #4b302459;pointer-events:none}.food-menu>h3{font-size:36px;margin-bottom:28px}.food-columns{display:grid;grid-template-columns:1fr 1fr;gap:44px}.food-category h4{font-family:var(--serif);font-size:23px;line-height:1.25;letter-spacing:-.025em;margin-bottom:6px}.food-list{margin:0}.food-list>div{padding:14px 0;border-bottom:1px solid #4b30241c;break-inside:avoid}.food-list>div:last-child{border-bottom:0}.food-list dt{font-size:17px;font-weight:600;line-height:1.4}.food-list dd{margin:4px 0 0;font-size:14px;line-height:1.6;color:#66564a}
.food-list dt{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.food-list dt>span:first-child{min-width:0}.food-price{flex-shrink:0;white-space:nowrap;font-size:15px;font-weight:400;font-variant-numeric:tabular-nums}
@media(min-width:751px) and (max-width:1280px){.hero-wall{min-height:520px}}
@media(max-width:750px){.food-menu{padding:30px 28px 25px}.food-menu>h3{font-size:32px;margin-bottom:24px}.food-columns{grid-template-columns:1fr;gap:28px}.food-category h4{font-size:23px}.food-list dt{font-size:16px}.food-list>div{padding:13px 0}}
/* Extend only the empty floor; furniture and leaves keep their complete silhouettes. */
@media(min-width:751px){.cafe-scene{position:relative;isolation:isolate;background:#c6a481}.cafe-scene:before{content:'';position:absolute;left:0;top:0;width:100%;aspect-ratio:2/3;min-height:1728px;z-index:-1;pointer-events:none}.menu-footnote{color:var(--brown)}}
/* A portrait composition keeps both café details visible without stretching the photo. */
@media(max-width:750px){
 .cafe-scene{position:relative;isolation:isolate}
 .cafe-scene:before{content:'';position:absolute;inset:0 0 auto;aspect-ratio:2/3;z-index:-1;mask-image:linear-gradient(#000 78%,transparent 100%);pointer-events:none}
 .hero-wall{background:none;min-height:calc(108vw + 24px)}
 .hero-wall:before,.hero-wall:after{display:none}
 .site-header{height:120px;width:calc(100% - 40px);margin:0 20px;grid-template-columns:1fr;grid-template-rows:76px 44px;justify-items:center}
 .site-header .brand{width:120px;margin:0}
 .main-nav{width:auto;gap:28px;align-self:end}
 .hero{width:calc(100% - 48px);max-width:540px;margin:0 auto;padding:26px 0 36px}
 .hero h1{font-size:clamp(48px,13vw,76px);line-height:1.02;margin-bottom:20px}
 .hero p{font-size:16px;line-height:1.65;margin-bottom:20px}
 .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:350px}
 .hero-actions .button,.hero-actions .instagram-link{min-height:48px;padding:12px 10px;font-size:14px;white-space:nowrap;justify-content:center}
 .hero-actions .instagram-link{gap:7px}
 .menu-section{padding-top:44px}
}
@media(min-width:501px) and (max-width:750px){.site-header{height:150px;grid-template-rows:90px 60px}.hero{padding-top:40px}}
@media(max-width:370px){.site-header{height:96px;grid-template-rows:60px 36px}.site-header .brand{width:106px}.main-nav a{font-size:14px}.hero{padding-top:20px}.hero h1{font-size:44px;margin-bottom:14px}.hero p{font-size:15px;line-height:1.55;margin-bottom:14px}.hero-actions{grid-template-columns:1.15fr 1fr;gap:8px}.hero-actions .button,.hero-actions .instagram-link{min-height:44px;font-size:13px;padding:10px 8px}}
/* Tablets show the complete width of the original room instead of a desktop crop. */
@media(min-width:751px) and (max-width:1100px){
 .cafe-scene:before{min-height:0;background-size:100% auto;background-position:center top}
 .site-header{height:76px;margin-left:20%;margin-right:20%;width:auto;gap:20px}
 .site-header .brand{width:122px}
 .main-nav{gap:22px;margin-left:auto;margin-right:0}
 .main-nav a{font-size:14px}
 .hero-wall{min-height:calc(33.333vw + 104px)}
 .hero{margin-left:20%;width:60%;padding:12px 0 90px}
 .hero h1{font-size:clamp(52px,6.7vw,72px);line-height:1.02;margin-bottom:16px}
 .hero p{font-size:16px;line-height:1.6;margin-bottom:18px}
 .hero-actions{position:absolute;top:calc(33.333vw - 56px);left:0;gap:12px}
 .hero-actions .button,.hero-actions .instagram-link{font-size:14px;min-height:46px;padding:11px 19px}
 .menu-section{padding-top:45px}
}
@media print{.cafe-scene:before{display:none}.cafe-scene{min-height:0;background:none;border:0;box-shadow:none}.hero-wall,.our-nook,.visit-section,.site-footer,.menu-footnote,.skip-link{display:none}main{background:white}main:before{display:none}.menu-section{background:white;color:#222;padding:0}.light-heading{color:#222;text-shadow:none}.menu-boards{gap:20px}.menu-board,.menu-additions{box-shadow:none}.section-wrap{width:100%}.drinks-list>div{break-inside:avoid}.reveal{opacity:1;translate:none}.photo-dialog{display:none}}
/* Art-directed café scene (v2). One image per size class; the menu always sits on the panels.
   Desktop scene geometry, as fractions of its drawn width --W: rail top .330, panels .361,
   skirting 1.016, floor 1.086, image bottom 1.2041. --W never drops below --W-min so the
   three-column menu fits between rail and skirting; a right-hand slice keeps the plants
   visible when the scene is wider than the window. */
@media screen and (min-width:1200px){
 main{background-size:max(68.2%,1282px) auto}  /* same plank width as the desktop scene (tile 63.6px vs scene 43.4px per 1024) */
 .cafe-scene{--W-min:1880px;--rail-gap:64px;container-type:inline-size;min-height:0;background:#c9a984}
 .cafe-scene>*,.cafe-scene:before{--W:max(100cqw,var(--W-min))}
 .cafe-scene:before{min-height:0;aspect-ratio:auto;height:calc(var(--W)*1.2041);background:url('assets/scene-desktop-right.webp?v=edd05e4b8a') right top/auto 100% no-repeat,url('assets/scene-desktop.webp?v=9fd630dc52') left top/var(--W) auto no-repeat;mask-image:none}
 .hero-wall{min-height:calc(var(--W)*.33);display:flex;flex-direction:column}
 .hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 0 var(--rail-gap)}
 .menu-section{min-height:calc(var(--W)*.8741);padding:calc(var(--W)*.031 + 34px) 0 0}
 .menu-section .section-wrap{width:min(1180px,calc(100% - 64px))}
 .section-heading{margin-bottom:36px}
 .menu-boards{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
 .food-menu{margin:0;padding:40px 30px 28px}
 .food-menu>h3{margin-bottom:18px;font-size:clamp(30px,2.5vw,36px)}
 .food-columns{grid-template-columns:1fr;gap:14px}
 .food-list>div{padding:10px 0}
 .menu-footnote{margin-top:22px}
 .menu-footnote,.cafe-scene .menu-footnote{color:#fff8e9;text-shadow:0 1px 3px #27301980}
 /* Keep the nav clear of the pothos, which sits at the right edge of the drawn scene. */
 .site-header{margin-right:max(20%,calc(var(--W)*.17 + 24px))}
}
/* Very large screens keep the composition and scale it up instead of spreading it out. */
@media screen and (min-width:2200px){html{zoom:1.17}}
@media screen and (min-width:2560px){html{zoom:1.36}}
@media screen and (min-width:3000px){html{zoom:1.6}}
@media screen and (min-width:3600px){html{zoom:1.9}}
/* Tablets: furniture-free wall (rail at .660W, panels from .695W) that hands over to the panel texture. */
@media screen and (min-width:751px) and (max-width:1199px){
 .cafe-scene{--rail-gap:48px;container-type:inline-size;min-height:0;background:transparent}
 .cafe-scene:before{min-height:0;height:auto;aspect-ratio:1024/1136;mask-image:linear-gradient(#000 70%,transparent)}
 .hero-wall{min-height:calc(100cqw*.66);display:flex;flex-direction:column}
 .site-header{height:84px;margin-left:16%;margin-right:23%;width:auto}
 .hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;margin-left:16%;width:68%;padding:20px 0 var(--rail-gap)}
 .hero-actions{position:static}
 .menu-section{padding:calc(100cqw*.035 + 34px) 0 70px}
 .menu-boards{grid-template-columns:1fr 1fr}
 .food-menu{grid-column:1/-1;margin:0}
 .cafe-scene .menu-footnote{color:#fff8e9;text-shadow:0 1px 3px #27301980}
}
.our-nook{overflow-x:clip}
/* The hero buttons keep the same gap above the panelling at every width: the cream area ends exactly
   at the rail (phone art: rail top at 1076/1024 of its width; tablet .66; desktop .33 of --W) and the copy sits on its floor. */
@media screen and (max-width:750px){
 .cafe-scene{--rail-gap:36px;container-type:inline-size}
 .hero-wall{min-height:calc(100cqw*1.0508);display:flex;flex-direction:column}
 .hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 0 var(--rail-gap)}
}
@media screen and (max-width:340px){.hero h1{font-size:40px}.hero p{font-size:14px}}
/* Phones and tablets: the hero wall is assembled from layers so its height follows the copy
   instead of the artwork's 1.05:1 proportions. Lamp and pothos are pinned to the top corners
   (size-capped), plain plaster fills the middle, the plant-over-plaster strip is pinned to the
   bottom (it ends at the rail top), and the rail and panels start the menu section.
   Ratios: lamp 330/280, pothos 720/324, rail-top strip 346/1024 of the width. */
@media screen and (max-width:1199px){
 .cafe-scene{background:transparent;container-type:inline-size}
 .cafe-scene:before{display:none}
 .hero-wall{
  --lamp-w:min(27.34cqw,230px);--pothos-w:min(31.64cqw,250px);
  min-height:max(calc(var(--pothos-w)*2.222 + 10px),calc(var(--lamp-w)*1.1786 + 29cqw));
  background:url('assets/hero-lamp.webp?v=4aa63a3f9d') left top/var(--lamp-w) auto no-repeat,
   url('assets/hero-pothos.webp?v=fa59760a8e') right top/var(--pothos-w) auto no-repeat,
   url('assets/hero-rail-top.webp?v=e85ec72405') left bottom/100% auto no-repeat,
   url('assets/hero-plaster.webp?v=5d1a99da83') left top/100% auto repeat-y}
 .menu-section{background:url('assets/hero-rail.webp?v=31d29d92c0') left top/100% auto no-repeat}
}
@media screen and (min-width:751px) and (max-width:1199px){.hero h1{font-size:clamp(60px,8.2vw,96px)}.hero p{font-size:17px}}
/* Phones: the hero copy starts just past the plant, which reaches 11.4% of the width above the rail. */
@media screen and (max-width:750px){.hero{width:auto;max-width:560px;margin-left:max(24px,calc(12cqw + 6px));margin-right:20px}}
/* Landscape phones: short screens. One-row header, lamp and pothos capped by the screen height, and the
   rail/panel wall drawn at --S (about 1.5x the screen height): the plant is its own piece on the left and the
   rail and panels repeat sideways from seamless 14-plank tiles, so the copy and buttons fit on the first screen. */
@media screen and (orientation:landscape) and (max-height:500px) and (max-width:1199px){
 main{--S:min(100vw,150svh);--tile:calc(var(--S)*.8701) auto;--tile-x:calc(var(--S)*.05176);
  background-image:url('assets/panel-tile-wrap.webp?v=1003e2c2ac');background-size:var(--tile);background-position:var(--tile-x) 0}
 .cafe-scene{--rail-gap:28px}
 .hero-wall{
  --lamp-w:min(27.34cqw,calc(100svh*.3));--pothos-w:min(31.64cqw,calc(100svh/2.6));
  min-height:max(calc(var(--pothos-w)*2.222 + 10px),calc(var(--lamp-w)*1.1786 + var(--S)*.29));
  background:url('assets/hero-lamp.webp?v=4aa63a3f9d') left top/var(--lamp-w) auto no-repeat,
   url('assets/hero-pothos.webp?v=fa59760a8e') right top/var(--pothos-w) auto no-repeat,
   url('assets/plant-top.webp?v=f89dc4040b') left bottom/calc(var(--S)*.3906) auto no-repeat,
   url('assets/rail-tile-top.webp?v=ddea513e44') var(--tile-x) bottom/var(--tile) repeat-x,
   url('assets/hero-plaster.webp?v=5d1a99da83') left top/100% auto repeat-y}
 .menu-section{background:url('assets/plant-bottom.webp?v=0362f2ec90') left top/calc(var(--S)*.3906) auto no-repeat,
   url('assets/rail-tile.webp?v=e0b0554467') var(--tile-x) top/var(--tile) repeat-x}
 .site-header{display:flex;height:64px;margin:0 24% 0 16%;width:auto;grid-template-columns:none;grid-template-rows:none;justify-items:normal}
 .site-header .brand{width:104px;margin:0}
 .main-nav{margin-left:auto;align-self:center;gap:22px}
 .main-nav a{font-size:14px}
 .hero{margin:0 24% 0 16%;width:auto;max-width:none;padding:8px 0 var(--rail-gap)}
 .hero h1{font-size:clamp(40px,12.5svh,60px);margin-bottom:10px}
 .hero p{font-size:15px;line-height:1.5;margin-bottom:14px}
 .mobile-break{display:none}
 .hero-actions{display:flex;max-width:none;gap:12px}
 .hero-actions .button,.hero-actions .instagram-link{min-height:44px;padding:10px 20px;font-size:14px}
}
/* Designer credit: one quiet line with the copyright; a small arrow slides in on hover */
.credit-sep{margin:0 .7em;opacity:.6}
.site-credit{color:inherit;text-decoration:none;white-space:nowrap}
.site-credit:after{content:'\2197';display:inline-block;margin-left:.25em;opacity:0;translate:-3px 0;transition:opacity .2s,translate .2s}
.site-credit:hover:after,.site-credit:focus-visible:after{opacity:1;translate:0 0}
/* Gallery hover: the cards keep their tilt; the photo zooms gently inside its frame and the card lifts a little */
.photo-frame{display:block;overflow:hidden}
.gallery-photo{--tilt:-3deg;transform:rotate(var(--tilt));transition:translate .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1)}
.gallery-photo:nth-child(2){--tilt:3deg}.gallery-photo:nth-child(3){--tilt:-1deg}
.gallery-photo:hover,.gallery-photo:focus-visible,.gallery-photo:active{transform:rotate(var(--tilt))}
.gallery-photo img{display:block;transition:scale .9s cubic-bezier(.2,.8,.2,1),filter .6s}
@media (hover:hover){
 .gallery-photo:hover,.gallery-photo:focus-visible{translate:0 -6px;box-shadow:5px 18px 28px #26301c47,0 2px 5px #26301c1f}
 .gallery-photo:hover img,.gallery-photo:focus-visible img{scale:1.05;filter:brightness(1.04)}
 .gallery-photo:active{translate:0 -3px;transition-duration:.15s}
}
@media (prefers-reduced-motion:reduce){.gallery-photo,.gallery-photo img{transition:none}.gallery-photo:hover,.gallery-photo:focus-visible{translate:none}.gallery-photo:hover img,.gallery-photo:focus-visible img{scale:none}}
/* Story photo idle: no swaying. The card keeps its tilt and floats a few px (shadow softens as it rises),
   and the photo drifts in a slow zoom inside its frame. */
.story-photo{animation:photo-float 8s ease-in-out infinite}
.story-photo img{display:block;transform-origin:58% 42%;animation:photo-drift 22s ease-in-out infinite alternate}
@keyframes photo-float{0%,100%{translate:0 0;box-shadow:0 2px 3px #30231826,9px 18px 26px #30231855}50%{translate:0 -6px;box-shadow:0 2px 3px #3023181f,10px 24px 32px #30231847}}
@keyframes photo-drift{from{scale:1}to{scale:1.07}}
@media (prefers-reduced-motion:reduce){.story-photo,.story-photo img{animation:none}}
/* Instagram button lifts with the same solid shadow as "Explore the menu" */
.hero-actions .instagram-link{transition:background .2s,transform .25s,box-shadow .25s}
.hero-actions .instagram-link:hover{box-shadow:0 5px 0 #4b302422}
.hero-actions .instagram-link:active{transform:translateY(0);box-shadow:0 2px 8px #4b302413}
/* Menu photos: item names with a photo are buttons with a small camera mark */
.dish{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;display:inline-flex;align-items:baseline;gap:.4em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.dish:after{content:'';flex:none;width:.85em;height:.85em;align-self:center;opacity:.45;background:currentColor;transition:opacity .2s;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.dish:hover,.dish:focus-visible{text-decoration-color:#4b302466}.dish:hover:after,.dish:focus-visible:after{opacity:.8}
.food-list .dish{font-weight:inherit}
/* Hover preview card (mouse only), follows the pointer */
.dish-peek{position:fixed;left:0;top:0;z-index:50;width:210px;margin:0;padding:9px 9px 6px;background:#f5ecd8;box-shadow:0 2px 4px #26301c26,6px 16px 28px #26301c47;pointer-events:none;opacity:0;scale:.94;transition:opacity .22s,scale .3s cubic-bezier(.2,.8,.2,1);will-change:transform}
.dish-peek.shown{opacity:1;scale:1}
.dish-peek img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;background:#e8dcc4}
.dish-peek figcaption{font-family:Caveat,cursive;font-size:21px;line-height:1.2;text-align:center;margin-top:6px;color:var(--brown)}
@media (prefers-reduced-motion:reduce){.dish-peek{transition:opacity .15s;scale:1}}
/* The photo viewer takes focus when it opens; no outline on the viewer itself */
.photo-dialog:focus{outline:none}
.dialog-close{color:inherit;-webkit-tap-highlight-color:transparent}