/* Technology 83 Marker α */

/* Self-hosted League Spartan (latin variable, weights 100–900 in one 24KB file).
   Replaces the render-blocking Google Fonts <link>, which cost two extra
   third-party connections (fonts.googleapis.com for the CSS, then gstatic for
   the woff2). font-display: swap keeps text visible while the font loads. */
@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/league-spartan-latin-var-6a86c52d.woff2") format('woff2');
}

/* Metrics-matched fallback: while the real font loads, Arial is reshaped (via
   size-adjust + ascent/descent overrides computed from League Spartan's own
   metrics) to occupy the exact same box. This keeps the swap from reflowing the
   big headings, so font-display: swap no longer costs any layout shift (CLS). */
@font-face {
    font-family: 'League Spartan Fallback';
    /* Arial first (Win/macOS); Arimo & Liberation Sans are metric-identical
       Arial substitutes shipped on Linux/Android, so the overrides below match
       there too; Roboto/Helvetica are close enough as a last resort. */
    src: local('Arial'), local('Arimo'), local('Liberation Sans'),
         local('Roboto'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 111.80%;
    ascent-override: 62.61%;
    descent-override: 19.68%;
    line-gap-override: 0%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Screen-reader / SEO-only text: present in the DOM (so crawlers see the H1) but
   visually hidden. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Height of one "Who We Are" card: the combined section (100vh) minus its
   top padding, 60px bottom padding, 32px divider border, and the 4vh inner
   padding of .combined-top-half. Used to size the collabs band at exactly 2×. */
:root { --who-card-h: calc(100vh - clamp(80px, 7.2vw, 112px) - 60px - 32px - 4vh); }

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

@media (max-width: 768px) {
    html {
        scrollbar-gutter: auto;
        overflow-y: auto;
    }
    body {
        overflow-x: hidden;
        width: 100%;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #000; color: #fff; line-height: 1.05;
    margin: 0; overflow-x: hidden;
}

body.locked { overflow: hidden; position: fixed; width: 100%; }
a { color: #fff; text-decoration: none; transition: color 0.3s, transform 0.3s; }
a:hover { color: #ff0000; transform: scale(1.05); }

nav ul li a.active { color: #ff0000; transform: scale(1.05); }

section { width: 100%; position: relative; transition: opacity 0.6s ease; opacity: 0; }
section.visible { opacity: 1; }
.container { max-width: 1120px; margin: 0 auto; width: 100%; z-index: 3; position: relative; }

.mobile-only-message { display: none; }
.mobile-tab-bar { display: none !important; }
.mobile-sub-menu { display: none; }

/* Scoped to the site nav: a bare `header` selector also caught <header> inside
   other components (e.g. the flavour-profile modal), pinning them to the top of
   the viewport as if they were the nav bar. */
header#main-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1000; display: flex; align-items: center; padding: 0 5%;
    justify-content: space-between;
    height: clamp(80px, 7.2vw, 112px);
    transition: background 0.4s ease, opacity 0.4s ease;
    overflow: visible;
}

.logo { display: flex; justify-content: flex-start; }
.logo img { height: clamp(60px, 4.4vw, 80px); width: auto; display: block; cursor: pointer; }

/* Centered in the space REMAINING after the logo (not the viewport), so the
   first nav item can never crowd the wordmark at mid-desktop widths. */
.nav-container {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 28px;
}
nav ul { list-style: none; display: flex; gap: clamp(20px, 2.2vw, 48px); align-items: center; flex-wrap: nowrap; }
nav ul li a { font-size: clamp(1rem, 1.2vw, 1.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; }

.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 50%;
    transform: translate(-50%, 0); background: rgba(0, 0, 0, 0.95); min-width: clamp(140px, 9.6vw, 144px);
    z-index: 1001; padding: 5px 0; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease;
}
.dropdown-content a {
    color: #fff; padding: clamp(5px, 0.64vw, 6.4px) clamp(10px, 1.2vw, 12px);
    font-size: clamp(0.75rem, 0.88vw, 0.96rem); font-weight: 600; display: block;
    text-align: left; letter-spacing: 1.4px; white-space: nowrap;
}
.dropdown-content a:hover { color: #ff0000; background: transparent; }
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content { visibility: visible; opacity: 1; transform: translate(-50%, 10px); }
/* The "At the Brewery" trigger isn't a link itself — just opens the menu. */
/* The trigger is a <label> (it toggles the mobile submenu checkbox), so it isn't
   matched by the `nav ul li a` rules — restate their typography and colour here
   so it sits identically alongside the real nav links. */
.dropdown-trigger {
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    color: #fff; font-size: clamp(1rem, 1.2vw, 1.6rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap;
    transition: color 0.3s, transform 0.3s;
}
.dropdown-trigger::after { content: '▾'; font-size: 0.7em; line-height: 1; }

#full-view-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 9999; overflow-y: auto; overflow-x: hidden; cursor: pointer;
}
#full-view-overlay img { width: 100vw; height: auto; display: block; }
#menu-toggle, .submenu-toggle { display: none; }
.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1100; margin-top: 25px; }
.hamburger span { width: 30px; height: 3.5px; background: #fff; transition: all 0.4s; }

.hero-character-wrapper { position: relative; display: block; width: 100%; clip-path: inset(0); min-height: 200vh; margin-bottom: 75px; }
.hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 200vh; overflow: hidden; z-index: 1; background: url("/assets/hero-bg-6fae718e.jpg") center/cover no-repeat; }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}

.snap-section {
    scroll-margin-top: clamp(80px, 7.2vw, 112px);
}

#hero, #character, #craft {
    height: 100vh; padding-top: clamp(80px, 7.2vw, 112px); box-sizing: border-box; position: relative; z-index: 3; color: #fff; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
}

#hero .container { text-align: left; max-width: 100%; padding: 0 20px; }
#hero h1 { font-size: clamp(2.25rem, 5vw, 6.4rem); text-shadow: 0 4px 12px #000; line-height: 1.05; position: relative; }

#hero .story {
    display: inline-block; background: #000; color: #fff; border: 3px solid #F6F8EF;
    padding: clamp(15px, 2.4vw, 16px) clamp(30px, 4vw, 36px); font-size: clamp(1.4rem, 3.2vw, 2.24rem);
    font-weight: bold; letter-spacing: 2px; margin-top: clamp(20px, 2.4vw, 32px);
    border-radius: 0; position: relative; cursor: pointer; transition: transform 0.3s ease; white-space: nowrap;
}
#hero .story:hover { transform: scale(1.1); }

.crafted-title { display: block; margin: 0 auto clamp(30px, 4vh, 48px) auto; max-width: 816px; width: clamp(250px, 50.4vw, 713.6px); height: auto; object-fit: contain; }

.cans-wrapper { position: relative; width: 100%; margin: 0 auto; overflow: visible; }
.cans { display: flex; justify-content: center; flex-wrap: nowrap; gap: 0; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: visible; }
#character .cans { padding: 0; }

.cans img { width: 31%; height: auto; object-fit: contain; clip-path: inset(0 29% 0 29%); margin-left: -13.7%; flex-shrink: 0; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; z-index: 1; cursor: pointer; }
.cans img:first-child { margin-left: 0; }
.cans img:hover { transform: scale(1.095) translateY(-12px); z-index: 10; }

#craft .cans img { width: 40%; margin-left: -17.7%; clip-path: inset(0 29% 0 29%); }
#craft .cans img:first-child { margin-left: 0; }

#craft { position: relative; min-height: 100vh; overflow: hidden; height: 100vh; }
.craft-video-container { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: url("/assets/collabsbg-6e1c0778.jpg") center/cover no-repeat; }
.craft-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.craft-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

#craft .craft-headline { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(2.75rem, 5.76vw, 7.6rem); font-weight: 900; line-height: 0.92; text-shadow: 0 4px 20px rgba(0,0,0,0.9); margin-bottom: 20px; letter-spacing: 0.03em; }
#craft .craft-tag { font-size: clamp(1.45rem, 3.04vw, 2.08rem); font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; text-shadow: 0 4px 15px rgba(0,0,0,0.85); margin-bottom: 40px; }

.modal {
    display: none; position: fixed; z-index: 2000; inset: 0;
    background-color: rgba(0,0,0,0.98); align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease; width: 100%; left: 0; right: 0;
}
.modal.show { display: flex; opacity: 1; }
.modal-content, .form-modal-content {
    max-width: 96%; max-height: 96vh; object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); transform: scale(0.88);
}
.modal.show .modal-content, .modal.show .form-modal-content { transform: scale(1); }
.close {
    position: absolute; top: 35px; right: 45px; color: #fff;
    font-size: 58px; font-weight: 300; cursor: pointer; z-index: 2100; transition: color 0.3s;
    line-height: 1;
}
.close:hover { color: #ff0000; }

@media (min-width: 1024px) {
    #hero .container, #character .container {
        max-width: none; width: 80%; margin-left: 10%; margin-right: 10%; padding: 0 32px;
    }
}

#site-wrapper, #street-kitchen-wrapper, #retail-store-wrapper { width: 100%; position: relative; }

