@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --yellow:#f5cf19; --yellow-light:#ffe46a; --ink:#171717; --muted:#6d6b64; --cream:#f6f4ed; --white:#fff; --line:#d9d5c9; --display:'Space Grotesk', sans-serif; --body:'DM Sans', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font:15px/1.55 var(--body); } a { color:inherit; text-decoration:none; } button { font:inherit; } .section-dark { background:var(--ink); color:var(--white); } .section-light { background:var(--white); } .section-cream { background:var(--cream); } .section-yellow { background:var(--yellow); }
.site-header { align-items:center; background:var(--ink); color:var(--white); display:flex; height:72px; justify-content:space-between; padding:0 5vw; position:relative; z-index:5; } .wordmark { font:bold 19px/1 var(--display); letter-spacing:.02em; } .wordmark span { color:var(--yellow); } .desktop-nav { display:flex; gap:28px; margin-left:auto; margin-right:34px; } .desktop-nav a { color:#b5b3aa; font-size:13px; font-weight:600; } .desktop-nav a:hover,.text-link:hover { color:var(--yellow); }
.button { align-items:center; border:1px solid transparent; display:inline-flex; font-size:12px; font-weight:700; gap:18px; justify-content:center; letter-spacing:.08em; min-height:48px; padding:0 20px; text-transform:uppercase; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); } .button span { font-size:17px; letter-spacing:0; } .button-small { min-height:38px; padding:0 15px; } .button-yellow { background:var(--yellow); color:var(--ink); } .button-yellow:hover { background:var(--yellow-light); } .button-dark { background:var(--ink); color:var(--white); } .button-outline { border-color:var(--ink); color:var(--ink); } .section-dark .button-outline { border-color:#6d6d65; color:var(--white); } .text-link { align-items:center; display:inline-flex; font-size:12px; font-weight:700; gap:12px; letter-spacing:.08em; text-transform:uppercase; }
.hero { min-height:calc(100vh - 72px); overflow:hidden; padding:clamp(50px,8vw,105px) 8vw 0; position:relative; } .hero:after { background:var(--yellow); content:''; height:1px; left:0; opacity:.3; position:absolute; top:40%; width:100%; } .hero-copy { max-width:650px; position:relative; z-index:1; } .eyebrow { color:var(--yellow); font-size:11px; font-weight:700; letter-spacing:.17em; margin:0 0 18px; text-transform:uppercase; } .eyebrow-dark { color:#8c7903; } .eyebrow-dot { background:var(--yellow); border-radius:50%; display:inline-block; height:7px; margin-right:8px; width:7px; } h1,h2,h3,p { margin-top:0; } h1,h2 { font:700 clamp(54px,8vw,116px)/.92 var(--display); letter-spacing:-.04em; margin-bottom:28px; } h1 em,h2 em { color:var(--yellow); font-style:normal; } .hero-lede { color:#b9b8af; max-width:385px; } .hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:24px; margin-top:34px; } .hero-art { align-items:center; display:flex; height:330px; justify-content:center; margin:80px auto 0; max-width:570px; position:relative; } .hero-placeholder { align-items:center; background:repeating-linear-gradient(135deg,#292929 0,#292929 2px,#212121 2px,#212121 9px); border:1px solid #45453e; display:flex; flex-direction:column; height:280px; justify-content:center; transform:rotate(-3deg); width:78%; } .sun-mark { color:var(--yellow); font-size:44px; } .hero-placeholder p { color:var(--yellow); font-size:12px; font-weight:700; letter-spacing:.15em; line-height:1.4; margin:12px 0; text-align:center; } .hero-placeholder small,.photo-placeholder small { color:#86857d; font-size:11px; } .hero-sticker { background:var(--yellow); border-radius:50%; color:var(--ink); font:700 13px/1.08 var(--display); letter-spacing:.08em; padding-top:30px; position:absolute; right:3%; text-align:center; top:2%; transform:rotate(9deg); height:113px; width:113px; } .hero-sticker strong { font-size:21px; } .hero-footer { border-top:1px solid #45453e; color:#7f7e76; display:flex; font-size:10px; font-weight:700; justify-content:space-between; letter-spacing:.13em; margin-top:48px; padding:18px 0; }
section { padding:clamp(70px,9vw,140px) 8vw; } .section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:38px; } h2 { font-size:clamp(45px,6.5vw,88px); margin-bottom:0; } h2 span { color:#b89c00; } .section-dark h2 span { color:var(--yellow); } .section-intro { color:var(--muted); max-width:250px; } .update-line { align-items:center; border-bottom:1px solid var(--line); color:var(--muted); display:flex; font-size:12px; gap:8px; padding-bottom:15px; } .update-note { margin-left:auto; } .status-dot { border-radius:50%; display:inline-block; height:9px; width:9px; } .status-yellow { background:var(--yellow); }
.availability-grid { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); margin-top:22px; } .availability-card,.menu-card { background:var(--cream); border:1px solid var(--line); } .item-image { align-items:center; background:linear-gradient(135deg,#e7e3d6,#f8f7f0); color:#969286; display:flex; height:148px; justify-content:center; letter-spacing:.14em; text-align:center; font-size:10px; } .item-content { padding:17px; } .item-topline { align-items:center; display:flex; justify-content:space-between; gap:8px; } .item-category { color:#87847a; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } h3 { font:700 20px/1.1 var(--display); margin:13px 0 6px; } .item-content p,.menu-card-body p { color:var(--muted); font-size:12px; margin-bottom:20px; } .status-pill,.mini-status { align-items:center; display:inline-flex; font-size:10px; font-weight:700; gap:5px; text-transform:uppercase; } .status-pill i { border-radius:50%; height:7px; width:7px; } .status-available { color:#3c8a41; } .status-available i { background:#55ad59; } .status-limited { color:#a87d00; } .status-limited i { background:#e3bd13; } .status-sold-out { color:#b74a43; } .status-sold-out i { background:#d65d55; } .status-unavailable { color:#8c8b84; } .status-unavailable i { background:#aaa9a1; } .item-bottom { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:13px; } .item-bottom strong,.menu-card-body>strong { color:#9b8200; font:700 16px var(--display); } .item-bottom span { color:#97948a; font-size:10px; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; } .filter-button { background:transparent; border:1px solid var(--line); color:#77736a; cursor:pointer; font-size:11px; font-weight:700; padding:10px 15px; text-transform:uppercase; } .filter-button.active,.filter-button:hover { background:var(--ink); border-color:var(--ink); color:var(--yellow); } .menu-grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); } .menu-card { display:flex; min-height:175px; } .menu-card-image { flex:0 0 38%; } .menu-card .item-image { height:100%; min-height:175px; } .menu-card-body { padding:17px; } .menu-card-body h3 { font-size:18px; } .menu-card-body p { margin-bottom:12px; } .mini-status { border:1px solid currentColor; padding:3px 5px; }
.know { overflow:hidden; padding-bottom:120px; position:relative; } .know h2 { max-width:630px; } .know h2 span { color:var(--ink); } .benefit-grid { border-top:1px solid rgba(23,23,23,.35); display:grid; grid-template-columns:repeat(4,1fr); margin-top:70px; } .benefit-grid>div { border-right:1px solid rgba(23,23,23,.35); padding:18px 18px 0 0; } .benefit-grid strong { font:700 13px var(--display); } .benefit-grid p { font:600 16px var(--display); max-width:125px; } .leaf-motif { font-size:130px; opacity:.12; position:absolute; } .leaf-left { bottom:25px; left:3%; transform:rotate(-40deg); } .leaf-right { right:4%; top:20%; transform:rotate(140deg); }
.qr-section { align-items:center; display:grid; gap:60px; grid-template-columns:1fr 280px; } .qr-copy { max-width:590px; } .qr-copy h2 { margin-bottom:24px; } .qr-copy>p:not(.eyebrow) { color:#aaa9a1; max-width:450px; } .qr-note { color:#77766e; display:block; font-size:10px; font-weight:700; letter-spacing:.14em; margin-top:28px; } .qr-frame { align-items:center; border:1px solid #484841; display:flex; flex-direction:column; padding:22px; transform:rotate(3deg); } .qr-placeholder { align-items:center; background:repeating-linear-gradient(45deg,#f5cf19 0,#f5cf19 4px,#171717 4px,#171717 8px); color:var(--white); display:flex; flex-direction:column; height:180px; justify-content:center; width:180px; } .qr-placeholder span { font:700 48px var(--display); letter-spacing:-.08em; } .qr-placeholder small { background:var(--ink); font-size:9px; letter-spacing:.12em; line-height:1.4; padding:5px 8px; text-align:center; } .qr-label { color:var(--yellow); font:700 11px/1.2 var(--display); letter-spacing:.12em; margin-top:18px; text-align:center; }
.gallery .section-heading { align-items:end; } .gallery .section-intro { color:#9b9a91; } .gallery-grid { display:grid; gap:14px; grid-template-columns:1.4fr .8fr .8fr; } .photo-placeholder { align-items:center; background:repeating-linear-gradient(135deg,#242424 0,#242424 2px,#1d1d1d 2px,#1d1d1d 9px); border:1px solid #3d3d38; color:var(--yellow); display:flex; flex-direction:column; justify-content:center; min-height:210px; } .photo-wide { min-height:330px; } .photo-tall { min-height:330px; } .photo-placeholder span { font:700 12px var(--display); letter-spacing:.18em; margin-bottom:9px; }
.reviews { display:grid; gap:80px; grid-template-columns:1fr 1fr; } .reviews-number { border-right:1px solid var(--line); padding:10px 10% 10px 0; position:relative; } .quote-mark { color:var(--yellow); font:700 100px/1 var(--display); } .reviews-number strong { display:block; font:700 clamp(80px,10vw,140px)/.85 var(--display); letter-spacing:-.07em; } .stars { color:#d1af00; letter-spacing:.1em; margin-top:22px; } .reviews-number p { font-weight:600; } .reviews-number small { color:#96938a; font-size:11px; } .review-copy { max-width:450px; } .review-copy h2 { margin-bottom:24px; } .review-copy>p:not(.eyebrow) { color:var(--muted); margin-bottom:28px; }
.visit { display:grid; gap:60px; grid-template-columns:1fr 1fr; } address { color:var(--muted); font-style:normal; line-height:1.8; margin:28px 0; } .visit-actions { display:flex; flex-wrap:wrap; gap:10px; } .copy-address { cursor:pointer; } .copy-feedback { color:#8c7903; font-size:11px; min-height:17px; margin:12px 0 0; } .map-placeholder { align-items:center; background-color:#eae7dc; background-image:linear-gradient(#d8d4c7 1px,transparent 1px),linear-gradient(90deg,#d8d4c7 1px,transparent 1px); background-size:44px 44px; display:flex; flex-direction:column; justify-content:center; min-height:330px; } .map-pin { color:#d1af00; font-size:70px; line-height:1; text-shadow:0 2px 0 var(--ink); } .map-placeholder span { font:700 13px var(--display); letter-spacing:.16em; } .map-placeholder small { color:#77736a; margin-top:8px; }
.final-cta { padding-bottom:150px; text-align:center; } .final-cta h2 { margin:0 auto 20px; } .final-cta>p:not(.eyebrow) { color:#aaa9a1; } .final-cta .hero-actions { justify-content:center; }.site-footer { align-items:center; background:var(--ink); border-top:1px solid #34342f; color:#aaa9a1; display:flex; justify-content:space-between; padding:28px 8vw 85px; }.site-footer p { font-size:12px; }.site-footer a:last-child { font-size:12px; }.mobile-bar { display:none; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease var(--delay,0ms),transform .7s ease var(--delay,0ms); } .reveal.is-visible { opacity:1; transform:none; } .hero .reveal { opacity:1; transform:none; }
@media (max-width:800px) { .site-header { height:64px; padding:0 5vw; }.desktop-nav { display:none; }.site-header .button { font-size:10px; min-height:36px; padding:0 10px; }.hero { min-height:auto; padding:64px 7vw 0; }.hero:after { top:48%; }.hero-art { height:275px; margin-top:65px; }.hero-placeholder { height:220px; width:90%; }.hero-sticker { right:-2%; top:-3%; transform:scale(.82) rotate(9deg); }.hero-footer { flex-direction:column; gap:8px; margin-top:30px; padding-bottom:80px; }.section-heading { align-items:start; flex-direction:column; gap:20px; }.section-intro { max-width:330px; }.availability-grid { grid-template-columns:repeat(2,1fr); }.update-line { align-items:start; flex-wrap:wrap; }.update-note { margin-left:17px; width:100%; }.menu-grid { grid-template-columns:1fr; }.benefit-grid { grid-template-columns:repeat(2,1fr); margin-top:45px; }.benefit-grid>div:nth-child(2) { border-right:0; }.benefit-grid>div:nth-child(n+3) { border-top:1px solid rgba(23,23,23,.35); }.qr-section { grid-template-columns:1fr; gap:45px; }.qr-frame { justify-self:center; }.gallery-grid { grid-template-columns:1fr 1fr; }.photo-wide { grid-column:1/-1; min-height:250px; }.photo-tall { min-height:210px; }.reviews,.visit { grid-template-columns:1fr; gap:45px; }.reviews-number { border-bottom:1px solid var(--line); border-right:0; padding:0 0 35px; }.map-placeholder { min-height:250px; }.site-footer { align-items:flex-start; flex-direction:column; gap:16px; padding-bottom:90px; }.mobile-bar { align-items:center; background:var(--yellow); bottom:0; display:flex; justify-content:space-around; left:0; padding:10px 4px 9px; position:fixed; right:0; z-index:10; }.mobile-bar a { align-items:center; display:flex; flex-direction:column; font-size:10px; font-weight:700; gap:2px; text-transform:uppercase; }.mobile-bar span { font-size:16px; line-height:1; } section { padding-left:7vw; padding-right:7vw; } }
@media (max-width:420px) { h1 { font-size:54px; } h2 { font-size:45px; } .availability-grid { gap:8px; }.item-content { padding:13px; }.item-content h3 { font-size:17px; }.item-bottom { align-items:flex-start; flex-direction:column; gap:4px; }.menu-card-body { padding:13px; }.menu-card-body h3 { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } }
.item-image-photo { background-color:#e7e3d6 !important; }
.visually-hidden { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.empty-state { border:1px dashed var(--line); color:var(--muted); font-size:13px; margin:0; padding:28px; text-align:center; }
.hero { perspective:1200px; }
.hero-grid { background-image:linear-gradient(rgba(245,207,25,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(245,207,25,.08) 1px,transparent 1px); background-size:46px 46px; inset:0; mask-image:linear-gradient(to bottom,black,transparent 62%); opacity:.45; pointer-events:none; position:absolute; transform:perspective(500px) rotateX(58deg) scale(1.7) translateY(37%); transform-origin:center bottom; }
.hero-intro { animation:hero-rise .8s cubic-bezier(.2,.8,.2,1) both; color:var(--yellow); font-size:11px; font-weight:700; letter-spacing:.24em; margin:0 0 22px; }
.hero-intro span { color:#78776f; margin:0 8px; }
.hero-copy h1 { animation:hero-rise .85s .12s cubic-bezier(.2,.8,.2,1) both; text-shadow:0 12px 28px rgba(0,0,0,.22); }
.hero-copy .hero-lede,.hero-copy .hero-actions { animation:hero-rise .8s .22s cubic-bezier(.2,.8,.2,1) both; }
.hero .hero-art { transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1); transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.hero-art:before,.hero-art:after { border:1px solid rgba(245,207,25,.22); border-radius:50%; content:''; pointer-events:none; position:absolute; transform:translateZ(-24px) rotateX(68deg); }
.hero-art:before { height:260px; width:460px; }
.hero-art:after { height:310px; opacity:.45; transform:translateZ(-44px) rotateX(68deg) rotateZ(12deg); width:530px; }
.hero-placeholder { box-shadow:24px 28px 0 rgba(245,207,25,.08),0 35px 60px rgba(0,0,0,.3); transform:rotate(-3deg) translateZ(28px); }
.hero-sticker { box-shadow:10px 16px 0 rgba(0,0,0,.22); transform:rotate(9deg) translateZ(70px); }
.hero-placeholder { animation:hero-float 5s ease-in-out infinite; }
.hero-sticker { animation:hero-float 4s .5s ease-in-out infinite reverse; }
@keyframes hero-rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@media (max-width:800px) { .hero-grid { transform:perspective(400px) rotateX(58deg) scale(1.9) translateY(34%); } .hero-art { transform:none; } .hero-art:before { height:220px; width:330px; } .hero-art:after { height:260px; width:370px; } }
@media (prefers-reduced-motion:reduce) { .hero-intro,.hero-copy h1,.hero-copy .hero-lede,.hero-copy .hero-actions,.hero-placeholder,.hero-sticker { animation:none; } .hero-art { transition:none; } }