/* Readability, keyboard focus and responsive navigation. */
html{font-size:100%;scroll-padding-top:1rem}
body{font-size:1rem;line-height:1.6}
.site{overflow:clip}
.skip-link{position:absolute;left:1rem;top:.5rem;z-index:100;background:#f6d43d;color:#11120f;padding:1rem;transform:translateY(-180%);font-weight:700}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #11120f}
main:focus{outline:none}
header{height:auto;min-height:96px;flex-wrap:wrap;padding-block:.75rem}
header nav{font-size:.875rem;letter-spacing:.04em;gap:.35rem;flex-wrap:wrap}
header nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .5rem}
header .head-actions{flex-wrap:wrap;gap:.75rem;font-size:1rem}
.head-actions .client-access,.head-actions .btn,.btn,.text-link,.merch-card .btn{font-size:1rem;letter-spacing:.02em;line-height:1.5;min-height:44px;padding:.75rem 1rem;overflow-wrap:anywhere}
.language-select{font-size:1rem!important;min-height:44px;max-width:130px!important;padding:.5rem!important}
.nav-toggle{display:none;background:#191b16;color:#f0eddf;border:1px solid #aaa99e;padding:.6rem 1rem;min-height:44px;font-size:1rem}
.body-copy,.body-copy p,.hero p,.sectionhead p,.drink p,.booking p,.event-empty p,.social-cards p,details p,.points li,.menu-note,footer p,footer a{font-size:1rem;line-height:1.75}
.eyebrow,.hero .location,.ticker,.note-line,.image-tag,.drink .number,.menu-note strong,.social-cards span,.fineprint,.credits,.preview-link-note,.photo-lightbox p{font-size:.875rem;line-height:1.6;letter-spacing:.06em}
.fineprint{color:#b9bcac}
footer h2{font:700 1rem/1.5 Arial,Helvetica,sans-serif;color:#f6d43d;letter-spacing:.06em;margin:0 0 1.25rem}
.visit-us h2{font-size:1.125rem}
.hero-copy{background:linear-gradient(90deg,#11120ff5,#11120fd9 65%,#11120fbf);width:100%}
.hero h1{font-size:clamp(2rem,5vw,4.875rem);line-height:1.15;overflow-wrap:anywhere}
.hero p{color:#f0eddf}
.section h2,.booking h2{font-size:clamp(2rem,4vw,3.625rem);line-height:1.2;overflow-wrap:anywhere}
.section h3,.social-cards h3{overflow-wrap:anywhere}
.body-copy a,p a{ text-decoration:underline;text-underline-offset:.2em}
.ticker{flex-wrap:wrap}
summary{font-size:1rem;min-height:44px;padding:.35rem 0;list-style:revert}
.gallery-open{border:1px solid #687062;border-radius:2px;color:#f0eddf}
.gallery-open span{font-size:1rem;line-height:1.5}
.photo-lightbox,#overlay{max-width:calc(100vw - 24px);max-height:90dvh;overflow:auto}
.photo-lightbox button,#close,.filter{min-width:44px;min-height:44px;font-size:1rem}
.modalhead{flex-wrap:wrap;gap:.5rem;top:0}
.modalhead h2{font-size:1.5rem}
#tableTag{min-height:1.75em}
.merch-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.footlinks a{min-height:44px;display:inline-flex;align-items:center;padding:.25rem 0}
img{max-width:100%}
@media(max-width:1400px){
 header{gap:.75rem;justify-content:space-between}
 .nav-toggle{display:inline-flex;align-items:center;gap:.5rem}
 header nav{order:3;flex-basis:100%;display:flex;flex-direction:column;align-items:stretch;background:#191b16;padding:.5rem;border:1px solid #687062}
 .js-nav header nav:not(.is-open){display:none}
 header nav a{padding:.65rem 1rem;font-size:1rem}
 header .head-actions{margin-left:auto}
}
@media(max-width:600px){
 header .head-actions{flex-basis:100%;justify-content:space-between;gap:.5rem}
 header .brand img{width:82px;height:72px}
 .head-actions .client-access{font-size:1rem!important;display:inline-flex!important;padding:.5rem}
 .head-actions .btn{font-size:1rem;padding:.6rem}
 .hero-copy{padding:3rem 7%}
 .hero{min-height:540px}
 .hero h1{font-size:2.125rem;letter-spacing:-.04em}
 .hero .actions{flex-wrap:wrap;gap:1rem}
 .section{padding:3.5rem 7%}
 .photo-gallery,.drinks,.social-cards,.account-panel{grid-template-columns:1fr}
 .drink{display:block}
 .drink img{height:300px}
 .drink h3{margin:1rem 0 .5rem}
 .sectionhead{display:block}
 .event-empty{padding:1.25rem}
 .social-cards>a{padding:1.25rem}
 .photo-lightbox img{max-width:100%;height:auto}
 .fineprint{display:block}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.btn,.nav-toggle,.gallery-open{border:1px solid ButtonText}:focus-visible{outline:3px solid Highlight;box-shadow:none}}

/* Mobile welcome caption: reserve its own space even without a photo. */
.split-image img[hidden] + .image-tag{position:static;display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:800px){
 .split-image .image-tag{position:static;display:block;width:fit-content;max-width:100%;margin:14px 0 0;padding:13px 18px;white-space:normal;overflow-wrap:anywhere}
 .split-image img[hidden] + .image-tag{margin-top:0}
}

/* QR instructions: text followed by a separate CTA, with no inline overlap. */
.menu-note{align-items:flex-start;flex-wrap:wrap}
.menu-note>span{display:block;min-width:0;flex:1 1 20rem;overflow-wrap:anywhere}
.menu-note>.text-link{position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
@media(max-width:800px){
 .menu-note,.site.mobile .menu-note{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
 .menu-note>span,.site.mobile .menu-note>span{flex:none;width:100%;order:0}
 .menu-note>.text-link,.site.mobile .menu-note>.text-link{flex:none;order:1;margin:0;padding:12px 0;text-align:left}
}

/* Drunk Bros mobile navigation: burger morphs into a close icon. */
.nav-toggle{width:48px;height:48px;min-width:48px;min-height:48px;padding:12px;justify-content:center;border-color:var(--yellow);border-radius:8px;color:var(--yellow);flex-shrink:0}
.nav-toggle .burger-icon{position:relative;display:block;width:24px;height:20px}
.nav-toggle .burger-icon>span{position:absolute;left:0;display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transform-origin:center;transition:transform .2s ease,opacity .2s ease,top .2s ease}
.nav-toggle .burger-icon>span:nth-child(1){top:1px}
.nav-toggle .burger-icon>span:nth-child(2){top:9px}
.nav-toggle .burger-icon>span:nth-child(3){top:17px}
.nav-toggle[aria-expanded="true"] .burger-icon>span:nth-child(1){top:9px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .burger-icon>span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .burger-icon>span:nth-child(3){top:9px;transform:rotate(-45deg)}

/* Compact mobile header; account access belongs to navigation. */
header nav .client-access{background:var(--yellow);color:var(--ink);border:1px solid var(--yellow);border-radius:6px;font-weight:700;justify-content:center;padding:.6rem 1rem}
@media(max-width:600px){
 header{min-height:72px;height:auto;padding:8px 4%;gap:8px;align-items:center}
 header .brand img{width:64px;height:56px}
 header .nav-toggle{width:44px;height:44px;min-width:44px;padding:10px}
 header .head-actions{flex:0 0 auto;flex-basis:auto;flex-wrap:nowrap;justify-content:flex-end;gap:6px;margin-left:auto}
 header .head-actions .language-select{width:58px!important;min-width:58px;max-width:58px!important;padding:6px!important;font-size:14px!important;min-height:44px}
 header .head-actions .btn{font-size:12px!important;padding:10px 8px;white-space:nowrap;letter-spacing:0;min-height:44px}
 header nav{flex-basis:100%;order:3}
}
@media(max-width:360px){header{gap:6px}header .brand img{width:52px;height:48px}}

/* Mobile header: logo | prominent booking | language | burger at far right. */
@media(max-width:600px){
 header{display:grid;grid-template-columns:minmax(52px,1fr) auto 58px 44px;column-gap:10px;row-gap:10px;padding:10px 4%;align-items:center}
 header>.brand{grid-column:1;grid-row:1;justify-self:start;min-width:0}
 header>.head-actions{display:contents}
 header>.head-actions>.btn{grid-column:2;grid-row:1;justify-self:center;font-size:13px!important;font-weight:800;padding:12px 14px;min-height:46px;border-radius:6px}
 header>.head-actions>.language-select{grid-column:3;grid-row:1;justify-self:center;margin:0}
 header>.head-actions>#lang{grid-column:3;grid-row:1;justify-self:center}
 header>.nav-toggle{grid-column:4;grid-row:1;justify-self:end;margin:0}
 header>nav{grid-column:1 / -1;grid-row:2;order:initial;width:100%;margin:0}
}
@media(max-width:360px){
 header{column-gap:8px;padding-inline:3%}
 header>.head-actions>.btn{padding-inline:10px;font-size:12px!important}
}

/* Gallery viewer: image only, compact controls and touch navigation. */
#photo-lightbox{box-sizing:border-box;width:96vw;max-width:1200px;height:92vh;height:92dvh;max-height:96dvh;margin:auto;padding:54px 48px 38px;border:0;border-radius:12px;background:#10110feb;overflow:hidden}
#photo-lightbox::backdrop{background:#000e}
#photo-lightbox #large-photo{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;user-select:none;touch-action:pan-y pinch-zoom}
#photo-lightbox button{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:1px solid #ffffff40;border-radius:50%;background:#151611e6;color:#fff;cursor:pointer;line-height:1;font-family:Arial,sans-serif}
#photo-lightbox #close-photo{top:8px;right:8px;font-size:25px;border:0;background:transparent}
#photo-lightbox #prev-photo{left:3px;top:50%;transform:translateY(-50%);font-size:34px}
#photo-lightbox #next-photo{right:3px;top:50%;transform:translateY(-50%);font-size:34px}
#photo-lightbox button[hidden]{display:none}
#photo-lightbox #large-caption{position:absolute;bottom:10px;left:0;right:0;margin:0;text-align:center;font-size:12px;color:#ddd;line-height:1.5}
@media(max-width:600px){#photo-lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:60px 0 48px}#photo-lightbox #close-photo{top:max(8px,env(safe-area-inset-top));right:8px}#photo-lightbox #large-caption{bottom:max(12px,env(safe-area-inset-bottom))}}

/* Brand biography: editable story fields, readable on every screen. */
.bio-panel{grid-column:1 / -1;width:100%;box-sizing:border-box;margin-top:36px;padding:44px clamp(20px,5vw,70px);border:1px solid var(--line);background:#191b16;scroll-margin-top:110px}
.bio-panel h2{margin:18px 0;font-size:clamp(32px,5vw,60px)}
.bio-motto{color:var(--yellow);font-size:clamp(16px,2vw,20px);line-height:1.6;letter-spacing:.03em}
.bio-copy{max-width:850px;margin:28px auto 0;font-size:18px;line-height:1.85;color:#ddd}
.bio-copy p{margin:0 0 22px;overflow-wrap:anywhere}
.bio-signature{max-width:850px;margin:28px auto 0;color:var(--yellow);font-size:18px;line-height:1.7;font-weight:700}
@media(max-width:600px){.bio-panel{padding:28px 20px;margin-top:24px}.bio-copy{font-size:16px;line-height:1.8}}