/*
Theme Name: Backroom Brewery
Theme URI: https://backroombrewery.com
Author: 55 Social Management
Description: Custom theme for Backroom Brewery at Sunflower Cottage — Virginia's first farm brewery. Navy/brass palette, ridge-line section dividers, page templates for the taproom, events, weddings, corporate, celebrations, farm, story, visit, and Oktoberfest pages.
Version: 3.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: backroom-brewery
*/


:root{
  --paper:#F5F1E4;
  --wheat:#EAE2CF;
  --moss:#1C2841;
  --moss-deep:#121B2E;
  --ink:#1E2636;
  --ink-soft:#4E586E;
  --timber:#7A5433;
  --hop:#5F7040;
  --gold:#B9924B;
  --cream:#EDE9D6;
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"Karla", "Helvetica Neue", Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- top bar ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(242,239,226,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;max-width:1240px;margin:0 auto}
.wordmark{font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1.1;cursor:pointer;background:none;border:none;color:var(--ink);text-align:left}
.wordmark em{display:block;font-family:var(--sans);font-style:normal;font-weight:700;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--hop);margin-top:3px}
nav.pages{display:flex;flex-wrap:wrap;gap:2px;justify-content:flex-end}
nav.pages button{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:none;border:none;color:var(--ink-soft);padding:8px 13px;cursor:pointer;border-radius:999px;transition:background .15s,color .15s}
nav.pages button:hover{color:var(--ink);background:rgba(185,146,75,.12)}
nav.pages button.on{color:var(--cream);background:var(--moss)}
nav.pages button:focus-visible,.wordmark:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- bands & ridgeline ---------- */
.band{position:relative}
.band>.wrap{max-width:1120px;margin:0 auto;padding:84px 28px}
.band.hero>.wrap{padding-top:64px}
.band.moss{background:var(--moss);color:var(--cream)}
.band.moss .lede,.band.moss p{color:#D6D2BC}
.band.moss h1,.band.moss h2,.band.moss h3{color:#F4F1E2}
.band.wheat{background:var(--wheat)}
.ridge{display:block;line-height:0}
.ridge svg{display:block;width:100%;height:64px}
@media(max-width:640px){.ridge svg{height:40px}}

/* ---------- full-bleed hero ---------- */
.heroFull{position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#27354F,var(--moss-deep));overflow:hidden;color:#F4F1E2}
.heroFull .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroFull .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,27,46,.45) 0%,rgba(18,27,46,.62) 60%,rgba(18,27,46,.8) 100%)}
.heroInner{position:relative;z-index:2;max-width:860px;padding:120px 28px 150px}
.heroInner .eyebrow{color:var(--gold)}
.heroInner h1{color:#fff;font-size:clamp(3rem,7.5vw,5.2rem)}
.heroInner h1 em{color:var(--gold)}
.heroInner p{color:#E4E0CB;font-size:1.18rem;margin-top:22px;max-width:56ch;margin-left:auto;margin-right:auto}
.heroFull .ridge{position:absolute;bottom:-1px;left:0;right:0;z-index:3}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;text-align:center}
.pillar svg{width:48px;height:48px;stroke:var(--timber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.pillar h3{font-size:1.15rem}
.pillar p{font-size:.93rem;color:var(--ink-soft)}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:540px){.pillars{grid-template-columns:1fr}}

/* ---------- type ---------- */
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--hop);margin-bottom:16px}
.band.moss .eyebrow{color:var(--gold)}
h1{font-family:var(--serif);font-weight:480;font-size:clamp(2.6rem,6.2vw,4.4rem);line-height:1.02;letter-spacing:-.015em}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--timber)}
.band.moss h1 em,.band.moss h2 em{color:var(--gold)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08;margin-bottom:18px}
h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin-bottom:6px}
.lede{font-size:1.1rem;color:var(--ink-soft);max-width:60ch}
p+p{margin-top:1em}
a{color:var(--timber)}
.band.moss a{color:var(--gold)}

