@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:opsz,wght@5..120,500;5..120,600;5..120,700&display=swap');

:root { --ink:#13100B; --ink-2:#1E1710; --ember:#B95A2A; --gold:#C9A36D; --cream:#F2E6D0; --mist:#D9C9B2; --clay:#8B6440; --line:rgba(242,230,208,.16); --paper:#F5F0E8; --paper-ink:#292015; --focus:#F3C77A; --radius:8px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--cream); font-family:'DM Sans',Arial,sans-serif; line-height:1.5; } button,a { font:inherit; } a { color:inherit; text-decoration:none; } button { cursor:pointer; } .frame { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; transform:translateY(-160%); background:var(--cream); color:var(--ink); padding:8px 12px; } .skip-link:focus { transform:none; }
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 4vw; border-bottom:1px solid rgba(242,230,208,.14); } .site-header nav { display:flex; gap:24px; font-size:.86rem; color:var(--mist); } .site-header nav a:hover,.text-button:hover { color:var(--cream); }
.wordmark { display:flex; flex-direction:column; font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.09em; line-height:.8; font-size:1.28rem; } .wordmark span { color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.5rem; letter-spacing:.36em; margin-top:6px; }
.cart-trigger,.button,.text-button,.icon-button { border:0; } .cart-trigger { background:var(--cream); color:var(--ink); padding:9px 12px; border-radius:3px; font-weight:700; font-size:.82rem; } .cart-trigger span { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; border-radius:50%; background:var(--ink); color:var(--cream); font-size:.67rem; }
.hero { position:relative; min-height:740px; overflow:hidden; display:grid; align-items:end; } .hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 58%; filter:saturate(.78) contrast(1.08); animation:hero-drift 18s ease-in-out infinite alternate; } .hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(19,16,11,.86) 0%,rgba(19,16,11,.42) 52%,rgba(19,16,11,.20)),linear-gradient(0deg,rgba(19,16,11,.82),transparent 55%); } .hero-content,.hero-meta { position:relative; z-index:1; } .hero-content { padding-bottom:155px; } .eyebrow { margin:0 0 14px; color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:.71rem; font-weight:700; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:'Playfair Display',Georgia,serif; font-weight:600; letter-spacing:0; } h1 { max-width:700px; margin-bottom:22px; font-size:clamp(3.8rem,8vw,7.8rem); line-height:.92; } h2 { font-size:clamp(2.2rem,4.2vw,4.3rem); line-height:1; } .hero-copy { max-width:435px; color:var(--mist); font-size:1.05rem; } .hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:0 18px; border-radius:3px; font-size:.85rem; font-weight:700; } .button-primary { background:var(--gold); color:var(--ink); } .button-primary:hover { background:#e0bd87; } .button-quiet { border:1px solid rgba(242,230,208,.45); color:var(--cream); } .button-full { width:100%; } .hero-meta { display:flex; justify-content:space-between; gap:16px; padding-bottom:30px; color:var(--mist); font-size:.8rem; } .open-state { color:#EAC287; }
.menu-shell { padding:108px 0 88px; background:var(--ink); } .menu-intro { display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:44px; } .menu-intro h2 { margin:0; } .menu-intro-copy { max-width:380px; color:var(--mist); } .category-rail { display:flex; gap:8px; overflow-x:auto; padding:0 max(24px,calc((100% - 1180px)/2)) 18px; scrollbar-width:thin; } .category-chip { flex:0 0 auto; background:transparent; color:var(--mist); border:1px solid var(--line); border-radius:100px; padding:9px 14px; font-size:.82rem; } .category-chip[aria-pressed="true"] { border-color:var(--gold); color:var(--cream); background:rgba(201,163,109,.12); } .menu-toolbar { display:flex; justify-content:space-between; align-items:center; min-height:42px; color:var(--mist); font-size:.86rem; } .text-button { background:transparent; color:var(--gold); padding:0; font-size:.82rem; font-weight:700; }
.menu-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .dish-card { position:relative; min-height:258px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2); display:flex; flex-direction:column; justify-content:end; text-align:left; color:var(--cream); } .dish-card:focus-visible,.category-chip:focus-visible,.button:focus-visible,.cart-trigger:focus-visible,.text-button:focus-visible,.icon-button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } .dish-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.63; filter:saturate(.7); } .dish-image.fallback { opacity:.18; object-fit:contain; transform:scale(1.7); } .dish-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(19,16,11,.96),rgba(19,16,11,.08) 85%); } .dish-content { position:relative; padding:20px; } .dish-content h3 { max-width:230px; margin:0; font-family:'Playfair Display',serif; font-size:1.43rem; line-height:1.04; } .dish-content p { margin:8px 0 16px; color:var(--mist); font-size:.78rem; line-height:1.45; } .dish-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; } .dish-foot strong { color:var(--gold); } .add-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(242,230,208,.5); border-radius:50%; background:transparent; color:var(--cream); font-size:1.3rem; } .dish-card.unavailable { opacity:.45; } .dish-card.unavailable .add-button { display:none; }
.story-band { padding:112px 0; background:#2A2015; } .story-grid { display:grid; grid-template-columns:.65fr 1.4fr 1fr; gap:32px; align-items:start; } .story-grid h2 { margin:0; } .story-grid > p:not(.eyebrow) { color:var(--mist); } .story-grid dl { margin:0; display:grid; gap:16px; } .story-grid dl div { border-top:1px solid rgba(242,230,208,.25); padding-top:10px; } dt { font-family:'Playfair Display',serif; color:var(--gold); font-size:1.45rem; } dd { margin:0; color:var(--mist); font-size:.8rem; }
.cart-drawer { position:fixed; z-index:12; top:0; right:0; display:flex; flex-direction:column; width:min(440px,100%); height:100dvh; padding:26px; background:var(--paper); color:var(--paper-ink); box-shadow:-18px 0 55px rgba(0,0,0,.45); transform:translateX(105%); transition:transform .25s ease; } .cart-drawer.is-open { transform:none; } .overlay { position:fixed; z-index:11; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s; } .overlay.is-open { opacity:1; pointer-events:auto; } .drawer-head { display:flex; justify-content:space-between; align-items:start; border-bottom:1px solid #dfd4c6; padding-bottom:18px; } .drawer-head h2 { margin:0; font-size:2.1rem; } .icon-button { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e7dccd; color:var(--paper-ink); } .cart-lines { flex:1; overflow:auto; padding:18px 0; } .cart-empty { color:#7c6a56; } .cart-line { display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px 0; border-bottom:1px solid #e6dbcc; } .cart-line h3 { margin:0 0 4px; font-size:.95rem; } .cart-line p { margin:0; color:#806f5d; font-size:.78rem; } .line-controls { display:flex; align-items:center; gap:8px; margin-top:9px; } .line-controls button { width:25px; height:25px; border:1px solid #d5c5b2; background:transparent; } .cart-footer { border-top:1px solid #dfd4c6; padding-top:17px; } .cart-total { display:flex; justify-content:space-between; margin-bottom:14px; } .quiet-note { margin:10px 0 0; color:#806f5d; font-size:.72rem; } dialog { border:0; box-shadow:0 24px 80px rgba(0,0,0,.45); } .item-dialog { position:relative; width:min(760px,calc(100% - 28px)); padding:0; background:var(--paper); color:var(--paper-ink); } .item-dialog::backdrop,.checkout-dialog::backdrop { background:rgba(0,0,0,.68); } .dialog-close { position:absolute; z-index:2; top:16px; right:16px; } .item-detail { display:grid; grid-template-columns:1fr 1fr; } .item-detail img { width:100%; height:100%; min-height:350px; object-fit:cover; background:var(--ink-2); } .item-detail-copy { padding:52px 40px; } .item-detail-copy h2 { font-size:3.1rem; } .item-detail-copy p { color:#6f5d4c; } .detail-price { color:#9d5d31; font-weight:700; font-size:1.25rem; } .checkout-dialog { width:min(560px,calc(100% - 28px)); position:relative; padding:40px; background:var(--paper); color:var(--paper-ink); } .checkout-dialog h2 { font-size:2.8rem; } .checkout-dialog pre { white-space:pre-wrap; padding:14px; border:1px solid #dfd4c6; background:#fffaf3; font:inherit; font-size:.82rem; } .toast { position:fixed; z-index:15; bottom:18px; left:50%; transform:translate(-50%,160%); background:var(--cream); color:var(--ink); padding:10px 14px; border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .2s; font-size:.82rem; } .toast.show { transform:translate(-50%,0); }
.admin-page,.guide-page { min-height:100vh; background:var(--paper); color:var(--paper-ink); } .admin-header { min-height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 4vw; background:var(--ink); color:var(--cream); } .admin-header-actions { display:flex; gap:16px; align-items:center; font-size:.83rem; } .mock-pill { padding:4px 8px; border:1px solid var(--gold); color:var(--gold); font-size:.67rem; letter-spacing:.1em; } .admin-layout { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 76px); } .admin-nav { padding:30px 20px; border-right:1px solid #ded2c1; } .admin-nav button { display:block; width:100%; padding:11px 10px; margin:3px 0; background:transparent; border:0; text-align:left; color:#675746; } .admin-nav button.active { background:#e5d6c1; color:#2a2015; font-weight:700; } .admin-content { padding:48px min(6vw,88px); } .admin-title { display:flex; justify-content:space-between; gap:34px; align-items:end; margin-bottom:34px; } .admin-title h1 { margin:0; font-size:clamp(2.8rem,5vw,4.6rem); } .admin-title p:last-child { max-width:410px; color:#776553; } .operator-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .operator-card { border:1px solid #ded2c1; background:#fffaf3; padding:20px; border-radius:var(--radius); } .operator-card h2,.operator-card h3 { margin:0 0 8px; font-family:'Playfair Display',serif; } .operator-card p { margin:0; color:#756450; font-size:.83rem; } .metric { margin-top:24px; color:#9d5d31; font-family:'Playfair Display',serif; font-size:2.6rem; } .availability-list { display:grid; gap:8px; } .availability-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px; border:1px solid #e2d6c6; background:#fffaf3; } .availability-row p { margin:0; font-weight:600; } .availability-row small { color:#8a7560; } .toggle { display:flex; gap:8px; align-items:center; font-size:.78rem; } .toggle input { accent-color:#9d5d31; width:18px; height:18px; } .media-preview { min-height:280px; position:relative; overflow:hidden; background:var(--ink); color:var(--cream); padding:24px; } .media-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.54; } .media-preview div { position:relative; } .roadmap-table { display:grid; gap:1px; background:#e2d6c6; border:1px solid #e2d6c6; } .roadmap-table div { display:grid; grid-template-columns:120px 1fr 150px; gap:14px; padding:15px; background:#fffaf3; } .roadmap-table strong { color:#9d5d31; } .guide-main { padding-top:140px; padding-bottom:90px; } .guide-main > h1 { max-width:850px; color:var(--paper-ink); font-size:clamp(3.2rem,7vw,6.3rem); } .guide-lede { max-width:700px; color:#675746; font-size:1.12rem; } .guide-section { margin-top:78px; } .guide-section h2 { color:var(--paper-ink); font-size:clamp(2rem,4vw,3.4rem); } .guide-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .guide-cards article,.guide-callout { border:1px solid #ded2c1; padding:24px; border-radius:var(--radius); background:#fffaf3; } .guide-cards h3 { font-family:'Playfair Display',serif; font-size:1.5rem; margin:0 0 8px; } .guide-cards p,.roadmap-list p { color:#756450; } .roadmap-list { display:grid; gap:1px; background:#decdb8; } .roadmap-list > div { display:grid; grid-template-columns:60px 240px 1fr; gap:22px; padding:20px; background:var(--paper); } .roadmap-list span { color:#9d5d31; font-family:'Playfair Display',serif; font-size:1.7rem; } .roadmap-list h3 { margin:0; font-family:'Playfair Display',serif; font-size:1.45rem; } .roadmap-list p { margin:0; } .guide-callout { background:#2a2015; color:var(--cream); } .guide-callout h2 { color:var(--cream); max-width:650px; } .guide-callout p:not(.eyebrow) { color:var(--mist); max-width:620px; }
.item-dialog,.checkout-dialog { position:revert; inset:revert; margin:revert; max-height:calc(100dvh - 28px); overflow:auto; }
.dish-detail-hit { position:absolute; inset:0; z-index:1; border:0; background:transparent; } .dish-content { z-index:2; pointer-events:none; } .card-add { position:absolute; z-index:3; right:18px; bottom:17px; min-height:34px; padding:0 11px; border:1px solid rgba(242,230,208,.56); border-radius:3px; background:rgba(19,16,11,.76); color:var(--cream); font-size:.74rem; font-weight:700; } .card-add:hover { background:var(--gold); color:var(--ink); }
.modal { position:fixed; z-index:14; inset:14px; width:min(760px,calc(100% - 28px)); margin:auto; background:var(--paper); color:var(--paper-ink); box-shadow:0 0 0 100vmax rgba(0,0,0,.68),0 24px 80px rgba(0,0,0,.45); } .checkout-dialog.modal { width:min(560px,calc(100% - 28px)); height:max-content; padding:40px; }
@keyframes hero-drift { from { transform:scale(1); object-position:48% 58%; } to { transform:scale(1.1); object-position:62% 42%; } }
@media (max-width:820px) { .site-header { height:70px; padding:0 20px; } .site-header nav { display:none; } .hero { min-height:650px; } .hero-content { padding-bottom:116px; } .frame { width:min(100% - 32px,1180px); } .menu-intro,.admin-title { display:block; } .menu-intro-copy,.admin-title p:last-child { margin-top:16px; } .menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .story-grid { grid-template-columns:1fr; } .admin-layout { grid-template-columns:1fr; } .admin-nav { display:flex; gap:4px; overflow:auto; border-right:0; border-bottom:1px solid #ded2c1; padding:12px 16px; } .admin-nav .eyebrow { display:none; } .admin-nav button { white-space:nowrap; width:auto; } .operator-grid,.guide-cards { grid-template-columns:1fr; } .roadmap-list > div { grid-template-columns:42px 1fr; } .roadmap-list p { grid-column:2; } }
@media (max-width:520px) { .cart-trigger { padding:8px 10px; } h1 { font-size:3.6rem; } .hero { min-height:620px; } .menu-grid { grid-template-columns:1fr; } .menu-shell { padding-top:76px; } .dish-card { min-height:230px; } .item-detail { grid-template-columns:1fr; } .item-detail img { min-height:230px; } .item-detail-copy { padding:30px 24px; } .item-detail-copy h2 { font-size:2.5rem; } .admin-content { padding:34px 18px; } .admin-header { padding:0 18px; } .admin-header-actions .text-button:first-of-type { display:none; } .roadmap-list > div { gap:12px; padding:16px; } }
@media (max-width:520px) { .item-dialog { inset:16px 10px; } .item-detail { grid-template-columns:112px minmax(0,1fr); } .item-detail img { min-height:100%; height:100%; } .item-detail-copy { padding:48px 16px 16px; } .item-detail-copy h2 { font-size:1.75rem; } .item-detail-copy p { font-size:.78rem; margin-bottom:10px; } .detail-price { font-size:1rem; } .item-detail-copy .button { min-height:40px; padding:0 12px; font-size:.76rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } .hero-media { transform:none; } }