#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #000; z-index: 99999; display: flex; align-items: center;
    justify-content: center; text-align: center; transition: opacity 0.6s ease;
    overflow: hidden;
    touch-action: none;
}
.splash-content { max-width: 720px; padding: 40px; width: 100%; }
.splash-logo { height: auto; max-height: clamp(120px, 18vw, 180px); width: 100%; max-width: 85vw; object-fit: contain; margin-bottom: clamp(28px, 6vw, 48px); }
.gateway-options, .age-options { display: flex; gap: clamp(16px, 3vw, 30px); justify-content: center; flex-wrap: wrap; }
.splash-btn { background: transparent; border: 3px solid #fff; color: #fff; padding: clamp(18px, 2.4vw, 25px) clamp(28px, 4vw, 40px); font-size: clamp(1.2rem, 2.4vw, 1.44rem); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; flex: 1 1 220px; min-width: 200px; }
.splash-btn:hover { background: #ff0000; border-color: #ff0000; transform: scale(1.05); }
#splash-screen h2 { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0 0 clamp(28px, 6vw, 48px); letter-spacing: 1px; font-weight: 700; line-height: 1.25; }

@media (max-width: 600px) {
    .splash-content { padding: 28px 22px; }
    .age-options { flex-direction: column; gap: 14px; }
    .splash-btn { width: 100%; min-width: 0; }
}

/* Shared full-viewport page hero (About, Street Kitchen, Retail Store),
   matching the homepage/partnerships hero scale. Top padding clears the
   fixed header. */
.page-hero {
    height: 100vh; min-height: 560px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(80px, 7.2vw, 112px) 5% 0; box-sizing: border-box;
}
.page-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0.5; }
.page-hero-content { position: relative; z-index: 3; padding: 0 20px; }
.page-hero-content h1 {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase;
    font-size: clamp(3rem, 9vw, 8rem); line-height: 0.9; letter-spacing: 1px;
    text-shadow: 0 10px 36px rgba(0,0,0,0.7); margin-bottom: 20px;
}
.page-hero-content p { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: 1px; color: #ccc; }
.sk-info-section { padding: 80px 5%; background: #111; text-align: center; }
.sk-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; max-width: 1120px; margin: 0 auto; }
.sk-info-card h3 { font-size: 2.5rem; color: #ff0000; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
.sk-info-card p { font-size: 1.4rem; line-height: 1.6; color: #ddd; }
.sk-menu-btn { display: inline-block; background: #ff0000; color: #fff; padding: 20px 50px; font-size: 1.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin-top: 60px; transition: background 0.3s; }
.sk-menu-btn:hover { background: #cc0000; color: #fff; }

/* ============================================================
   STREET KITCHEN  (full page redesign — .sk2-* sections)
   ============================================================ */
.sk-menu-btn--sm { padding: 14px 34px; font-size: 1rem; margin-top: 24px; letter-spacing: 1.5px; }

/* Placeholder image treatment — swap for real food/event photos. */
.sk2-ph { background: linear-gradient(135deg, #1d1d1d 0%, #0a0a0a 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sk2-ph span { font-size: clamp(1.5rem, 3vw, 2.4rem); opacity: 0.5; text-align: center; padding: 10px;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #fff; }

/* Intro */
/* Media column gets the larger share and the container is wider: the food shots
   were reading small against a lot of empty column. The text column still ends up
   slightly wider than before, so the three CTAs keep sharing one line. */
.sk2-intro { background: #000; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 3vw, 48px);
    align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 100px) 5%; }
/* Equal columns and a 3:4 frame — the two shots are both natively 3:4, so they
   come out matching in size AND uncropped. */
.sk2-intro-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sk2-intro-img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; }
/* One image instead of a pair (Retail Store): fill the column rather than
   leaving half of it empty. */
.sk2-intro-media--single { grid-template-columns: 1fr; }
/* Placeholder variants (Retail Store, until real store photos land). */
.sk2-intro-media .sk2-ph { aspect-ratio: 1/1; border-radius: 4px; }
.sk2-intro-media .sk2-ph--lg { aspect-ratio: 4/5; }
.sk2-h2 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-weight: 900;
    text-transform: uppercase; color: #fff; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: 1px; margin: 0 0 18px; }
.sk2-intro-text p { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #cfcfcf;
    font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.7; margin: 0; max-width: 46ch; }
.sk2-intro-text p + p { margin-top: 14px; }
.sk2-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Three CTAs share this row inside the intro's text column (~500px at desktop),
   so they're tightened to fit on one line; they still wrap on narrow screens. */
.sk2-intro-actions .sk-menu-btn { margin-top: 0; padding: 13px 16px; font-size: 0.85rem; letter-spacing: 1px; }

/* Anchor jumps (menus button, "More Beer This Way") glide instead of teleporting. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Menu */
.sk2-menu { background: #000; padding: clamp(20px, 3vw, 40px) 5% clamp(56px, 8vw, 110px); }
.sk2-menu-title { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-weight: 900;
    text-transform: uppercase; color: #fff; text-align: center; font-size: clamp(3rem, 8vw, 6.5rem);
    letter-spacing: 1px; margin: 0 0 clamp(36px, 5vw, 60px); }
.sk2-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); max-width: 1180px; margin: 0 auto; }
.sk2-card { border: 1px solid rgba(255,255,255,0.16); background: #0b0b0b; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; }
.sk2-card-title { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-weight: 900;
    text-transform: uppercase; color: #fff; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; margin: 0 0 18px; }
.sk2-card-img { width: 100%; aspect-ratio: 16/10; margin-bottom: 20px; border-radius: 3px; }
.sk2-item-name { color: #e6e6e6; font-size: clamp(0.92rem, 1.05vw, 1.05rem); }
.sk2-item-price { color: #ff3030; font-weight: 700; margin-left: auto; font-size: clamp(0.92rem, 1.05vw, 1.05rem); }
.sk2-reso-card { align-items: flex-start; }

/* Retail Store product list — cards size to their own content (the groups
   differ a lot in length) rather than stretching to the tallest in the row. */
/* Two real columns rather than grid cells: the house brand fills the left, the
   other brands stack down the right. An even grid put the 28-item Parallel 49
   card next to a scatter of 1-6 item cards. */
.rs-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px);
    max-width: 1180px; margin: 0 auto; align-items: start; }
.rs-product-col { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 36px); min-width: 0; }
/* Package format sits where the price used to — muted, so the product name
   still leads the row. */
.rs-item-format { color: #8a8a8a; font-size: 0.8rem; white-space: nowrap; margin-left: 12px; }
.rs-product-note { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #8a8a8a;
    font-size: 0.85rem; font-style: italic; text-align: center; margin: clamp(28px, 3.5vw, 44px) auto 0; }

/* Retail Store info cards — reuses .sk2-card for a consistent look. */
/* Keg rentals — a single centred block between the product list and the info
   cards, so it reads as its own offer rather than another product group. */
.rs-kegs { background: #0a0a0a; padding: clamp(48px, 6vw, 80px) 5%; border-top: 1px solid rgba(255,255,255,0.08); }
.rs-kegs-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.rs-kegs p { color: #cfcfcf; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.7; margin: 16px 0 0; }
.rs-kegs-note { color: #8a8a8a; font-size: 0.9rem; }

/* Keg price table: beer down the side, sizes across. A grid rather than a list
   because the point is comparing 30L against 50L at a glance. */
.rs-keg-table { width: 100%; max-width: 520px; margin: 26px auto 0; border-collapse: collapse; text-align: left; }
.rs-keg-table th, .rs-keg-table td { padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rs-keg-table thead th {
    font-family: 'League Spartan','League Spartan Fallback',sans-serif;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    color: #8a8a8a; border-bottom-color: rgba(255,255,255,0.2);
}
.rs-keg-table tbody th {
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 500; color: #fff; font-size: 0.95rem;
}
.rs-keg-table td { color: #cfcfcf; font-size: 0.95rem; white-space: nowrap; }
.rs-keg-table thead th:not(:first-child), .rs-keg-table td { text-align: right; width: 5.5rem; }
.rs-keg-na { color: #555; }
.rs-kegs .sk2-intro-actions { justify-content: center; }
.rs-info { background: #000; padding: 0 5% clamp(56px, 8vw, 110px); }
.rs-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); max-width: 1180px; margin: 0 auto; text-align: left; }
.sk2-card-body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #cfcfcf; font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 1.7; margin: 0; }
.sk2-card-body + .sk2-card-body { margin-top: 12px; }
@media (max-width: 768px) { .rs-info-grid { grid-template-columns: 1fr; } }

/* Menu tabs (Tap List / Food Menu) */
.sk2-tabs { display: flex; justify-content: center; gap: 14px; margin: 0 0 clamp(32px, 4.5vw, 56px); }
.sk2-tab {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    font-size: clamp(0.95rem, 1.15vw, 1.15rem); color: #fff;
    background: transparent; border: 2px solid rgba(255,255,255,0.35);
    padding: 13px 32px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.sk2-tab:hover { border-color: #fff; }
.sk2-tab.is-active { background: #ff0000; border-color: #ff0000; }

/* Tap list */
.sk2-taps { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); text-align: left; }
.sk2-tap { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sk2-tap-row { display: flex; align-items: flex-start; gap: 14px; }
/* Collapsed-by-default descriptions: the row is a <details> summary. */
summary.sk2-tap-row { cursor: pointer; list-style: none; }
summary.sk2-tap-row::-webkit-details-marker { display: none; }
summary.sk2-tap-row:hover .sk2-tap-name { color: #ff2a2a; }
/* Explicit "More / Less" pill so the expand affordance is unmissable. */
.sk2-tap-toggle {
    margin-left: auto; flex: none; margin-top: 2px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.7rem;
    color: #ff2a2a; border: 1px solid rgba(255, 42, 42, 0.6); border-radius: 2px;
    padding: 5px 10px 4px; transition: background 0.15s ease, color 0.15s ease;
}
summary.sk2-tap-row:hover .sk2-tap-toggle { background: #ff0000; color: #fff; border-color: #ff0000; }
.sk2-toggle-less { display: none; }
details[open] .sk2-toggle-more { display: none; }
details[open] .sk2-toggle-less { display: inline; }
.sk2-tap-chev { font-size: 0.75rem; line-height: 1; transition: transform 0.2s ease; }
details[open] .sk2-tap-chev { transform: rotate(180deg); }
.sk2-tap-no {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; color: #ff2a2a; font-size: 1.15rem; min-width: 24px; text-align: right; flex: none;
}
.sk2-tap-dot { width: 15px; height: 15px; border-radius: 50%; background: #333; border: 1px solid rgba(255,255,255,0.35); flex: none; margin-top: 1px; }
.sk2-tap-main { min-width: 0; }
.sk2-tap-name {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: #fff; font-size: 1.02rem; line-height: 1.15; margin: 0;
    transition: color 0.15s ease;
}
.sk2-tap-brewery { color: #9a9a9a; font-size: 0.72rem; letter-spacing: 1.5px; margin-left: 6px; }
.sk2-tap-style { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #cfcfcf; font-size: 0.85rem; margin: 3px 0 0; }
/* Expanded description — indented to sit under the name column (24px number
   + 15px dot + two 14px gaps). */
.sk2-tap-desc { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #8f8f8f; font-size: 0.82rem; line-height: 1.55; margin: 7px 0 2px 67px; }

/* Food menu lists */
.sk2-food-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.sk2-food-list li { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sk2-food-list li:last-child { border-bottom: none; }
.sk2-food-row { display: flex; align-items: baseline; gap: 10px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.sk2-food-desc { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #9a9a9a; font-size: 0.85rem; line-height: 1.5; margin: 3px 0 0; }
.sk2-diet {
    display: inline-block; border: 1px solid #ff2a2a; color: #ff2a2a;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 1px;
    padding: 1px 5px; border-radius: 2px; margin-left: 6px; vertical-align: 2px;
}
.sk2-menu-empty { color: #9a9a9a; font-style: italic; text-align: center; margin: 0 auto; }

/* Testimonials */
.sk2-love { background: #0a0a0a; text-align: center; padding: clamp(56px, 8vw, 110px) 5%; }
.sk2-love-title { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.sk2-love-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 60px); max-width: 1100px; margin: 0 auto; text-align: left; }
.sk2-quote { margin: 0; }
.sk2-quote-mark { color: #ff0000; font-size: 3rem; line-height: 0.7; font-family: Georgia, serif; display: block; }
.sk2-quote-headline { font-family: 'League Spartan','League Spartan Fallback',sans-serif; text-transform: uppercase; color: #fff; font-size: 1rem; letter-spacing: 1.5px; margin: 8px 0 12px; font-weight: 700; }
.sk2-quote-text { font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; color: #c4c4c4; font-size: 1rem; line-height: 1.7; margin: 0 0 14px; font-style: italic; }
.sk2-quote-cite { color: #888; font-size: 0.9rem; font-style: normal; }

/* Yes / No amenities */
.sk2-amenities { background: #000; padding: clamp(48px, 7vw, 100px) 5%; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); max-width: 1100px; margin: 0 auto; }
.sk2-amenity-group { text-align: center; }
.sk2-amenity-head { font-family: 'League Spartan','League Spartan Fallback',sans-serif; font-weight: 900; text-transform: uppercase; color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); margin: 0; line-height: 1; }
.sk2-amenity-sub { color: #9a9a9a; font-style: italic; font-size: 0.95rem; margin: 8px 0 clamp(28px, 3.5vw, 44px); }
.sk2-amenity-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 28px); }
.sk2-amenity { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Hop icon: the supplied pictogram as an alpha mask, tinted by currentColor.
   YES hops face up (cone tip up); NO hops hang tip-down (natural). */
.sk-hop {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("/assets/hop-cone-cc1d795e.png") center / contain no-repeat;
    mask: url("/assets/hop-cone-cc1d795e.png") center / contain no-repeat;
}
.sk2-amenity .sk-hop { width: clamp(34px, 3vw, 44px); aspect-ratio: 150 / 192; color: #4caf50; transform: scaleY(-1); }
.sk2-amenity span { color: #cfcfcf; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; line-height: 1.3; font-weight: 600; }
.sk2-amenity--no .sk-hop { color: #ff2a2a; opacity: 0.85; transform: none; }

/* Events */
.sk2-events { background: #0a0a0a; padding: clamp(56px, 8vw, 110px) 5%; }
.sk2-events-title { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.sk2-events-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* One-off specials: poster + body feature cards. */
.sk2-special { display: flex; background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; min-height: 150px; }
.sk2-special-media { width: 220px; flex: none; background: #1a1a1a; display: flex; align-items: center; justify-content: center; }
.sk2-special-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk2-special-media .sk2-special-fallback { width: 72px; height: 72px; object-fit: contain; opacity: 0.5; }
.sk2-special-body { padding: 18px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; }
.sk2-special-chip { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: rgba(255,0,0,0.7); border-radius: 999px; padding: 3px 12px; }
.sk2-special-title { font-family: 'League Spartan','League Spartan Fallback',sans-serif; text-transform: uppercase; color: #fff; font-size: 1.5rem; letter-spacing: 1px; font-weight: 800; margin: 4px 0 0; }
.sk2-special-when { color: #bbb; font-size: 0.95rem; margin: 0; }
.sk2-special .sk2-event-more { margin-top: auto; align-self: flex-end; }

/* The weekly rhythm: quiet rows, like opening hours. */
.sk2-rhythm { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px 22px 10px; }
.sk2-rhythm-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #777; font-weight: 700; margin: 12px 0 4px; }
.sk2-rhythm-row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.sk2-rhythm-title { font-family: 'League Spartan','League Spartan Fallback',sans-serif; text-transform: uppercase; color: #fff; font-size: 1rem; letter-spacing: 1px; font-weight: 700; flex: 1 1 160px; }
.sk2-rhythm-when { color: #9a9a9a; font-size: 0.9rem; }
.sk2-rhythm-skipped { display: block; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #ff6b6b; margin-top: 3px; }
.sk2-rhythm-when b { color: #fff; font-weight: 600; }

.sk2-event-more { border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #ddd; border-radius: 999px; padding: 7px 16px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.sk2-event-more:hover { border-color: #fff; color: #fff; }

/* Details popup (native <dialog>). margin: auto is load-bearing — the site's
   global reset zeroes margins, which strips the UA's centering and pins an
   un-margined dialog to the viewport's top-left corner. */
.sk2-event-dialog { margin: auto; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: #141414; color: #fff; padding: 0; width: min(500px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.sk2-event-dialog[open] { animation: sk2-dialog-in 0.22s ease-out; }
@keyframes sk2-dialog-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
.sk2-event-dialog::backdrop { background: rgba(0,0,0,0.75); }

/* Poster-led header: full-bleed image, title on a scrim (page-hero grammar). */
.sk2-event-dialog-hero { position: relative; height: 230px; background: #1a1a1a; }
.sk2-event-dialog-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk2-event-dialog-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.12) 100%); }
.sk2-event-dialog-hero-text { position: absolute; left: 20px; right: 20px; bottom: 16px; }
.sk2-event-dialog-hero-text .sk2-special-chip { display: inline-block; margin-bottom: 8px; }

/* Typographic header for events without a poster. */
.sk2-event-dialog-header { position: relative; padding: 24px 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sk2-event-dialog-eyebrow { font-family: 'League Spartan','League Spartan Fallback',sans-serif; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: #888; font-weight: 700; margin: 0 0 6px; }
.sk2-event-dialog-bar { width: 56px; height: 4px; background: #e00; margin-top: 12px; }

.sk2-event-dialog-title { font-family: 'League Spartan','League Spartan Fallback',sans-serif; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 2rem); letter-spacing: 1px; font-weight: 900; line-height: 1.05; margin: 0; }
.sk2-event-dialog-close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #ddd; font-size: 1.15rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; }
.sk2-event-dialog-close:hover { color: #fff; border-color: #fff; }
.sk2-event-dialog-close.is-overlay { background: rgba(0,0,0,0.55); }

.sk2-event-dialog-body { padding: 16px 22px 22px; }
.sk2-event-dialog-when { display: flex; align-items: center; gap: 8px; color: #ff4d4d; font-size: 0.9rem; font-weight: 600; margin: 0 0 12px; }
.sk2-event-dialog-when svg { flex: none; }
.sk2-event-dialog-desc { color: #c4c4c4; font-size: 0.95rem; line-height: 1.65; }
.sk2-event-dialog-desc p { margin: 0 0 10px; }
.sk2-event-dialog-desc a { color: #ff4d4d; }

@media (max-width: 768px) {
    .sk2-intro { grid-template-columns: 1fr; }
    .sk2-menu-grid, .rs-product-grid { grid-template-columns: 1fr; }
    .sk2-taps { grid-template-columns: 1fr; }
    .sk2-tab { padding: 11px 22px; }
    .sk2-love-grid { grid-template-columns: 1fr; gap: 36px; }
    .sk2-amenity-row { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; }
    .sk2-special { flex-direction: column; }
    .sk2-special-media { width: 100%; aspect-ratio: 16/7; }
    .sk2-special .sk2-event-more { margin-top: 8px; }
}

/* ============================================================
   PARTNERSHIPS  (collabs index redesign)
   ============================================================ */
.pship { background: #000; color: #fff; }

/* Hero: uses the shared .page-hero component. */

/* Intro */
/* 50/50 so the column divider sits at the centre — matching the alternating
   partnership cards below (also 50/50), so every text/image boundary lines up
   down the page. Equal halves also fix the earlier imbalance where the photo
   was the narrower column beside a wide black text block. */
.pship-intro { display: grid; grid-template-columns: 1fr 1fr; background: #000; }
/* Centre the copy vertically so the column isn't padded black at the bottom. */
.pship-intro-text { padding: clamp(48px, 7vw, 110px) clamp(28px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.pship-intro-media { min-height: 340px; background-size: cover; background-position: center; }
.pship-section-title {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase; color: #fff;
    font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 0.95; letter-spacing: 1px;
    margin: 0 0 clamp(20px, 2.4vw, 30px);
}
.pship-intro-text p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #cfcfcf; font-size: clamp(0.98rem, 1.15vw, 1.15rem); line-height: 1.75;
    margin: 0 0 14px; max-width: 60ch;
}

/* Shared eyebrow + button */
.pship-eyebrow {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase; letter-spacing: 3px; font-weight: 700;
    font-size: 0.78rem; color: #8a8a8a;
}
.pship-eyebrow--light { color: rgba(255,255,255,0.85); }
.pship-eyebrow--red { color: #ff0000; }
.pship-btn {
    display: inline-flex; align-items: center;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    font-size: 0.95rem; color: #fff; background: #ff0000;
    padding: 14px 30px; text-decoration: none; border-radius: 2px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pship-btn:hover { background: #cc0000; transform: translateY(-2px); }

/* Featured partnership cards — alternating image / text. */
.pship-cards { display: flex; flex-direction: column; }
.pship-card { display: flex; align-items: stretch; min-height: clamp(360px, 42vw, 560px); }
.pship-card.is-image-right { flex-direction: row-reverse; }
.pship-card-media { flex: 1 1 50%; min-width: 0; background-size: cover; background-position: center; }
.pship-card-media--empty { background: #161616; }
.pship-card-text {
    flex: 1 1 50%; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: clamp(16px, 2vw, 26px); padding: clamp(36px, 5.5vw, 90px);
}
.pship-card.is-light .pship-card-text { background: #f6f8ef; }
.pship-card.is-dark  .pship-card-text { background: #0d0d0d; }
.pship-card-title {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase; line-height: 0.98;
    font-size: clamp(1.9rem, 3.2vw, 3.1rem); margin: 0;
}
.pship-card.is-light .pship-card-title { color: #111; }
.pship-card.is-dark  .pship-card-title { color: #fff; }

/* Feature highlight (DJ / music) — copy above, click-to-play video below. */
.pship-feature {
    position: relative; background: #050505;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(60px, 10vh, 130px) 6%; box-sizing: border-box; text-align: center;
}
.pship-feature::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(120,0,0,0.35) 0%, rgba(0,0,0,0.78) 75%);
}
.pship-feature-inner { position: relative; z-index: 1; max-width: 760px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pship-feature-title {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; font-style: italic; text-transform: uppercase; color: #ff2a2a;
    font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.9; margin: 0;
    text-shadow: 0 0 30px rgba(255,0,0,0.45), 0 8px 30px rgba(0,0,0,0.6);
}
.pship-feature-sub {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #eaeaea; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.7; max-width: 620px; margin: 0 auto;
}

/* Click-to-play video card */
.pship-video {
    position: relative; z-index: 1;
    width: 100%; max-width: 900px; aspect-ratio: 16 / 9;
    margin: clamp(32px, 4.5vw, 56px) auto 0;
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.pship-video-poster {
    position: absolute; inset: 0; width: 100%; height: 100%;
    padding: 0; border: 0; cursor: pointer;
    background-size: cover; background-position: center; background-color: #111;
    display: flex; align-items: center; justify-content: center;
}
.pship-play {
    width: clamp(62px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%;
    background: rgba(255, 0, 0, 0.92);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
/* Play triangle */
.pship-play::after {
    content: ''; display: block;
    border-style: solid; border-width: 0.62em 0 0.62em 1.05em;
    border-color: transparent transparent transparent #fff;
    font-size: clamp(15px, 1.7vw, 21px); margin-left: 0.2em;
}
.pship-video-poster:hover .pship-play,
.pship-video-poster:focus-visible .pship-play { transform: scale(1.09); background: #ff0000; }
.pship-video-frame, .pship-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* No Point Music sessions — a row of click-to-play video cards. */
.pship-sessions-grid {
    position: relative; z-index: 1; width: 100%; max-width: 1200px;
    margin: clamp(32px, 4.5vw, 56px) auto 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px);
}
.pship-session { margin: 0; display: flex; flex-direction: column; gap: 14px; }
/* In the grid the card fills its column rather than the lone-video max-width,
   and drops the top margin meant for a single centred video. */
.pship-sessions-grid .pship-video { max-width: none; margin: 0; }
.pship-session-caption { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.pship-session-name {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    color: #fff; font-size: 1.15rem; line-height: 1.1;
}
.pship-session-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
@media (max-width: 860px) {
    .pship-sessions-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* Static merch teaser. */
/* Shared merch teaser (partnerships + beers). */
.merch-teaser { background: #0a0a0a; }
.merch-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: clamp(360px, 40vw, 520px); }
.merch-photo {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%); padding: 40px;
}
.merch-img { width: clamp(150px, 22vw, 260px); height: auto; opacity: 0.92; }
.merch-info {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 12px; padding: clamp(36px, 5vw, 80px); background: #111;
}
.merch-eyebrow {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase; letter-spacing: 3px; font-weight: 700;
    font-size: 0.78rem; color: #ff0000;
}
.merch-name {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase; color: #ff0000;
    font-size: clamp(2rem, 3.4vw, 3rem); line-height: 0.98; margin: 0;
}
.merch-price {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 700; color: #fff; font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 0 0 8px;
}
.merch-btn {
    display: inline-flex; align-items: center;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    font-size: 0.95rem; color: #fff; background: #ff0000;
    padding: 14px 30px; text-decoration: none; border-radius: 2px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.merch-btn:hover { background: #cc0000; transform: translateY(-2px); }

@media (max-width: 768px) {
    .pship-intro { grid-template-columns: 1fr; }
    .pship-intro-media { min-height: 280px; order: -1; }
    .pship-card, .pship-card.is-image-right { flex-direction: column; min-height: 0; }
    .pship-card-media { min-height: 240px; }
    .pship-card-text { padding: 32px 24px 40px; }
    .merch-grid { grid-template-columns: 1fr; }
    .merch-photo { padding: 48px 30px; }
}

.slide-gallery { position: relative; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; }
.slide-gallery img { position: absolute; max-width: 100%; max-height: 100%; object-fit: contain; object-position: left center; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.slide-gallery img.active { opacity: 1; transform: translateY(0); z-index: 2; }

#collab-modal { flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.collab-modal-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.collab-modal-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
.collab-modal-content { position: relative; z-index: 10; width: 95%; max-width: 1400px; max-height: 85vh; overflow-y: auto; padding: 40px; text-align: center; scrollbar-width: thin; scrollbar-color: #ff0000 #111; margin-left: auto; margin-right: auto; }
.collab-modal-content::-webkit-scrollbar { width: 8px; }
.collab-modal-content::-webkit-scrollbar-track { background: #111; }
.collab-modal-content::-webkit-scrollbar-thumb { background-color: #ff0000; border-radius: 4px; }
#collab-modal-title { font-size: clamp(2.5rem, 4.8vw, 3.6rem); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: 0 4px 15px rgba(0,0,0,0.9); }
.collab-modal-body {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: stretch;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .collab-modal-body {
        flex-direction: column;
        gap: 20px;
    }
}
#collab-modal-desc { font-size: 1.3rem; line-height: 1.8; color: #ddd; flex: 2; text-align: left; margin: 0; }
#collab-modal-gallery { flex: 2.5; height: 45vh; min-height: 350px; border: 2px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4); border-radius: 12px; display: flex; justify-content: center; }
#collab-modal-gallery img { object-position: center; }
.collab-close { z-index: 20; }

#beer-modal { flex-direction: column; }
.beer-modal-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.beer-modal-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.40); }
.beer-modal-content { position: relative; z-index: 10; width: 95%; max-width: 1120px; height: 88vh; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.beer-modal-split { display: grid; grid-template-columns: 40% 60%; align-items: center; width: 100%; height: 100%; }
.beer-modal-left { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#beer-modal-can { position: absolute; height: 95vh; width: auto; max-width: none; top: 50%; left: 45%; transform: translate(-50%, -50%); filter: drop-shadow(15px 20px 30px rgba(0,0,0,0.9)); }
.beer-modal-right { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 6vh; height: 100%; padding-right: 40px; gap: 15px; z-index: 5; pointer-events: auto; }
.beer-detail-card { background: linear-gradient(135deg, rgba(20,20,20,0.65) 0%, rgba(5,5,5,0.45) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 25px 35px; box-shadow: 0 15px 35px rgba(0,0,0,0.3); width: 100%; max-width: 640px; text-align: left; flex-shrink: 0; }
#card-title { padding-bottom: 20px; }
#beer-modal-title { font-size: clamp(2.5rem, 3.2vw, 3.2rem); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; color: #fff; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.8); word-wrap: break-word; }
#beer-modal-style { font-size: clamp(1.2rem, 2vw, 1.28rem); color: #ff0000; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; }
.beer-modal-subheadline { font-size: 1.25rem; font-weight: bold; color: #fff; margin-bottom: 0; font-style: italic; line-height: 1.4; opacity: 0.9; }
/* Wraps: the Colour and Formats boxes are variable-width, so a fixed no-wrap
   row overflowed on beers with several formats. */
.beer-stats-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 22px 34px; padding: 15px 35px; align-items: center; }
.stat-box { display: flex; flex-direction: column; }
.stat-label { font-size: 0.85rem; color: #aaa; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }
.stat-box span:not(.stat-label) { font-size: 1.6rem; font-weight: 800; color: #fff; }

/* Beer colour (SRM) swatch. The inner ring keeps very dark beers — SRM 30+ is
   near-black — from disappearing against the dark stat card. */
.stat-box span.beer-colour { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.beer-swatch {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.stat-box span.beer-colour-name { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }

/* Ingredients — comma lists from the API rendered as chips. */
.beer-ingredients { display: flex; flex-direction: column; gap: 14px; }
.ingredient-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ingredient-label {
    flex: none; min-width: 76px;
    font-size: 0.8rem; color: #aaa; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
}
.ingredient-items { display: flex; flex-wrap: wrap; gap: 8px; }
.ingredient-chip {
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px; padding: 5px 13px;
    font-size: 0.9rem; color: #e8e8e8; white-space: nowrap;
}
/* Allergens are safety info, so they read a step louder than the ingredient
   chips — separated by a rule and tinted amber (not red: "contains barley" is
   true of essentially every beer and shouldn't look like a warning). */
.ingredient-row--allergens {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px; margin-top: 2px;
}
.ingredient-row--allergens .ingredient-label { color: #e0b050; }
.ingredient-chip--allergen {
    background: rgba(224, 176, 80, 0.12); border-color: rgba(224, 176, 80, 0.45);
    color: #f0cd85; font-weight: 600;
}

.beer-where-btn { background: #ff0000; color: #fff; border: none; padding: 10px 20px; font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background 0.3s; border-radius: 4px; height: 100%; }
.beer-where-btn:hover { background: #cc0000; color: #fff; transform: scale(1.02); }

#beer-modal-desc { font-size: 1.15rem; line-height: 1.7; color: #ddd; margin: 0; }
#beer-modal-gallery { flex: 1; min-height: 25vh; width: 100%; max-width: 640px; margin-top: 10px; background: transparent; border: none; }
.beer-close { z-index: 20; }

@media (max-width: 768px) {
    .beer-modal-split { display: flex !important; flex-direction: column !important; gap: 20px !important; height: auto !important; width: 100% !important; }
    .beer-modal-left { height: auto !important; width: 100% !important; overflow: visible !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 60px 0 10px !important; }
    #beer-modal-can { position: relative !important; height: 38vh !important; width: auto !important; max-width: 85% !important; top: auto !important; left: auto !important; transform: none !important; display: block !important; margin: 0 auto !important; }
    .beer-modal-right { padding-right: 0 !important; padding-top: 0 !important; width: 100% !important; box-sizing: border-box !important; }
    .beer-detail-card { padding: 16px !important; width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; }
    .beer-stats-row { gap: 20px !important; flex-wrap: wrap !important; padding: 12px 16px !important; }
    #beer-modal-gallery { height: 25vh !important; margin-top: 15px !important; width: 100% !important; }
    #beer-modal-where-box { width: 100% !important; margin-left: 0 !important; align-items: stretch !important; margin-top: 15px !important; flex-direction: column !important; gap: 12px !important; }
    #beer-modal-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
}

#content-shifter {
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
body.map-mode #content-shifter, body.collection-mode #content-shifter, body.beers-mode #content-shifter, body.collabs-mode #content-shifter { transform: translateX(-100vw); }

#map-master, #collection-master, #beers-master {
    position: fixed; top: 0; left: 0; right: 0; margin: 0 auto;
    width: 100%; height: 100vh; background: #000;
    z-index: 500; transform: translateX(-100vw);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1); overflow: hidden;
}
#map-master, #beers-master { transform: translateX(100vw); }
#map-master { display: flex; flex-direction: column; padding-top: clamp(80px, 7.2vw, 112px); }
#collection-master { transform: translateY(100vh); overflow-y: auto; overflow-x: hidden; padding-top: clamp(80px, 7.2vw, 112px); scrollbar-width: none; z-index: 600; }
#collection-master::-webkit-scrollbar { display: none; }

body.map-mode #map-master, body.collection-mode #collection-master, body.beers-mode #beers-master, body.collabs-mode #collabs-master { transform: translateX(0); }
body.collection-mode #collection-master { transform: translateY(0); }

#beers-scroller {
    width: 100%; height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
#beers-scroller::-webkit-scrollbar { display: none; }

/* ============================================================
   ABOUT US  (vertical-scroll redesign)
   ============================================================ */
/* No top padding: the shared .page-hero clears the fixed header itself. */
.au-page { background: #000; color: #fff; }

/* Full-bleed story sections: text over a darkened photo. */
.au-story {
    position: relative;
    background-size: cover; background-position: center;
    display: flex; justify-content: center;
    padding: clamp(64px, 12vh, 160px) 6% clamp(48px, 9vh, 110px);
    box-sizing: border-box;
}
.au-story::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.82) 100%);
}
.au-story--origin { min-height: 96vh; align-items: flex-end; background-position: center 18%; }
.au-story--today  { min-height: 78vh; align-items: center; }
.au-story-inner { position: relative; z-index: 1; width: 100%; max-width: 760px; text-align: center; }

/* 4 — Two-column values band over the brewhouse. */
.au-values {
    position: relative;
    background-size: cover; background-position: center;
    padding: clamp(56px, 10vh, 130px) 6%;
    box-sizing: border-box;
}
.au-values::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(0,0,0,0.74);
}
.au-values-grid {
    position: relative; z-index: 1;
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
}
.au-value { text-align: center; }

/* Shared typography — League Spartan headings (as on the homepage). */
.au-heading {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase; color: #fff;
    line-height: 0.95; letter-spacing: 1px;
    font-size: clamp(2.1rem, 5vw, 4rem);
    margin: 0 0 clamp(18px, 2.4vw, 30px);
    text-shadow: 0 6px 24px rgba(0,0,0,0.65);
}
.au-heading--sm { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom: clamp(14px, 1.8vw, 22px); }
.au-page p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.02rem, 1.25vw, 1.3rem);
    line-height: 1.75; color: #e8e8e8;
    margin: 0 auto clamp(16px, 1.6vw, 22px);
    max-width: 68ch;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.au-page p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .au-values-grid { grid-template-columns: 1fr; gap: clamp(36px, 9vw, 56px); }
    .au-story--origin { min-height: 86vh; background-position: center 12%; }
    .au-story--today { min-height: 66vh; }
}

#map { flex-grow: 1; position: relative; width: 100%; }

#filter-container { position: absolute; top: 20px; left: 20px; background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 10; width: 320px; transition: all 0.3s ease; }
#filter-header { display: flex; justify-content: space-between; align-items: center; }
#filter-header h3 { margin: 0; font-size: 20px; color: #333; pointer-events: none; }
#filter-toggle { font-size: 16px; transition: transform 0.3s ease; color: #333; }
#filter-content { margin-top: 15px; }
.filter-option { display: flex; align-items: center; margin-bottom: 12px; }
.filter-option input { margin-right: 12px; cursor: pointer; transform: scale(1.4); }
.filter-option label { font-size: 20px; cursor: pointer; color: #444; }

.mapboxgl-popup-content { padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); min-width: 200px; color: #333; }
.popup-title { font-weight: bold; font-size: 16px; margin-bottom: 4px; }
.popup-type { color: #666; font-size: 12px; margin-bottom: 8px; text-transform: uppercase; }
.popup-address { margin-bottom: 12px; font-size: 14px; }

.directions-btn { display: block; background-color: #11b4da; color: #ffffff; text-align: center; padding: 8px 12px; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 13px; transition: background-color 0.2s; margin-top: 10px; }
.directions-btn:hover { background: #0d96b8; color: #fff; }
#close-map-btn { position: absolute; top: 20px; right: 60px; z-index: 10; background: #333; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 24px; line-height: 24px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: background 0.2s; }
#close-map-btn:hover { background: #000; }

.newsletter-wrapper { width: 100%; background: #000; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding-top: clamp(80px, 7.2vw, 112px); box-sizing: border-box; z-index: 10; scroll-snap-align: start; }
.newsletter-top {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: clamp(40px, 5vw, 100px);
    padding: 0 clamp(40px, 6vw, 120px);
    width: 100%;
    box-sizing: border-box;
}
.newsletter-intro { min-width: 0; }
.newsletter-title { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(3rem, 4vw, 5rem); font-weight: 900; line-height: 0.9; color: #ff0000; letter-spacing: clamp(-2px, -0.32vw, -4px); margin-bottom: 20px; text-transform: uppercase; }
.newsletter-subtitle { font-size: clamp(1.1rem, 1.28vw, 1.4rem); font-weight: 400; line-height: 1.35; margin-bottom: clamp(30px, 3.2vw, 46.4px); color: #fff; }
.newsletter-form { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 19.2px); align-items: stretch; width: 100%; min-width: 0; }
/* NOT text-transform: uppercase. That styles only what's displayed, so someone
   typing "Sam@Example.com" sees "SAM@EXAMPLE.COM" while the value submitted is
   unchanged — the field appears to be doing something to their input that it
   isn't. The placeholders are written in caps in the markup, so the look holds
   without lying about the content. */
.email-input { width: 100%; min-width: 0; flex: 0 0 auto; height: clamp(60px, 4vw, 65.6px); background: #ffffff; color: #000; border: none; font-size: clamp(1rem, 1.12vw, 1.2rem); font-weight: 700; padding: 0 clamp(15px, 1.6vw, 25.6px); outline: none; box-sizing: border-box; }
.email-input::placeholder { color: #ff0000; }
.subscribe-btn { width: 100%; flex: 0 0 auto; height: clamp(60px, 4vw, 65.6px); padding: 0 clamp(30px, 3.2vw, 54.4px); background: #000000; color: #ff0000; border: 3px solid #ffffff; font-size: clamp(1rem, 1.12vw, 1.2rem); font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; box-sizing: border-box; }
.subscribe-btn:hover { background: #bbbbbb; color: #111; border-color: #bbb; }
/* Honeypot: kept off-screen (not display:none, which some bots skip) so real
   users never see or focus it, but bots still fill it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.links-column { font-size: clamp(1.2rem, 1.28vw, 1.36rem); font-weight: 700; text-transform: uppercase; line-height: 1.45; text-align: left; flex-shrink: 0; }
@media (max-width: 850px) {
    .newsletter-top { grid-template-columns: 1fr; gap: 36px; align-items: start; }
    .links-column { text-align: left; width: 100%; }
}
.links-column a { color: #ffffff; text-decoration: none; display: block; margin-bottom: 12px; transition: color 0.3s ease; }
.links-column a:hover { color: #ff0000; }

.footer-bottom { height: clamp(120px, 12vh, 208px); background: #000000; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4.8vw, 96px); border-top: 1px solid rgba(255,255,255,0.12); }
.footer-bottom .footer-logo img { height: clamp(45px, 4.8vw, 86.4px); width: auto; }
.footer-bottom .footer-right { text-align: right; font-size: clamp(0.9rem, 0.96vw, 1.1rem); line-height: 1.5; color: #fff; text-transform: uppercase; }

.form-modal-content { background: #111111; width: 90%; max-width: 921px; padding: clamp(40px, 4vw, 48px) clamp(30px, 4.8vw, 64px); border: 3px solid #ffffff; position: relative; text-align: left; overflow-y: auto; max-height: 90vh; }
.form-modal-content .modal-title { font-size: clamp(2rem, 2.4vw, 2.6rem); font-weight: 900; color: #ffffff; margin-bottom: clamp(25px, 2.4vw, 32px); text-align: center; text-transform: uppercase; }
.form-group { margin-bottom: clamp(15px, 1.6vw, 19.2px); }
.form-group label { display: block; font-size: clamp(1rem, 0.88vw, 0.9rem); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; color: #ddd; }
.form-input, .form-textarea { width: 100%; background: #222; border: 2px solid #ffffff; color: #fff; font-size: clamp(1rem, 0.96vw, 1rem); padding: 14px 20px; outline: none; transition: border-color 0.3s ease; }
.form-input:focus, .form-textarea:focus { border-color: #bbbbbb; }
.form-textarea { height: clamp(140px, 16vh, 176px); resize: vertical; }
.submit-btn { margin-top: 20px; width: 100%; height: clamp(60px, 4vw, 62.4px); background: #ffffff; color: #ff0000; font-size: clamp(1.2rem, 1.28vw, 1.3rem); font-weight: 900; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s ease; }
.submit-btn:hover { background: #bbbbbb; color: #111111; }

#retail-modal .form-modal-content { display: flex; align-items: center; justify-content: center; height: 50vh; text-align: center; background: #0a0a0a; border: 2px solid #333; }
.retail-placeholder-text { font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 900; color: #555; text-transform: uppercase; letter-spacing: 4px; line-height: 1.2; }

.close-btn { position: absolute; top: 20px; right: 40px; color: #fff; background: transparent; border: none; font-size: 50px; font-weight: 300; cursor: pointer; z-index: 610; transition: color 0.3s; }
.close-btn:hover { color: #ff0000; }

/* ============================================================
   OUR BEERS  (collection redesign — category sections + stories)
   ============================================================ */
.beers-page { background: #000; color: #fff; padding-top: clamp(80px, 7.2vw, 112px); }

/* Category section: centred title + blurb + a clean row of cans. */
/* Narrower side padding than the other sections: the can rows need the width so
   the largest category (6 items) still fits on one line as the shots scale up. */
.beers-cat { text-align: center; padding: clamp(48px, 7vw, 100px) clamp(20px, 3vw, 60px) clamp(40px, 6vw, 80px); }
.beers-cat-title {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase; color: #fff;
    font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.92; letter-spacing: 1px; margin: 0 0 16px;
}
.beers-cat-desc {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #b9b9b9; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6;
    max-width: 760px; margin: 0 auto clamp(36px, 4vw, 56px);
}

/* Clean, non-overlapping row of cans, centred, wrapping when needed. */
.beers-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
    gap: clamp(10px, 1.5vw, 28px); max-width: 1640px; margin: 0 auto;
}
/* Sized so the largest category (6 items) still fits on one line at desktop
   widths. */
.beers-item {
    flex: 0 0 auto; width: clamp(105px, 14vw, 240px);
    display: block; transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Default assumes the house can template (13 of 15 shots): a square canvas with
   the can occupying only the central ~34% of the width (measured: 33%/33% side
   padding, consistent within 1%). Without a crop, two thirds of every apparent
   "gap" between cans is baked-in transparent padding. Crop to the central 38%
   band so the can fills ~90% of its slot and the flex gap is the real gap.
   Nothing is lost vertically — cover scales the square canvas to the box
   height, and the box is narrower than the canvas. */
.beers-item img {
    width: 100%; height: auto; object-fit: cover; aspect-ratio: 19 / 50;
    display: block; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.8));
}
.beers-item:hover { transform: translateY(-12px) scale(1.05); }

/* Seasonal sash. The card is a bare transparent product shot with no chrome, so
   a corner ribbon would float in space — a centred pill at the base reads as
   belonging to the beer. Only limited releases get one (see the view). */
.beers-sash {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
    z-index: 2; white-space: nowrap;
    background: rgba(20,20,20,0.92); border: 1px solid rgba(255,255,255,0.25); color: #ddd;
    border-radius: 999px; padding: 4px 12px;
    font-size: clamp(0.55rem, 0.85vw, 0.7rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.beers-sash.is-on { background: #e2231a; border-color: #e2231a; color: #fff; }
/* The card itself is the positioning context for the sash. */
.beers-item { position: relative; }
/* Out of season reads as quieter without looking broken. */
.beers-item:has(.beers-sash:not(.is-on)) img { opacity: 0.72; transition: opacity 0.3s; }
.beers-item:has(.beers-sash:not(.is-on)):hover img { opacity: 1; }

/* Availability stat on the show page. */
.beer-availability { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.beer-season-tag {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    border-radius: 999px; padding: 3px 10px;
    background: rgba(255,255,255,0.1); color: #bbb;
}
.beer-season-tag.is-on { background: #e2231a; color: #fff; }
/* Tightly-cropped shots (non-square canvas, flagged by product_shot_controller)
   are already trimmed, so cropping them again would clip the product. Render at
   natural proportions instead. The slot width is unchanged, which is what we
   want physically: a stubby 355ml can shares its diameter with a 473ml can, so
   equal width and a shorter natural height is exactly right — flex-end on the
   row lines them up on a shelf. */
.beers-item.is-tight img { aspect-ratio: auto; object-fit: contain; }
/* Mix packs are boxes and get a wider slot. Driven solely by mix_pack? from the
   API — never by image shape, which says nothing about what the product is. */
.beers-item.is-pack { width: clamp(220px, 28vw, 400px); }
.beers-item.is-pack img { aspect-ratio: auto; object-fit: contain; }

/* Desktop: each category is a single row. Items shrink to fit the width; a
   category too big to fit even at its min size scrolls horizontally (a
   carousel). Mobile keeps the wrapping base rule — two lines there is fine.
   `safe center` centres the row when it fits but falls back to start-alignment
   on overflow, so the first item is never pushed off the left edge and made
   unreachable. Vertical padding gives the hover lift (translateY -12px) and the
   cans' drop-shadow room, since overflow-x also clips the vertical axis. */
@media (min-width: 769px) {
    .beers-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: safe center;
        scroll-snap-type: x proximity;
        padding: 18px 4px 30px;
    }
    .beers-item { flex: 0 1 auto; min-width: 88px; scroll-snap-align: center; }
    .beers-item.is-pack { min-width: 200px; }
    .beers-item img { min-width: 0; }
}
/* Mobile keeps the wrapping base rule (two lines is fine), but the wide pack
   shots are 220px min — only one fits per phone row, stacking a pack-heavy
   category very tall. Narrow them so two sit per row. The can shots are already
   fine at their base width. */
@media (max-width: 768px) {
    .beers-item.is-pack { width: clamp(140px, 42vw, 200px); }
}

/* "Beer Stories" feature blocks (About Us) — text over a darkened photo. */
.beer-story {
    position: relative; min-height: clamp(360px, 56vh, 560px);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(50px, 9vh, 110px) 6%; box-sizing: border-box; text-align: center;
}
.beer-story::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.7) 100%);
}
.beer-story-inner { position: relative; z-index: 1; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.beer-story-eyebrow {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 0.82rem; color: #fff;
}
.beer-story-eyebrow::before { content: '🍺 '; }
.beer-story-title {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-weight: 900; text-transform: uppercase; color: #ff2a2a;
    font-size: clamp(2.2rem, 5vw, 4rem); line-height: 0.95; margin: 0;
    text-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.beer-story-body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #eaeaea; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.7; max-width: 620px; margin: 0 auto;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.new-hero-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.new-hero-image-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.new-hero-image {
    height: 100%; width: 100%;
    background: url("/assets/P49-lager-bdcbb6c2.webp") center 30% / cover no-repeat;
    animation: slowZoom 30s ease-out forwards;
    transform-origin: center center;
}

/* Mobile gets an 800px-wide hero (~48KB vs ~144KB) — this is the LCP image,
   and the smaller payload is the main lever on a throttled phone connection.
   Paired with a media-conditioned preload in the layout <head>. */
@media (max-width: 768px) {
    .new-hero-image { background-image: url("/assets/P49-lager-mobile-b0393c1e.webp"); }
}

.new-hero-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 38%;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0) 100%);
    z-index: 2;
    pointer-events: none;
}

.new-hero-container::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 38%;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0) 100%);
    z-index: 2;
    pointer-events: none;
}

.new-hero-top {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(clamp(80px, 7.2vw, 112px) + 2.5vh);
    padding-bottom: 3vh;
}

.new-hero-bottom {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4vh;
}

.new-hero-top p, .new-hero-bottom h1 {
    color: #fff !important;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif !important;
    font-size: clamp(3rem, min(15vw, 13vh), 160px) !important;
    letter-spacing: -0.01em !important;
    margin: 0;
    line-height: 0.85;
    white-space: nowrap;
    font-weight: 800 !important;
}

.new-hero-bottom h1 {
    line-height: 1 !important;
}

.combined-section-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding-top: clamp(80px, 7.2vw, 112px);
    padding-bottom: 60px;
    box-sizing: border-box;
    overflow: visible;
    scroll-snap-align: start;
    border-bottom: 32px solid #000;
}

.combined-top-half {
    flex: 1 1 0;
    padding: 2vh 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}
/* Featured beer — two cards (can + text) the same size as the Who/What cards
   above. White-on-white, so the card edges are invisible by design. */
.featured-card {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 2vh 3%;
}

.split-container { display: flex; gap: clamp(16px, 2vw, 32px); justify-content: center; align-items: stretch; width: 100%; max-width: none; height: 100%; }
.split-block {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    position: relative; background-size: cover; background-position: center; border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    padding: 30px 40px;
    box-sizing: border-box;
    overflow: hidden;
}
.split-overlay-gradient { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%); }
.split-top-title {
    position: relative;
    z-index: 1;
    font-size: clamp(2.9rem, 5.2vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
}

.split-bottom-content {
    position: relative;
    z-index: 1;
    margin-top: auto;
    text-align: left;
    color: #fff;
    pointer-events: none;
}

.split-bottom-content h3 {
    font-size: 1.65rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    letter-spacing: 1px;
}

.split-bottom-content p {
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    font-weight: 500;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-bottom: 0;
    max-width: 85%;
}

.split-more {
    align-self: flex-end;
    margin-top: 18px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
    pointer-events: auto;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}
.split-more::after {
    content: '→';
    display: inline-block;
    transition: transform 0.2s ease;
}
.split-more:hover { color: #ff0000; gap: 10px; }
.split-more:hover::after { transform: translateX(4px); }

.featured-card-can a { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.featured-card-can img { display: block; max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(20px 20px 30px rgba(0,0,0,0.4)); transition: transform 0.3s ease; }
.featured-card-can img:hover { transform: scale(1.05) translateY(-8px); }
/* The featured heading is a link to the beer; keep the section's own type. */
.featured-beer-link { color: inherit; }
.featured-beer-link:hover { color: #ff0000; }
.featured-beer-text-wrap {
    max-width: 460px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 0;
    gap: 8px;
}
.white-section-featured { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(3rem, 7vh, 7rem); font-weight: 900; text-transform: uppercase; line-height: 0.85; margin-bottom: 2vh; color: #000; letter-spacing: -2px; }

#home-partnerships { scroll-snap-align: start; height: calc(var(--who-card-h) * 2); display: block; width: 100%; padding: 0; box-sizing: border-box; background: #000; overflow: hidden; }
#home-collab-highlights { width: 100%; height: 100%; }

.new-collab-grid {
    display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; gap: 32px;
    box-sizing: border-box; background: #000; overflow: hidden; margin-bottom: 0;
}
.collab-grid-item { flex: 1; overflow: hidden; position: relative; cursor: pointer; }
.collab-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; filter: grayscale(50%) brightness(0.7); }
.collab-grid-item:hover img { transform: scale(1.03); filter: grayscale(0%) brightness(1); z-index: 2; position: relative; }

.collab-overlay-text-1, .collab-overlay-text-2 {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-size: clamp(3.5rem, 8vw, 8rem);
    font-weight: 900; color: #fff; text-shadow: 0 5px 30px rgba(0,0,0,1);
    pointer-events: none; z-index: 5; width: 100%; text-align: center;
    letter-spacing: 0em; text-transform: none;
}
.collab-overlay-text-1 { position: absolute; top: calc(33.333%); left: 50%; transform: translate(-50%, -50%); }
.collab-overlay-text-2 { position: absolute; top: calc(66.666%); left: 50%; transform: translate(-50%, -50%); }

@media (max-width: 768px) {
    html, body, #about-us-scroller, #beers-scroller, #collabs-scroller { scroll-snap-type: none !important; overflow-y: auto !important; }
    .snap-section { scroll-snap-align: none !important; }
    #beers-scroller { scroll-snap-type: none !important; height: calc(100dvh - 65px - env(safe-area-inset-bottom)) !important; }

    header#main-header, header#sk-header { display: none !important; }
    body { padding-top: 0 !important; }

    .nav-container, .hamburger, #menu-toggle { display: none !important; }
    body { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }

    #brewery-mobile-nav { display: flex !important; }
    #sk-mobile-nav { display: none !important; }
    body.sk-mode #brewery-mobile-nav { display: none !important; }
    body.sk-mode #sk-mobile-nav { display: flex !important; }

    .mobile-tab-bar {
        position: fixed; bottom: 0; left: 0; width: 100%;
        height: calc(65px + env(safe-area-inset-bottom));
        background: rgba(10, 10, 10, 0.97);
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1500;
        padding-bottom: env(safe-area-inset-bottom);
        justify-content: space-around; align-items: center;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; text-decoration: none; width: 20%; transition: color 0.2s ease, transform 0.2s ease; }
    .tab-item svg { width: 22px; height: 22px; margin-bottom: 4px; }
    .tab-item span { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;}
    .tab-item.active, .tab-item:hover { color: #ffffff; transform: scale(1.05); }

    .mobile-sub-menu { display: none; position: fixed; bottom: calc(65px + env(safe-area-inset-bottom) + 10px); left: 20%; width: 180px; background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; z-index: 1400; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.8); opacity: 0; transform: translateY(20px); transition: all 0.3s ease; }
    .mobile-sub-menu.show { display: flex; opacity: 1; transform: translateY(0); }
    .mobile-sub-menu a { padding: 15px 20px; color: #fff; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
    .mobile-sub-menu a:last-child { border-bottom: none; }
    .mobile-sub-menu a:active { background: rgba(255,0,0,0.2); }

    .cans-wrapper { width: 100vw; margin-left: -20px; overflow: hidden; }
    .cans { display: flex; flex-wrap: nowrap; justify-content: flex-start; padding: 40px 0 40px 14vw; gap: 0; overflow-x: auto; scroll-snap-type: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cans::-webkit-scrollbar { display: none; }
    .cans img { width: 50vw !important; margin: 0 -12vw !important; clip-path: none !important; scroll-snap-align: none; flex-shrink: 0; transition: none; opacity: 1 !important; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)) !important; transform: none !important; z-index: 1; }
    #craft .cans img { width: 50vw !important; margin: 0 -12vw !important; }

    .modal { align-items: flex-end; padding: 0; }
    .beer-modal-content,
    .collab-modal-content,
    .form-modal-content {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    .beer-modal-content, .collab-modal-content, .form-modal-content { width: 100vw; max-width: 100vw; height: 88vh !important; max-height: 88vh !important; margin: 0; border-radius: 28px 28px 0 0; background: #111; border: none; border-top: 1px solid rgba(255,255,255,0.1); transform: translateY(100%) !important; transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important; padding: 45px 16px 30px !important; overflow-y: auto; overscroll-behavior-y: contain; box-sizing: border-box; left: 0; right: 0; position: relative; }
    .beer-modal-content::before, .collab-modal-content::before, .form-modal-content::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 45px; height: 5px; background: rgba(255,255,255,0.4); border-radius: 5px; }
    .modal.show .beer-modal-content, .modal.show .collab-modal-content, .modal.show .form-modal-content { transform: translateY(0) !important; }
    .close { display: none !important; }
    .beer-modal-bg, .collab-modal-bg { display: none !important; }

    #filter-container { width: 46px; height: 46px; padding: 0; border-radius: 23px; top: 15px; left: 15px; overflow: hidden; display: flex; flex-direction: column; }
    #filter-header { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    #filter-header h3 { display: none; }
    #filter-container.expanded { width: calc(100% - 90px); height: auto; border-radius: 12px; padding: 15px; }
    #filter-container.expanded #filter-header { width: 100%; height: auto; justify-content: space-between; }
    #filter-container.expanded #filter-header h3 { display: block; font-size: 18px; }
    #filter-content { display: none; }
    #filter-container.expanded #filter-content { display: block; padding-top: 10px; }
    #filter-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }

    #about-us-master, #map-master, #collection-master, #beers-master, #collabs-master { transform: translateY(100vh) !important; left: 0; right: 0; transition: transform 0.4s ease-out; }
    body.about-mode #about-us-master, body.map-mode #map-master, body.collection-mode #collection-master, body.beers-mode #beers-master, body.collabs-mode #collabs-master { transform: translateY(0) !important; }
    body.about-mode #content-shifter, body.map-mode #content-shifter, body.collection-mode #content-shifter, body.beers-mode #content-shifter, body.collabs-mode #content-shifter { transform: none !important; }
    #content-shifter { transition: none; }
    .hero-video { object-position: 63% center !important; display: block !important; }
    .hero-video-container { background-position: 63% center !important; }

    .footer-bottom { flex-direction: column; height: auto; padding: 25px 20px; gap: 15px; justify-content: center; }
    .footer-right { text-align: center !important; font-size: 0.85rem !important; max-width: 100%; line-height: 1.6; word-break: normal; }

    .new-hero-container {
        height: calc(100dvh - 65px - env(safe-area-inset-bottom)) !important;
    }
    .new-hero-top { padding-top: calc(clamp(80px, 7.2vw, 112px) + 1.5vh) !important; padding-bottom: 1vh !important; }
    .new-hero-bottom {
        padding-bottom: 2vh !important;
    }
    .new-hero-image-wrap {
        position: absolute !important;
        inset: 0 !important;
    }

    .combined-section-container { flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding-top: 40px !important; border-bottom: none !important; overflow: visible !important; }
    .combined-top-half { flex: none !important; height: auto !important; min-height: 0 !important; padding: 20px !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; }
    .combined-bottom-half { height: auto !important; min-height: 0 !important; padding: 20px 20px 40px !important; width: 100% !important; box-sizing: border-box !important; }
    .split-container { flex-direction: column !important; gap: 20px !important; padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; height: auto !important; }
    .split-block { min-height: 90vw !important; width: 100% !important; max-width: 100% !important; height: auto !important; box-sizing: border-box !important; flex: none !important; padding: 24px 20px !important; }
    .featured-card { width: 100% !important; max-width: 100% !important; height: auto !important; box-sizing: border-box !important; flex: none !important; padding: 10px 0 !important; }
    .split-top-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; top: auto !important; left: auto !important; }
    .split-bottom-content { padding-right: 50px !important; }
    .split-bottom-content h3 { font-size: 0.9rem !important; margin-bottom: 6px !important; }
    .split-bottom-content p { font-size: 0.9rem !important; line-height: 1.5 !important; max-width: 100% !important; }
    .split-more { font-size: 0.9rem !important; }
    .featured-card-can img { max-height: 35vh !important; }
    .featured-beer-text-wrap { align-items: center !important; text-align: center !important; max-width: 100% !important; }
    #beer-order-online-btn { border: 2px solid #F6F8EF !important; }
    #home-partnerships { height: auto !important; padding: 0 !important; }
    .new-collab-grid { height: 75vh !important; margin-bottom: 0 !important; gap: 4px !important; }
    .collab-overlay-text-1, .collab-overlay-text-2 { font-size: clamp(1.6rem, 5.5vw, 2.4rem) !important; }
    #instagram-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 10px !important; }
}
@media (min-width: 769px) { #filter-toggle { display: none; } }

@media (min-width: 769px) {
    html, body {
        background-color: #000 !important;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body:not(.map-mode) #map-master { transform: translateX(100vw) !important; }
    body:not(.collection-mode) #collection-master { transform: translateY(100vh) !important; }
    body:not(.beers-mode) #beers-master { transform: translateX(100vw) !important; }

    body.map-mode #content-shifter,
    body.collection-mode #content-shifter,
    body.beers-mode #content-shifter { transform: translateX(-100vw) !important; }
}
/* Technology 83 Marker β */

#home-instagram + .newsletter-wrapper,
#craft + .newsletter-wrapper {
    min-height: auto !important;
    padding-top: 40px !important;
}

#home-instagram + .newsletter-wrapper .newsletter-top,
#craft + .newsletter-wrapper .newsletter-top {
    padding-bottom: 50px !important;
}

/* =========================================================================
   PHASE 1 SHELL — temporary scaffolding for the Rails migration.
   Removed as each page's real content is ported (see MIGRATION_SPEC.md §9).
   ========================================================================= */

/* The legacy IntersectionObserver that toggled `.visible` isn't ported yet,
   so reveal sections by default for now. */
main section { opacity: 1; }

.shell-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(120px, 14vh, 180px) 24px 80px;
    gap: 18px;
}
.shell-page h1 {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 0.95;
    text-transform: uppercase;
}
.shell-phase {
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 0.95rem;
}
.shell-desc { max-width: 580px; color: #bbb; line-height: 1.6; }
.shell-back {
    display: inline-block;
    margin-top: 24px;
    border: 2px solid #fff;
    padding: 14px 28px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.shell-back:hover { background: #ff0000; border-color: #ff0000; }

/* =========================================================================
   PORTED STANDALONE PAGES — neutralize the legacy overlay positioning so the
   masters flow as normal pages (the JS view-switcher isn't ported).
   ========================================================================= */

/* Beer detail page (replaces the modal as a real, shareable page). Reuses the
   .beer-detail-card / .beer-stats-row / .stat-box / .beer-where-btn styles. */
.beer-detail-page {
    position: relative;
    min-height: 100vh;
    background: #0a0a0a;
    padding: clamp(120px, 12vw, 160px) clamp(20px, 3vw, 60px) 60px;
    box-sizing: border-box;
    overflow: hidden;
}
.beer-detail-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: 0;
}
.beer-detail-inner {
    position: relative;
    z-index: 2;
    display: grid;
    /* The info column is capped at the card width (640px), so pin it and let
       the shot take every remaining pixel. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    gap: clamp(20px, 3.5vw, 56px);
    align-items: center;
    max-width: 1360px;
    margin: 0 auto;
}
.beer-detail-left { display: flex; align-items: center; justify-content: center; }
/* The package shots are square canvases with transparent padding, so the can
   reads smaller than its box — fill the column to balance the (now much taller)
   info panels beside it. */
.beer-detail-shot { width: 100%; max-width: 660px; height: auto; object-fit: contain; filter: drop-shadow(20px 20px 35px rgba(0,0,0,0.6)); }
.beer-detail-right { display: flex; flex-direction: column; gap: 15px; }
.beer-detail-right h1 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; text-transform: uppercase; line-height: 0.95; }
.beer-detail-right h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: #ff0000; text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; }

/* Mix packs get a badge in place of the beer style, and a closing note — they
   are combinations, so ABV/IBU/colour don't apply to them. */
.beer-pack-badge {
    display: inline-block; margin-top: 10px;
    background: rgba(255, 0, 0, 0.14); border: 1px solid rgba(255, 0, 0, 0.55);
    color: #ff4d4d; border-radius: 999px; padding: 6px 18px;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px;
}
/* Pack contents — the standalone beers inside a mix pack. */
.pack-contents-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.pack-contents-head h2 {
    margin: 0; font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff;
}
.pack-size {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: #ff4d4d;
}
.pack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pack-item + .pack-item { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
/* The row itself is either a link or a plain div (see pack_item_row); flex lives
   here so both behave identically. Negative margin + padding gives the link a
   hover target that reaches the card's edges without shifting the layout. */
.pack-item-row { display: flex; align-items: center; gap: 16px; }
.pack-item-row--link {
    text-decoration: none; color: inherit; border-radius: 8px;
    margin: -6px -10px; padding: 6px 10px; transition: background 0.15s;
}
.pack-item-row--link:hover { background: rgba(255,255,255,0.06); }
.pack-item-row--link:hover .pack-item-name { color: #ff4d4d; }
.pack-item-name { transition: color 0.15s; }
/* Thumb sits on a fixed square so cans of different heights line up; the qty
   badge overlaps its corner. */
.pack-item-shot { position: relative; flex: 0 0 56px; width: 56px; height: 56px; }
.pack-item-shot img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.pack-qty {
    position: absolute; bottom: -6px; right: -8px;
    background: #E2231A; color: #fff; border-radius: 999px; min-width: 24px;
    padding: 2px 7px; font-size: 0.78rem; font-weight: 800; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.pack-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pack-item-name { font-weight: 700; font-size: 1.05rem; color: #fff; }
.pack-item-style { font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.pack-item-spec { font-size: 0.82rem; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; }
/* Formats render as chips, matching the ingredients list. Needs .stat-box in
   the selector to outrank `.stat-box span:not(.stat-label)`, which would
   otherwise force the chips to 1.6rem/800. */
.stat-box span.beer-formats { display: flex; flex-wrap: wrap; gap: 8px; max-width: 240px; margin-top: 2px; }
.stat-box span.ingredient-chip { font-size: 0.85rem; font-weight: 500; }
/* Standalone CTA row (was a .stat-box crammed into the stats card). */
.beer-actions { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 640px; }
.beer-actions .beer-where-btn {
    height: auto; padding: 15px 30px; font-size: 0.95rem; letter-spacing: 1.5px;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}

/* Flavour profile — button + native <dialog> holding the radar chart.
   Rendered as a full-width footer strip on the stats card: an outlined pill
   here would collide with the format chips and read as another chip rather
   than a control. Bleeds through the card's 35px/15px padding to sit flush,
   so the hover fill reaches the card edges. */
/* --bleed mirrors .beer-stats-row's padding so the strip reaches the card
   edges; flex-basis resolves against the container's *content* box, hence the
   explicit +2x. Kept in sync with the mobile padding override below. */
.beer-flavour-launcher {
    --bleed: 35px; --bleed-y: 15px;
    flex: 0 0 calc(100% + var(--bleed) * 2);
    margin: 4px calc(var(--bleed) * -1) calc(var(--bleed-y) * -1);
}
.beer-flavour-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 0 0 11px 11px; padding: 16px var(--bleed); cursor: pointer;
    color: #fff; font-family: inherit; font-weight: 700; font-size: 0.82rem;
    letter-spacing: 1.4px; text-transform: uppercase; text-align: left;
    transition: background 0.2s;
}
.beer-flavour-btn:hover { background: rgba(255,255,255,0.07); }
.beer-flavour-btn:hover .beer-flavour-chev { transform: translateX(4px); }
/* Miniature radar, hinting at what the button opens. */
.beer-flavour-icon { width: 22px; height: 22px; flex-shrink: 0; overflow: visible; }
.beer-flavour-icon polygon { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 1.5; }
.beer-flavour-icon-fill { fill: rgba(226,35,26,0.35) !important; stroke: #E2231A !important; }
.beer-flavour-label { flex: 1; }
.beer-flavour-chev { font-size: 1rem; color: rgba(255,255,255,0.5); transition: transform 0.2s; }
/* Must follow the base rule, not live with the other mobile overrides higher up
   in this file — same specificity, so source order decides. */
@media (max-width: 768px) {
    .beer-flavour-launcher { --bleed: 16px; --bleed-y: 12px; }
    .beer-flavour-btn { padding: 14px 16px; letter-spacing: 1px; }
}

/* `margin: auto` is what centres a modal <dialog>; the global `* { margin: 0 }`
   reset at the top of this file wipes it out, so restore it explicitly. An
   explicit width is needed too — <dialog> is width:fit-content by default,
   which collapses the chart's width:100%. */
/* Reservation request popup (Street Kitchen). Reuses .form-group/.form-input;
   only the dialog shell and the two-column grid are new. */
.reso-dialog {
    margin: auto; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
    background: #141414; color: #fff; padding: 0;
    width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.reso-dialog[open] { animation: sk2-dialog-in 0.22s ease-out; }
.reso-dialog::backdrop { background: rgba(0,0,0,0.78); backdrop-filter: blur(4px); }
.reso-modal { position: relative; padding: clamp(22px, 3vw, 32px); }
.reso-title {
    font-family: 'League Spartan','League Spartan Fallback',sans-serif; font-weight: 900;
    text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.05;
    letter-spacing: 1px; margin: 0 0 10px;
}
.reso-intro { color: #bbb; font-size: 0.95rem; line-height: 1.6; margin: 0 0 20px; }
.reso-intro a { color: #ff4d4d; }
.reso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.reso-grid .reso-span { grid-column: 1 / -1; }
.reso-grid .form-group { margin-bottom: 14px; }
.reso-optional { color: #777; font-weight: 400; text-transform: none; letter-spacing: 0; }
.reso-dialog textarea.form-input { resize: vertical; font-family: inherit; }
.reso-submit { margin-top: 6px; }
.reso-submit[disabled] { opacity: 0.6; cursor: default; }
.reso-errors {
    background: rgba(255,0,0,0.12); border: 1px solid #ff0000; color: #ff6b6b;
    border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; font-size: 0.9rem;
}
.reso-errors p { margin: 0 0 4px; }
.reso-errors p:last-child { margin-bottom: 0; }
.reso-done { text-align: center; padding: 10px 0; }
.reso-done .reso-intro { margin-bottom: 22px; }
@media (max-width: 560px) { .reso-grid { grid-template-columns: 1fr; } }

/* While any modal dialog is open (flavour profile, event popups), lock the
   page behind it — <dialog> makes the page inert but doesn't stop wheel/touch
   from scrolling it under the backdrop. */
html:has(dialog:modal) { overflow: hidden; }

.beer-flavour-dialog {
    border: 0; padding: 0; background: transparent;
    width: min(560px, 92vw); margin: auto;
}
.beer-flavour-dialog::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); }
.beer-flavour-modal {
    background: #101010; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
    padding: clamp(18px, 3vw, 28px); color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.beer-flavour-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.beer-flavour-head h2 {
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; line-height: 1.1; margin: 0;
}
.beer-flavour-close {
    margin-left: auto; flex: none; background: transparent; border: 0; color: #9a9a9a;
    font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.beer-flavour-close:hover { color: #ff2a2a; }

.beer-radar { display: block; width: 100%; height: auto; overflow: visible; }
.beer-radar-grid polygon { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.beer-radar-spokes line { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.beer-radar-shape { fill: rgba(255, 0, 0, 0.3); stroke: #ff2a2a; stroke-width: 2; stroke-linejoin: round; }
.beer-radar-dots circle { fill: #ff2a2a; }
.beer-radar-labels text {
    fill: #cfcfcf; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
}
.beer-radar-note { color: #8a8a8a; font-size: 0.8rem; font-style: italic; text-align: center; margin: 6px 0 0; }
/* Centred with auto margins, NOT left:50% + translateX(-50%): the global
   `a:hover { transform: scale(1.05) }` would replace that transform and shunt
   the button half its width to the right. */
.beer-detail-back {
    position: relative;
    z-index: 2;
    display: block;
    margin: 40px auto 0;
    width: fit-content;
    border: 2px solid #fff;
    padding: 12px 26px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-size: 0.9rem;
}
/* Keep the label white — the global `a:hover` colour would make it red on red. */
.beer-detail-back:hover { background: #ff0000; border-color: #ff0000; color: #fff; }

@media (max-width: 768px) {
    .beer-detail-inner { grid-template-columns: 1fr; text-align: center; }
    .beer-detail-right { align-items: center; }
    .beer-detail-shot { max-height: 42vh; }
}

/* Find Us (Google map + p49-api radius search). Native CSS, P49 theme. */
.hidden { display: none !important; }

.find-us { background: #000; padding-top: clamp(80px, 7.2vw, 112px); }
.find-us-hero { text-align: center; padding: 40px 5% 20px; }
.find-us-hero h1 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.find-us-hero p { color: #bbb; margin-top: 10px; font-size: clamp(1rem, 1.4vw, 1.2rem); }

.find-us-controls { max-width: 1120px; margin: 0 auto; padding: 0 5%; display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; }
.find-us-search { flex: 1 1 320px; min-width: 280px; }
.find-us-locate {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 8px; white-space: nowrap; cursor: pointer;
    background: #111; border: 1px solid rgba(255,255,255,0.2); color: #fff;
    font-size: 0.95rem; transition: background 0.2s, border-color 0.2s;
}
.find-us-locate:hover { background: #1a1a1a; border-color: rgba(255,255,255,0.45); }
.find-us-locate-status { flex-basis: 100%; text-align: center; color: #ffb3b3; font-size: 0.85rem; margin-top: 2px; }
/* Crosshair / locate glyph drawn in CSS so it needs no asset. */
.find-us-locate-icon { width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: 0 0 auto; }
.find-us-locate-icon::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.find-us-search gmp-place-autocomplete,
.find-us-search input { width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: #111; color: #fff; font-size: 1rem; outline: none; }
/* The autocomplete predictions render in a CLOSED shadow DOM — unreachable by
   normal CSS. The bug: the `color:#fff` above is inherited through the shadow
   boundary, painting the prediction text white on Google's white dropdown.
   `color-scheme: dark` tells the component to render its own dark surface (dark
   dropdown, light text), which the Maps web components honour. */
.find-us-search gmp-place-autocomplete { color-scheme: dark; }
/* Info windows are drawn on Google's white bubble — force readable dark text. */
.loc-iw { color: #1a1a1a; font-size: 0.95rem; line-height: 1.45; }
.loc-iw strong { color: #111; }
.find-us-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; flex-basis: 100%; justify-content: center; }
.filter-btn { padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #ddd; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.filter-btn:hover { border-color: #fff; color: #fff; }
.filter-btn.is-active { background: #fff; border-color: #fff; color: #111; }
.find-us-filter-hint { flex-basis: 100%; text-align: center; color: #888; font-size: 0.85rem; margin-top: 8px; }

/* The brewery's map marker: the round P49 logo instead of a stock pin. */
.p49-marker { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; background: #111; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: transform 0.15s; }
.p49-marker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p49-marker.is-selected { transform: scale(1.25); border-color: #ff0000; }

.find-us-map { width: 100%; height: 520px; margin-top: 20px; background: #111; }

.find-us-loading { text-align: center; color: #bbb; padding: 16px; }

.find-us-results { max-width: 1120px; margin: 0 auto; padding: 40px 5% 80px; }
.find-us-results h2 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; text-transform: uppercase; margin-bottom: 24px; }
.loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.loc-empty { grid-column: 1 / -1; text-align: center; color: #888; padding: 30px; }
.loc-card { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.loc-card:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-3px); }
.loc-card.is-active { border-color: #ff0000; background: #1a0a0a; }
.loc-card h3 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.loc-type { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: rgba(255,0,0,0.7); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; }
.loc-addr { color: #bbb; font-size: 0.9rem; line-height: 1.4; }
.loc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; }
.loc-actions a { font-size: 0.9rem; font-weight: 600; text-decoration: none; color: #ff4d4d; }
.loc-actions a:hover { text-decoration: underline; }
.loc-directions { display: inline-flex; align-items: center; gap: 5px; }
/* Info-window store name (rendered into Google's header row) + links sit on the
   white bubble; force dark text so they don't inherit the page's light colour. */
.loc-iw-title { color: #111; font-weight: 700; font-size: 1rem; }
.loc-iw a { color: #c00; font-weight: 600; text-decoration: none; }
.loc-iw a:hover { text-decoration: underline; }
.loc-dist { color: #777; font-size: 0.8rem; margin-top: 8px; }

@media (max-width: 768px) {
    .find-us-controls { flex-direction: column; align-items: stretch; }
    .find-us-map { height: 60vh; }
}

/* --- Integrations: contact page, flash, Instagram grid --- */

/* Contact: render the modal form card as a standalone page (neutralize modal scale). */
.contact-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(120px, 12vw, 160px) 5% 80px; background: #000; }
.contact-page .form-modal-content { transform: none; max-height: none; }
.form-flash { padding: 14px 18px; margin-bottom: 20px; border-radius: 6px; font-weight: 700; }
.form-flash-err { background: rgba(255,0,0,0.12); border: 1px solid #ff0000; color: #ff6b6b; }

/* Global flash toast */
.site-flash { position: fixed; top: clamp(90px, 8vw, 120px); left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: 90vw; transition: opacity 0.4s ease; }
.site-flash-item { padding: 14px 26px; border-radius: 8px; font-weight: 700; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.site-flash-notice { background: #0f0f0f; color: #fff; border: 2px solid #ff0000; }
.site-flash-alert { background: #1a0a0a; color: #ff6b6b; border: 2px solid #ff0000; }

/* Instagram grid (homepage) */
#home-instagram { background: #000; padding: 60px 0 40px; box-sizing: border-box; }
.instagram-header { text-align: center; margin-bottom: 40px; padding: 0 4%; }
.instagram-header h2 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(4rem, 10vw, 140px); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin: 0; color: #fff; line-height: 0.95; }
#instagram-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 40px); width: 100%; padding: 0 4%; box-sizing: border-box; margin: 0 auto; }
.ig-tile { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #111; position: relative; }
.ig-tile img, .ig-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ig-tile:hover img, .ig-tile:hover video { transform: scale(1.06); }
/* Loading placeholders: hold the grid's height before the lazy feed arrives. */
.ig-skeleton { background: linear-gradient(100deg, #141414 30%, #1f1f1f 50%, #141414 70%); background-size: 200% 100%; animation: igShimmer 1.4s ease-in-out infinite; }
@keyframes igShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ig-skeleton { animation: none; } }
.instagram-follow { text-align: center; margin-top: clamp(28px, 3vw, 44px); padding: 0 4%; }
.instagram-follow a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: 2px; text-transform: uppercase;
    color: #fff; text-decoration: none; transition: color 0.2s ease, gap 0.2s ease;
}
.instagram-follow a::after { content: '\2192'; display: inline-block; transition: transform 0.2s ease; }
.instagram-follow a:hover { color: #ff0000; gap: 12px; }
.instagram-follow a:hover::after { transform: translateX(4px); }
@media (max-width: 768px) {
    #instagram-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Collab detail page (replaces the modal as a real, shareable page) --- */
.collab-detail { background: #000; }
.collab-detail-hero {
    position: relative;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: clamp(120px, 12vw, 160px) 5% clamp(40px, 6vw, 70px);
}
.collab-detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%); }
.collab-detail-hero-content { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; width: 100%; }
.collab-detail-tag { display: inline-block; color: #ff0000; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 0.95rem; margin-bottom: 12px; }
.collab-detail-hero-content h1 { font-family: 'League Spartan', 'League Spartan Fallback', sans-serif; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 900; text-transform: uppercase; line-height: 0.95; }
.collab-detail-body { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 70px) 5% 80px; }
.collab-detail-desc { color: #ddd; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.8; }
.collab-detail-desc p { margin-bottom: 1.2em; }
.collab-detail-gallery { width: 100%; height: clamp(300px, 50vh, 560px); margin: 40px 0; }
.collab-detail-back {
    display: inline-block;
    margin-top: 10px;
    border: 2px solid #fff;
    padding: 12px 26px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-size: 0.9rem;
}
.collab-detail-back:hover { background: #ff0000; border-color: #ff0000; }

/* =========================================================================
   RESPONSIVE HEADER — below 1200px the centered nav would overlap the logo,
   so collapse it into a hamburger dropdown. Also keeps the header visible on
   mobile (overrides the legacy <768px rules that hid it for the bottom tab bar
   we don't use). Pure-CSS checkbox toggle; Turbo loads each page fresh so the
   menu closes on navigation automatically.
   ========================================================================= */
@media (max-width: 1200px) {
    header#main-header { display: flex !important; }

    #main-header .hamburger { display: flex !important; margin-top: 0; align-self: center; }

    #main-header .nav-container {
        position: fixed;
        top: clamp(80px, 7.2vw, 112px);
        left: 0;
        right: 0;
        transform: none;
        padding-left: 0;
        display: block !important;
        background: rgba(0, 0, 0, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        z-index: 990;
    }
    #main-header .nav-container nav ul { flex-direction: column; gap: 0; width: 100%; }
    #main-header .nav-container nav ul li { width: 100%; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    #main-header .nav-container nav ul li a { display: block; padding: 20px; font-size: 1.1rem; }

    /* "At the Brewery" → a collapsible section inside the mobile menu: hover has
       no meaning on touch, so the trigger toggles #brewery-toggle instead. The
       sub-items sit inline (not floating) and animate on max-height. */
    #main-header .dropdown { width: 100%; }
    #main-header .dropdown-trigger {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 20px; font-size: 1.1rem; cursor: pointer;
    }
    #main-header .dropdown-trigger::after { content: '▾'; transition: transform 0.25s ease; }
    #main-header .submenu-toggle:checked ~ .dropdown-trigger::after { transform: rotate(180deg); }

    #main-header .dropdown-content,
    #main-header .dropdown:hover .dropdown-content,
    #main-header .dropdown:focus-within .dropdown-content {
        position: static; visibility: visible; opacity: 1; transform: none;
        min-width: 0; width: 100%; border: none; padding: 0; background: rgba(255, 255, 255, 0.04);
        max-height: 0; overflow: hidden; transition: max-height 0.28s ease;
    }
    /* Must follow the rules above — same specificity, so source order decides. */
    #main-header .submenu-toggle:checked ~ .dropdown-content { max-height: 240px; }
    #main-header .dropdown-content a { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }

    #menu-toggle:checked ~ .nav-container { max-height: calc(100vh - clamp(80px, 7.2vw, 112px)); }

    /* hamburger → X when open */
    #menu-toggle:checked ~ .hamburger span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
    #menu-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
    #menu-toggle:checked ~ .hamburger span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }
}