/* ---------- layout helpers ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.two.top{align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:40px}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:15px 30px;border-radius:999px;border:none;cursor:pointer;transition:transform .15s,background .15s,color .15s;background:var(--moss);color:var(--cream)}
.btn:hover{transform:translateY(-2px);background:var(--moss-deep)}
.btn.gold{background:var(--gold);color:var(--moss-deep)}
.btn.gold:hover{background:#A57F3B;color:#fff}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--ink)}
.band.moss .btn.ghost,.heroFull .btn.ghost{color:#F4F1E2}
.btn.ghost:hover{background:rgba(0,0,0,.06)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}

/* ---------- photos ---------- */
.frame{position:relative;background:var(--wheat);overflow:hidden;border-radius:26px;box-shadow:0 22px 44px -18px rgba(18,27,46,.35)}
.frame.arch{border-radius:260px 260px 26px 26px}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.frame figcaption{position:absolute;left:14px;bottom:14px;background:rgba(18,27,46,.78);color:#EDEAD9;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.frame.fallback{display:flex;align-items:center;justify-content:center;min-height:260px;text-align:center;padding:28px}
.frame.fallback .ph{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.frame.fallback .ph small{display:block;font-family:var(--sans);font-style:normal;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;color:var(--hop)}
.band.moss .frame{background:#27354F}
.band.moss .frame.fallback .ph{color:#CFCBB4}
.band.moss .frame.fallback .ph small{color:var(--gold)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.gallery .frame{aspect-ratio:4/3;border-radius:20px}
.gallery .frame:nth-child(2){transform:translateY(18px)}
.gallery .frame:nth-child(5){transform:translateY(18px)}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr}.gallery .frame:nth-child(odd){transform:none}}
@media(max-width:540px){.gallery{grid-template-columns:1fr}.gallery .frame{transform:none!important}}

/* ---------- footpath ---------- */
.trail{position:relative;padding-left:46px}
.trail::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;border-left:2px dotted var(--hop)}
.band.moss .trail::before{border-left-color:var(--gold)}
.step{position:relative;padding:0 0 40px 0}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-42px;top:5px;width:15px;height:15px;border-radius:50%;background:var(--paper);border:2.5px solid var(--timber)}
.band.moss .step::before{background:var(--moss);border-color:var(--gold)}
.step.gold::before{background:var(--gold);border-color:var(--gold)}
.step .when{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--timber);margin-bottom:3px}
.band.moss .step .when{color:var(--gold)}
.step p{color:var(--ink-soft);max-width:52ch}

/* ---------- specs ---------- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.specs div{padding:15px 4px;border-bottom:1.5px dotted rgba(30,38,54,.28)}
.band.moss .specs div{border-bottom-color:rgba(237,233,214,.3)}
.specs dt{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--hop)}
.band.moss .specs dt{color:var(--gold)}
.specs dd{font-family:var(--serif);font-size:1.08rem;margin-top:1px}
@media(max-width:560px){.specs{grid-template-columns:1fr}}

/* ---------- soft cards ---------- */
.pkgs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.pkgs.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.pkgs,.pkgs.three{grid-template-columns:1fr}}
.pkg{background:var(--wheat);border-radius:28px;padding:34px 32px}
.band.wheat .pkg{background:var(--paper)}
.pkg.featured{background:var(--moss);color:#D6D2BC}
.pkg.featured h3{color:#F4F1E2}
.pkg.featured .price{color:#BFBAA2}
.pkg.featured .pkg-tag{color:var(--gold)}
.pkg-tag{font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--timber)}
.pkg h3{font-size:1.55rem;margin:10px 0 2px}
.price{font-family:var(--serif);font-style:italic;color:var(--ink-soft);margin-bottom:12px}
.pkg ul{list-style:none;margin-top:14px}
.pkg li{padding:8px 0 8px 24px;position:relative;font-size:.95rem;border-top:1.5px dotted rgba(30,38,54,.2)}
.pkg.featured li{border-top-color:rgba(237,233,214,.22)}
.pkg li::before{content:"✦";position:absolute;left:0;top:11px;color:var(--gold);font-size:.7rem}

/* ---------- chips, notes, misc ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{background:rgba(185,146,75,.13);border-radius:999px;padding:9px 18px;font-size:.88rem}
.chip b{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hop);margin-right:8px}
.band.moss .chip,.heroFull .chip{background:rgba(237,233,214,.14)}
.band.moss .chip b,.heroFull .chip b{color:var(--gold)}
.heroFull .chips{justify-content:center}
.note{border-radius:20px;background:rgba(200,146,39,.14);padding:18px 24px;font-size:.95rem;color:var(--ink-soft);margin-top:30px}
.band.moss .note{background:rgba(200,146,39,.16);color:#D6D2BC}
.crumb{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px}
.crumb b{color:var(--timber)}
.tick{list-style:none}
.tick li{padding:10px 0 10px 26px;position:relative;border-bottom:1.5px dotted rgba(30,38,54,.22)}
.tick li::before{content:"✦";position:absolute;left:0;top:13px;color:var(--hop);font-size:.75rem}
.svc{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;padding:26px 0}
.svc+.svc{border-top:1.5px dotted rgba(237,233,214,.25)}
.svc .frame{aspect-ratio:1/1;border-radius:999px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.svc .frame.fallback{min-height:0}
.svc .frame.fallback .ph{font-size:.8rem}
@media(max-width:640px){.svc{grid-template-columns:1fr}.svc .frame{max-width:200px}}

/* ---------- email signup ---------- */
.signupRow{display:flex;gap:14px;max-width:680px;margin-top:26px}
.signupRow .field{flex:1;background:var(--paper);border:none;border-radius:999px;padding:15px 24px;font:inherit;color:var(--ink)}
.signupRow .field::placeholder{color:var(--ink-soft)}
@media(max-width:640px){.signupRow{flex-direction:column}}

/* ---------- footer ---------- */
footer.site{background:var(--moss-deep);color:#BFBAA2;padding:70px 28px 46px;font-size:.92rem}
.fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:44px;max-width:1120px;margin:0 auto 46px}
.fcols h4{font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.fcols .fm{font-family:var(--serif);font-size:1.4rem;color:#F4F1E2;margin-bottom:10px}
.fcols a{display:block;color:#D6D2BC;text-decoration:none;padding:3px 0}
.fcols a:hover{color:var(--gold)}
.fcols li{list-style:none;padding:3px 0}
.fbase{max-width:1120px;margin:0 auto;border-top:1.5px dotted rgba(237,233,214,.25);padding-top:22px;text-align:center;color:#8b91a3}
@media(max-width:860px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fcols{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* ---- v4: readability & brand ---- */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:0}
h1 em,h2 em,.frame.fallback .ph,.fbase em,footer.site em{font-style:normal}
h1{font-size:clamp(2.3rem,5.4vw,3.8rem);line-height:1.1}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem);line-height:1.18}
.heroInner h1{font-size:clamp(2.7rem,6.2vw,4.5rem);line-height:1.06}
body{font-size:18px;line-height:1.75}
.eyebrow{letter-spacing:.15em}
.price{font-family:var(--sans);font-style:normal;font-size:.95rem;opacity:.9}
.logoimg{width:48px;height:48px;flex:none}
.wordmark{display:flex;align-items:center;gap:12px}
.flogo{width:68px;height:68px;display:block;margin-bottom:14px}

/* ---- v5: pillar photo links + tap list ---- */
.pillar{display:block;text-decoration:none;color:inherit;cursor:pointer}
.pillar .pframe{display:block;width:152px;height:152px;border-radius:50%;overflow:hidden;margin:0 auto 16px;box-shadow:0 16px 32px -14px rgba(18,27,46,.45);transition:transform .18s}
.pillar .pframe img{width:100%;height:100%;object-fit:cover;display:block}
.pillar:hover .pframe{transform:scale(1.05)}
.pillar:hover h3{color:var(--timber)}
.beerlist{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:26px}
@media(max-width:720px){.beerlist{grid-template-columns:1fr}}
.beer{padding:16px 4px;border-bottom:1.5px dotted rgba(237,233,214,.28)}
.beer h4{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:#F4F1E2;margin:0}
.beer .meta{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:3px 0 5px}
.beer p{font-size:.94rem;margin:0}

/* ---- v7: events grid ---- */
.evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
@media(max-width:920px){.evgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.evgrid{grid-template-columns:1fr}}
.ev{background:var(--paper);border-radius:24px;padding:26px 24px;box-shadow:0 16px 34px -18px rgba(18,27,46,.25);display:flex;flex-direction:column;gap:10px}
.evtop{display:flex;gap:16px;align-items:center}
.evdate{flex:none;width:64px;height:64px;border-radius:18px;background:var(--moss);color:#F4F1E2;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.evdate b{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.evdate span{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.ev h3{margin:0;font-size:1.18rem}
.evmeta{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--timber)}
.ev p{font-size:.95rem;color:var(--ink-soft);margin:0;flex:1}
.ev a{font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--timber)}
.ev a:hover{color:var(--gold)}

/* ---- v8: nav dropdowns, white button text, swap tags, mission, modal ---- */
nav.pages{position:relative;gap:6px}
nav.pages .dd{position:relative}
nav.pages button.top{color:var(--ink);padding:9px 14px}
nav.pages .dd.on>button.top,nav.pages button.single.on{color:#fff;background:var(--moss)}
nav.pages .menu{display:none;position:absolute;top:100%;margin-top:0;border-top:6px solid transparent;background-clip:padding-box;left:0;background:var(--paper);border-radius:16px;box-shadow:0 18px 40px -16px rgba(18,27,46,.4);padding:8px;min-width:210px;z-index:60;flex-direction:column}
nav.pages .dd:hover .menu,nav.pages .dd.open .menu,nav.pages .dd:focus-within .menu{display:flex}
nav.pages .menu button{text-align:left;width:100%;border-radius:10px;text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;padding:9px 12px}
nav.pages .menu button.on{background:var(--moss);color:#fff}
@media(max-width:760px){nav.pages .menu{position:static;box-shadow:none;background:transparent;padding:0 0 4px 10px}}
.btn,.btn.gold,.btn.ghost{color:#fff}
.btn.ghost{background:var(--moss);box-shadow:none}
.band.moss .btn.ghost,.heroFull .btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.btn.gold:hover{color:#fff}
.swap{position:absolute;top:12px;right:12px;background:var(--gold);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;z-index:3;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.pframe{position:relative}
.heroFull .swap{top:auto;bottom:24px;right:24px;z-index:4}
.mission{max-width:820px;margin:0 auto 58px;text-align:center}
.mission p{font-family:var(--serif);font-size:1.28rem;line-height:1.6;color:var(--ink)}
h2.big{font-size:clamp(2rem,4.2vw,3rem)}
.tick.big li{font-size:1.08rem;padding:13px 0 13px 28px}
.modal{display:none;position:fixed;inset:0;background:rgba(18,27,46,.6);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modalbox{background:var(--paper);border-radius:26px;padding:34px 32px;max-width:520px;width:100%;position:relative;max-height:92vh;overflow:auto}
.closex{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink-soft)}
textarea.field{border-radius:20px;resize:vertical}
#mapstrip{border-top:1.5px dotted rgba(30,38,54,.15)}

/* ---- v11: button contrast ---- */
.btn,.btn.gold,.btn.ghost,.btn:hover,.btn.gold:hover,.btn.ghost:hover{color:#fff!important}
.btn,.btn.gold{background:var(--moss)!important;box-shadow:none!important}
.btn.gold:hover,.btn:hover{background:var(--moss-deep)!important}
.btn.ghost{background:#3A4C72!important;box-shadow:inset 0 0 0 1.5px var(--gold)!important}
.btn.ghost:hover{background:var(--moss-deep)!important}
.band.moss .btn,.band.moss .btn.gold,.heroFull .btn,.heroFull .btn.gold,.pkg.featured .btn{background:var(--gold)!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.band.moss .btn.ghost,.heroFull .btn.ghost{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1.5px #fff!important}
.band.moss .btn:hover,.heroFull .btn:hover{background:#A57F3B!important}
.signupRow .btn,.modalbox .btn{background:var(--moss)!important}

/* ---- v12: taproom gallery spread full-width ---- */
.gallery.tap{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.gallery.tap .frame{aspect-ratio:4/3;transform:none!important;border-radius:22px}
.gallery.tap .frame figcaption{font-size:.72rem;white-space:nowrap}
@media(max-width:820px){.gallery.tap{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.gallery.tap{grid-template-columns:1fr}}

/* ---- v15: Oktoberfest ---- */
.oktbanner{display:flex;align-items:center;gap:0;background:var(--moss-deep);color:#EDE9D6;text-decoration:none;font-size:.95rem;padding:0;overflow:hidden}
.oktbanner .obtxt{flex:1;text-align:center;padding:12px 18px}
.oktbanner b{color:var(--gold)}
.oktbanner u{text-decoration-color:var(--gold);text-underline-offset:3px}
.oktbanner:hover{background:#0D1524}
.oktbanner .check{flex:none;width:64px;align-self:stretch;background:conic-gradient(#3E63A8 90deg,#EDE9D6 90deg 180deg,#3E63A8 180deg 270deg,#EDE9D6 270deg);background-size:16px 16px}
.bunting{position:absolute;top:0;left:0;right:0;line-height:0;z-index:2}
.bunting svg{width:100%;height:40px}
nav.pages .menu button.fest{color:var(--timber);font-weight:800}
nav.pages .menu button.fest:hover{color:var(--gold)}
@media(max-width:640px){.oktbanner .check{width:26px}.oktbanner{font-size:.85rem}}

/* ---- WP build: anchor-based nav items ---- */
nav.pages .menu a{display:block;text-align:left;width:100%;border-radius:10px;text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;padding:9px 12px;color:var(--ink-soft);text-decoration:none}
nav.pages .menu a:hover{color:var(--ink);background:rgba(185,146,75,.12)}
nav.pages .menu a.fest{color:var(--timber);font-weight:800}
nav.pages a.top.single{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);padding:9px 14px;border-radius:999px}
nav.pages a.top.single:hover{background:rgba(95,112,64,.12)}
.wordmark{text-decoration:none}
.brb-page .heroFull{margin-top:0}

/* ============ v21: hamburger nav + mobile optimization ============ */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;padding:10px;cursor:pointer;z-index:130}
.burger span{width:26px;height:3px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
body.navopen .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.navopen .burger span:nth-child(2){opacity:0}
body.navopen .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.navbackdrop{display:none;position:fixed;inset:0;background:rgba(18,27,46,.45);z-index:110}
body.navopen .navbackdrop{display:block}

@media(max-width:900px){
  .burger{display:flex}
  nav.pages{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(330px,86vw);background:var(--paper);z-index:120;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:86px 22px 36px;
    box-shadow:-24px 0 60px rgba(18,27,46,.35);transform:translateX(105%);transition:transform .25s ease;overflow:auto}
  body.navopen nav.pages{transform:none}
  nav.pages .dd{width:100%}
  nav.pages .dd>button.top{pointer-events:none;color:var(--hop);font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding:14px 12px 4px;text-align:left;background:none}
  nav.pages .menu{display:flex!important;position:static;box-shadow:none;background:transparent;padding:0 0 8px;border-top:none;flex-direction:column;min-width:0}
  nav.pages .menu button,nav.pages .menu a{font-size:1.05rem;padding:11px 12px}
  nav.pages button.single,nav.pages a.top.single{text-align:left;font-size:1.05rem;text-transform:none;letter-spacing:0;font-weight:600;padding:11px 12px;margin-top:6px;border-top:1.5px dotted rgba(30,38,54,.18);border-radius:0}
  body.navopen{overflow:hidden}
}
@media(max-width:640px){
  .band>.wrap{padding:56px 20px}
  .band.hero>.wrap{padding-top:44px}
  .heroInner{padding:84px 20px 110px}
  .heroFull{min-height:72vh}
  .heroInner h1{font-size:clamp(2.2rem,10vw,3rem)}
  h1{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  h2{font-size:clamp(1.45rem,6.5vw,1.9rem)}
  .lede{font-size:1rem}
  .btn{padding:13px 22px;font-size:.78rem}
  .btnrow{gap:10px}
  .frame.arch{border-radius:150px 150px 22px 22px}
  .mission{margin-bottom:44px}
  .mission p{font-size:1.06rem}
  .evdate{width:56px;height:56px}
  .evdate span{font-size:1.3rem}
  .pkg{padding:26px 22px}
  .bar{padding:12px 16px}
  .beer h4{font-size:1rem}
  .specs dd,.facts dd{font-size:1rem}
  iframe[title="Map to Backroom Brewery"]{height:300px}
  .chips{gap:8px}
  .chip{padding:8px 14px;font-size:.82rem}
  .fcols{gap:28px}
  .oktbanner .obtxt{padding:11px 14px;line-height:1.5}
}

/* v23: CSS-only drawer (works even where scripts are blocked) */
.navcheck{position:absolute;left:-9999px}
label.burger{-webkit-tap-highlight-color:transparent}
#brbnav:checked ~ header.site nav.pages{transform:none}
#brbnav:checked ~ .navbackdrop{display:block}
#brbnav:checked ~ header.site .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#brbnav:checked ~ header.site .burger span:nth-child(2){opacity:0}
#brbnav:checked ~ header.site .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* v1.1: selector fallback + admin bar */
body:has(#brbnav:checked) nav.pages{transform:none}
body:has(#brbnav:checked) .navbackdrop{display:block}
body:has(#brbnav:checked) .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body:has(#brbnav:checked) .burger span:nth-child(2){opacity:0}
body:has(#brbnav:checked) .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:900px){
  body.admin-bar nav.pages{padding-top:120px}
}

/* v24: layering fix — the backdrop was painting OVER the drawer (header creates a
   stacking context at z-50, so the drawer inside it could never rise above the
   z-110 backdrop). Backdrop now sits BELOW the header layer: page content dims,
   drawer and header stay on top and tappable. */
.navbackdrop{z-index:40}
body:has(#brbnav:checked){overflow:hidden}
@media(max-width:900px){
  nav.pages{box-shadow:-18px 0 50px rgba(18,27,46,.5);border-left:1.5px solid rgba(185,146,75,.5)}
}

/* v25: mobile menu is now a DROPDOWN under the header (replaces the side drawer).
   In-flow, no fixed positioning, no backdrop, no sideways motion. */
@media(max-width:900px){
  .bar{flex-wrap:wrap}
  nav.pages{position:static;transform:none;width:100%;box-shadow:none;border-left:none;
    background:transparent;display:flex;flex-direction:column;align-items:stretch;gap:2px;
    max-height:0;overflow:hidden;padding:0;transition:max-height .28s ease}
  #brbnav:checked ~ header.site nav.pages,
  body:has(#brbnav:checked) nav.pages{max-height:75vh;overflow:auto;padding:6px 0 18px}
  nav.pages .dd>button.top{padding:12px 12px 2px}
  .navbackdrop{display:none!important}
  body:has(#brbnav:checked){overflow:auto}
  body.admin-bar nav.pages{padding-top:0}
}

/* v26: dropdown shows the ENTIRE menu — no height cap, tighter rows */
@media(max-width:900px){
  #brbnav:checked ~ header.site nav.pages,
  body:has(#brbnav:checked) nav.pages{max-height:2600px;overflow:visible;padding:2px 0 16px}
  nav.pages .dd>button.top{padding:10px 12px 0;font-size:.64rem}
  nav.pages .menu{padding:0 0 2px}
  nav.pages .menu button,nav.pages .menu a{font-size:1rem;padding:8px 12px}
  nav.pages button.single,nav.pages a.top.single{padding:10px 12px;margin-top:4px}
}

/* v27: accordion groups — closed until tapped (desktop hover still works) */
nav.pages label.top{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding:8px 13px;cursor:pointer;border-radius:999px;display:inline-block}
nav.pages label.top:hover{color:var(--ink);background:rgba(95,112,64,.12)}
nav.pages .dd input.navcheck:checked ~ .menu{display:flex}
@media(max-width:900px){
  nav.pages .menu{display:none!important}
  nav.pages .dd input.navcheck:checked ~ .menu{display:flex!important}
  nav.pages .dd>label.top{pointer-events:auto;display:block;font-size:1rem;text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink);padding:11px 12px;border-radius:12px}
  nav.pages .dd>label.top:hover{background:rgba(185,146,75,.12)}
  nav.pages .menu button,nav.pages .menu a{padding-left:26px;color:var(--ink-soft)}
}

/* v2.0: footer social buttons */
.soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:rgba(237,233,214,.10);border:1.5px solid rgba(185,146,75,.55);color:#D6D2BC;margin-right:10px;
  transition:background .15s,color .15s,transform .15s;padding:0!important}
.soc:hover{background:var(--gold);color:#121B2E;transform:translateY(-2px)}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* v2.1: newsletter rows */
.newsForm{display:flex;gap:14px;max-width:680px;margin-top:26px;flex-wrap:wrap}
.newsForm .field{flex:1;min-width:180px}
#newsModal .newsForm{flex-direction:column;max-width:100%}
#newsModal .newsForm .btn{align-self:flex-start}
@media(max-width:640px){.newsForm{flex-direction:column}.newsForm .btn{align-self:stretch;text-align:center}}

/* v2.4: Oktoberfest schedule */
.ev.okday h3{font-family:var(--serif);font-size:1.12rem;line-height:1.3}
.okact{margin-top:10px!important;font-size:.86rem!important;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold)!important}
.band.wheat .ev.okday{background:var(--paper)}

/* v2.5: Oktoberfest horizontal schedule rows */
.okschedule{margin-top:38px;display:flex;flex-direction:column;gap:18px}
.okrow{display:grid;grid-template-columns:104px 1fr;gap:28px;align-items:flex-start;
  background:var(--paper);border-radius:24px;padding:30px 34px;
  box-shadow:0 14px 30px -20px rgba(18,27,46,.3)}
.okdate{background:var(--moss);border-radius:18px;padding:16px 8px;text-align:center;line-height:1.05}
.okdate b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.okdate span{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;color:#F4F1E2;margin-top:2px}
.okbody h3{font-family:var(--serif);font-size:1.4rem;margin:0 0 8px;color:var(--ink)}
.okbody p{margin:0;color:var(--ink-soft);max-width:64ch;font-size:1.02rem;line-height:1.65}
.okmusic{display:inline-block;margin-top:14px;font-size:.8rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--timber);background:rgba(185,146,75,.16);
  padding:8px 16px;border-radius:999px}
.okmusic.okno{color:var(--hop);background:rgba(95,112,64,.14)}
@media(max-width:640px){
  .okrow{grid-template-columns:1fr;gap:16px;padding:24px 22px}
  .okdate{width:88px;padding:12px 6px}
  .okdate span{font-size:1.7rem}
  .okbody h3{font-size:1.22rem}
}

/* v2.6: per-day Facebook RSVP links */
.okfb{display:inline-flex;align-items:center;gap:10px;margin-top:14px;margin-left:10px;
  font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--moss-deep);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,38,54,.25);
  padding:8px 16px;border-radius:999px;text-decoration:none;transition:background .15s,color .15s}
.okfb:hover{background:var(--moss);color:#F4F1E2;box-shadow:none}
.okfbtag{font-size:.62rem;letter-spacing:.08em;background:var(--gold);color:#fff;
  padding:3px 8px;border-radius:999px}
.okfb[href="#"]{opacity:.75}
@media(max-width:640px){.okfb{margin-left:0;display:inline-flex}}

/* v2.7: Oktoberfest full-bleed hero */
.okhero{min-height:74vh}
.okhero .veil{background:linear-gradient(180deg,rgba(18,27,46,.55) 0%,rgba(18,27,46,.66) 55%,rgba(18,27,46,.82) 100%)}
.okhero .bunting{z-index:4}
.okhero .chips{justify-content:center;margin-bottom:6px}
@media(max-width:640px){.okhero{min-height:80vh}.okhero .heroInner{padding:96px 20px 120px!important}}

/* v3.0: bigger Oktoberfest homepage banner */
.oktbanner{display:block;position:relative;overflow:hidden;text-decoration:none;padding:0;
  background:linear-gradient(135deg,#121B2E 0%,#1C2841 55%,#27354F 100%)}
.oktbanner .okbunting{display:block;height:26px;
  background:repeating-linear-gradient(90deg,#3E63A8 0 26px,#EDE9D6 26px 52px);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 13px,transparent 13px 26px) 0 0/26px 26px,
    linear-gradient(#000,#000);
  mask-image:radial-gradient(circle at 50% 0,#000 99%,transparent 100%);
  -webkit-mask-image:none;
  clip-path:polygon(0 0,100% 0,100% 40%,97% 100%,94% 40%,91% 100%,88% 40%,85% 100%,82% 40%,79% 100%,76% 40%,73% 100%,70% 40%,67% 100%,64% 40%,61% 100%,58% 40%,55% 100%,52% 40%,49% 100%,46% 40%,43% 100%,40% 40%,37% 100%,34% 40%,31% 100%,28% 40%,25% 100%,22% 40%,19% 100%,16% 40%,13% 100%,10% 40%,7% 100%,4% 40%,1% 100%,0 40%)}
.oktbanner .okwrap{display:block;text-align:center;padding:30px 24px 34px}
.oktbanner .okkicker{display:block;font-size:.7rem;font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.oktbanner .okbig{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.08;color:#F7F4E8;letter-spacing:-.01em}
.oktbanner .okdates{display:block;margin-top:12px;font-size:1.05rem;color:#E4E0CB}
.oktbanner .okmeta{display:block;margin-top:6px;font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.oktbanner .okcta{display:inline-block;margin-top:20px;background:var(--gold);color:#fff;
  font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 30px;border-radius:999px;transition:transform .15s,background .15s}
.oktbanner:hover{background:linear-gradient(135deg,#0D1524 0%,#18233A 55%,#22304A 100%)}
.oktbanner:hover .okcta{background:#A57F3B;transform:translateY(-2px)}
@media(max-width:640px){
  .oktbanner .okwrap{padding:24px 18px 28px}
  .oktbanner .okdates{font-size:.95rem}
  .oktbanner .okmeta{font-size:.72rem;letter-spacing:.1em}
  .oktbanner .okcta{padding:12px 24px}
}

/* v3.1: Oktoberfest sponsors */
.sponsors{display:flex;flex-wrap:wrap;justify-content:center;gap:44px;margin-top:36px}
.sponsor{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:260px}
.sponsor img{width:170px;height:170px;object-fit:contain;background:#fff;border-radius:20px;
  padding:14px;box-shadow:0 14px 30px -18px rgba(18,27,46,.35)}
.sponsor span{font-family:var(--serif);font-size:1rem;line-height:1.45;color:var(--ink)}
.sponsor small{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:540px){.sponsors{gap:30px}.sponsor img{width:140px;height:140px}}

/* v3.1.1: scale the Märzen photo down on tablets and phones */
@media(max-width:1024px){
  .marzenPhoto{max-width:340px;margin-left:auto;margin-right:auto}
}
@media(max-width:860px){
  .marzenPhoto{max-width:300px}
}
@media(max-width:640px){
  .marzenPhoto{max-width:230px;border-radius:120px 120px 20px 20px}
}

/* v3.2: currently on tap grid */
.tapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
@media(max-width:900px){.tapgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tapgrid{grid-template-columns:1fr}}
.tapcard{background:var(--paper);border-radius:20px;padding:22px 22px 20px;
  box-shadow:0 12px 26px -20px rgba(18,27,46,.3)}
.tapcard h4{font-family:var(--serif);font-weight:600;font-size:1.08rem;margin:0;color:var(--ink);line-height:1.3}
.tapcard .meta{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--timber);margin:6px 0 8px}
.tapcard p{margin:0;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}