/* THE JOLLY BREWER — October 2026 visual refinement
   Presentation-only stylesheet. Existing application JavaScript, destinations,
   event feed, privacy/consent behaviour and Netlify config are unchanged. */

:root {
  --ink: #0b1911;
  --cream: #f5f1e8;
  --green: #143522;
  --green2: #0e281a;
  --yellow: #ffd400;
  --muted: #bac8ba;
  --line: rgba(233,242,232,.12);
  --round: 14px;
}
html { scroll-padding-top: 96px; }
body { background:#0b1911; -webkit-font-smoothing:antialiased; }
.wrap { width:min(1280px, calc(100% - 72px)); }
:focus-visible { outline:3px solid #ffd400; outline-offset:4px; }
::selection { background:#ffd400; color:#09160e; }
h1,h2,h3,.display,.brand,.footTitle {font-family:'Oswald',Anton,Impact,sans-serif; font-weight:700; letter-spacing:-.019em; line-height:1.04; }
.eyebrow { font-size:.74rem; letter-spacing:.16em; font-weight:800; }
.btn {
  border:1px solid rgba(255,255,255,.48);
  border-radius:12px;
  min-height:54px;
  padding:0 25px;
  gap:12px;
  font-size:.79rem;
  letter-spacing:.065em;
  background:rgba(12,26,17,.12);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn.primary { border-color:#ffd400; background:#ffd400; color:#0b160e; box-shadow:0 6px 22px rgba(255,212,0,.10); }
.btn:hover { transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.10); }
.btn.primary:hover { background:#ffe140; border-color:#ffe140; box-shadow:0 9px 28px rgba(255,212,0,.20); }
.btn:active { transform:translateY(0); }
/* Branded, open navigation rather than one slab of blocky controls. */
header { background:rgba(8,23,14,.91); border-bottom:1px solid rgba(250,255,247,.09); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nav { height:84px; gap:28px; }
.brand { font-size:1.60rem; letter-spacing:-.013em; line-height:1; }
.navlinks { gap:8px; }
.navlinks a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:9px 13px;
  border-radius:10px; font-weight:800;
  letter-spacing:.035em; font-size:.77rem;
  color:#e3eae1;
  transition:background .2s ease,color .2s ease;
}
.navlinks a:hover,.navlinks a:focus-visible { background:rgba(255,255,255,.07); color:#ffd400; }
.nav>.btn.primary { border-radius:12px; min-height:52px; padding:0 26px; white-space:nowrap; }
.nav>.btn.primary::after { content:'↗'; font-size:1.17rem; font-weight:600; line-height:1; }
.menuBtn { min-height:44px; min-width:70px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:background .2s ease; cursor:pointer; }
.menuBtn:hover { background:rgba(255,255,255,.13); }
/* A photo-first editorial hero with calmer action hierarchy. */
.hero {
  min-height:min(830px, max(675px, 93svh));
  padding:160px 0 90px;
  background-position:center 44%;
}
.hero:before { background:linear-gradient(90deg,rgba(7,22,12,.94) 0%,rgba(7,22,12,.75) 41%,rgba(7,22,12,.20) 78%),linear-gradient(0deg,rgba(7,20,12,.83),transparent 44%); }
.heroContent { max-width:810px; }
.hero .eyebrow { display:flex; align-items:center; gap:14px; color:#ffda26; }
.hero .eyebrow::before { content:''; width:30px; height:2px; flex:none; background:currentColor; border-radius:2px; }
.hero h1 { font-size:clamp(4.5rem,8.1vw,8rem); line-height:.99; letter-spacing:-.03em; margin-top:17px; text-wrap:balance; }
.hero h1 span { color:#ffd400; }
.hero p { max-width:585px; margin:24px 0 30px; font-size:clamp(1rem,1.4vw,1.14rem); line-height:1.75; color:#e7ede5; }
.hero .actions { gap:12px; }
.hero .actions .btn { min-height:57px; }
.hero .actions .btn.primary::after { content:'↗'; font-size:1.16rem; font-weight:700; }
.hero .actions .btn:not(.primary) { border-color:rgba(255,255,255,.4); background:rgba(0,0,0,.08); }
.ticker { background:#ffd400; border:0; }
.tickerTrack { padding:11px 0; font-family:'Oswald',Anton,Impact,sans-serif; font-weight:700; letter-spacing:.10em; font-size:1.03rem; }
.tickerTrack span { padding-right:48px; }
/* Features that breathe: no big square card borders. */
.intro { position:relative; background:#143522; padding:86px 0 90px; }
.introGrid { grid-template-columns:1.45fr 1fr 1fr; gap:50px; align-items:center; }
.introLead { padding:0 15px 0 0; }
.introLead h2 { font-size:clamp(3rem,4.2vw,5.3rem); max-width:530px; margin-top:12px; line-height:1.07; }
.miniCard { position:relative; align-self:stretch; padding:9px 0 4px 24px; background:none; border:0; border-left:1px solid rgba(255,255,255,.19); }
.miniCard::before { content:''; position:absolute; left:-1px; top:0; width:2px; height:37px; background:#ffd400; border-radius:2px; }
.miniCard .num { font-family:'Oswald',Anton,sans-serif; font-weight:700; font-size:2rem; letter-spacing:-.02em; }
.miniCard h3 { font-family:Inter,Arial,sans-serif; font-weight:900; font-size:1.12rem; letter-spacing:-.01em; line-height:1.35; margin:15px 0 9px; }
.miniCard p { max-width:280px; line-height:1.7; color:#d2ded3; }
/* Events are a curated list, not a grid of hard-edged panels. */
.events { padding:108px 0 98px; background:#0c1911; }
.sectionHead { margin-bottom:38px; }
.sectionHead h2 { font-size:clamp(3.9rem,7vw,7rem); line-height:1.05; margin-top:8px; }
.textLink { padding-bottom:8px; border-bottom:1px solid #ffd400; transition:color .2s ease,border-color .2s ease; }
.textLink:hover { color:#ffd400; }
.eventStatusBar { color:#aebfae; margin:-17px 0 26px; font-weight:700; letter-spacing:.045em; }
.liveDot { background:#c7e683; box-shadow:0 0 0 4px rgba(199,230,131,.09); }
.eventList { border-top:1px solid rgba(255,255,255,.11); }
.event { column-gap:26px; padding:23px 17px; margin:0 -17px; border-bottom:1px solid rgba(255,255,255,.10); border-radius:12px; transition:background .2s ease,transform .2s ease,border-color .2s ease; }
.event:hover { background:rgba(255,255,255,.045); padding-left:17px; transform:translateX(3px); border-bottom-color:transparent; }
.event.withImage { grid-template-columns:95px 115px minmax(0,1.35fr) minmax(140px,.8fr) 26px; }
.eventDate { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.eventDate strong { font-family:'Oswald',Anton,sans-serif; font-weight:700; font-size:2.6rem; line-height:1; letter-spacing:-.02em; }
.eventDate span { margin:0; font-size:.68rem; line-height:1.5; font-weight:800; color:#c5d1c4; }
.eventImage { width:110px; height:110px; border:0; border-radius:10px; background:#15271c; padding:0; object-fit:contain; }
.eventTitle { font-family:'Oswald',Anton,sans-serif; font-weight:700; font-size:clamp(1.45rem,2vw,2rem); line-height:1.2; letter-spacing:-.017em; text-wrap:pretty; }
.eventBadge { display:inline-block; margin-top:9px; padding:0; border:0; font-size:.66rem; letter-spacing:.04em; color:#ffdb42; }
.eventMeta { font-weight:700; font-size:.73rem; line-height:1.55; letter-spacing:.025em; }
.eventMeta strong { color:#edf4e9; }
.eventMeta span { color:#91a393; text-transform:none; font-weight:500; font-size:.82rem; letter-spacing:0; }
.eventArrow { width:30px; height:30px; display:grid; place-items:center; color:#ffd400; border-radius:50%; background:rgba(255,212,0,.07); font-size:1.34rem; transition:background .2s ease,transform .2s ease; }
.event:hover .eventArrow { background:rgba(255,212,0,.16); transform:translateX(2px); }
.eventLoading { border-block-color:rgba(255,255,255,.10); padding:42px 14px; }
.eventFallback { border:1px solid rgba(255,255,255,.1); background:#13281b; border-radius:18px; padding:34px; }
.eventFallback h3 { font-family:'Oswald',Anton,sans-serif; font-size:2.4rem; }
.more { margin-top:34px; justify-content:space-between; }
.more p { font-size:.87rem; }
/* Photography has a curated gallery treatment, not hard-cut tiles. */
.gallery { height:505px; grid-template-columns:1.28fr 1fr .74fr; gap:12px; padding:0 24px 24px; background:#0c1911; max-width:1600px; margin:auto; }
.gallery img,.gallery img:nth-child(2) { border:0; border-radius:16px; overflow:hidden; object-fit:cover; }
/* About section: editorial type, staggered photography, understated finish. */
.about { background:#f3f0e8; padding:120px 0; }
.aboutGrid { gap:70px; }
.about h2 { font-size:clamp(3.65rem,5.45vw,6.5rem); line-height:1.075; letter-spacing:-.032em; }
.about p { max-width:550px; font-size:1.02rem; line-height:1.85; }
.aboutImages { gap:14px; }
.aboutImages img { height:510px; border-radius:16px; }
.aboutImages img:nth-child(2) { margin-top:66px; height:425px; }
.about .btn { border-color:#15291c; background:#15291c; color:#fff; }
.about .btn:hover { background:#245038; }
/* Hours: open, consistent dividers in place of big boxes. */
.hours { background:#103020; padding:110px 0; }
.hoursGrid { gap:85px; }
.hours h2 { font-size:clamp(3.8rem,6vw,6.6rem); line-height:1.07; margin-top:12px; }
.hoursIntro { font-size:1rem; line-height:1.8; }
.times { border-top-color:rgba(255,255,255,.14); }
.timeRow { padding:19px 5px; border-bottom-color:rgba(255,255,255,.13); font-size:.82rem; letter-spacing:.035em; }
/* A single rounded, strong invitation rather than a full-width square strip. */
.cta { background:#0c1911; padding:34px 0 110px; }
.ctaGrid { border-radius:24px; background:#ffd400; color:#102015; padding:clamp(36px,5.2vw,74px); overflow:hidden; }
.cta h2 { font-size:clamp(3.6rem,6vw,6.3rem); line-height:1.06; margin-top:9px; }
.cta .btn { background:#102319; border-color:#102319; color:white; }
.cta .btn:hover { background:#244631; }
.cta .actions .btn + .btn { border-color:rgba(7,23,12,.5); background:transparent; color:#0b1b11; }
.cta .actions .btn + .btn:hover { background:rgba(0,0,0,.07); }
.contact { padding:110px 0; background:#0c1911; }
.contact h2 { font-size:clamp(3.8rem,6vw,6.6rem); line-height:1.07; margin-top:10px; }
.contact p { line-height:1.8; }
.mail { font-family:'Oswald',Anton,sans-serif; font-weight:700; font-size:clamp(1.7rem,3.5vw,3.8rem); line-height:1.12; letter-spacing:-.02em; }
.mail:hover { text-decoration:underline; text-underline-offset:8px; }
.contactLogo { max-width:340px; }
footer { background:#08130c; border-top-color:rgba(255,255,255,.09); padding:48px 0 30px; }
.footTitle { font-size:1.92rem; }
.footLinks { gap:24px; flex-wrap:wrap; }
.footLinks a { font-size:.76rem; transition:color .2s ease; }
.footLinks a:hover { color:#ffd400; }
.copyright { margin-top:42px; color:#94a695; }
.cookieNotice { border:1px solid rgba(0,0,0,.12); border-radius:18px; padding:20px; background:#f6f2e8; box-shadow:0 20px 65px rgba(0,0,0,.34); }
.cookieNotice strong { font-family:'Oswald',Anton,sans-serif; font-size:1.32rem; }
.cookieActions button { border:1px solid #172b1d; border-radius:9px; cursor:pointer; }
.cookieActions button:hover { filter:brightness(.95); }
/* Retain the same mobile menu interaction and destinations. */
@media(max-width:1100px) and (min-width:901px) {
  .nav { gap:12px; }
  .navlinks { gap:0; }
  .navlinks a { padding:8px 9px; font-size:.69rem; }
  .nav>.btn.primary { padding:0 15px; }
  .brand { font-size:1.36rem; }
  .introGrid { gap:27px; }
}
@media(max-width:900px) {
  .wrap { width:min(100% - 48px,1280px); }
  .nav { height:76px; }
  .menuBtn { display:block; }
  .navlinks { top:76px; left:14px; right:14px; background:#0b2014; border:1px solid rgba(255,255,255,.12); border-radius:0 0 17px 17px; padding:12px; gap:2px; box-shadow:0 22px 38px rgba(0,0,0,.25); }
  .navlinks.open { display:flex; }
  .navlinks a { width:100%; display:flex; justify-content:flex-start; min-height:50px; padding:13px 17px; font-size:.82rem; }
  .nav>.btn { display:none; }
  .hero { min-height:740px; padding:134px 0 70px; }
  .hero h1 { font-size:clamp(4.2rem,11vw,6.7rem); }
  .introGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
  .introLead { grid-column:1/-1; }
  .introLead h2 { max-width:680px; }
  .event.withImage { grid-template-columns:77px 98px minmax(0,1fr) 28px; }
  .eventImage { width:96px; height:96px; }
  .eventMeta { display:none; }
  .event.withImage .eventMeta { display:none; }
  .event { grid-template-columns:80px minmax(0,1fr) 28px; }
  .aboutGrid,.hoursGrid,.contactGrid { gap:45px; }
  .aboutImages { max-width:720px; }
  .gallery { height:380px; }
  .gallery img { height:100%; }
  .gallery img:nth-child(3) { grid-column:auto; height:100%; }
  .ctaGrid { align-items:flex-start; }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 38px); }
  .nav { height:72px; }
  .brand { font-size:1.34rem; }
  .navlinks { top:72px; }
  .hero { min-height:700px; padding:132px 0 63px; background-position:62% center; }
  .hero:before { background:linear-gradient(90deg,rgba(7,22,12,.88),rgba(7,22,12,.50) 75%),linear-gradient(0deg,rgba(7,20,12,.91),transparent 65%); }
  .hero h1 { font-size:clamp(3.55rem,14vw,5rem); margin-top:17px; line-height:1; }
  .hero p { font-size:1rem; line-height:1.66; margin:20px 0 25px; }
  .hero .actions .btn { width:100%; }
  .tickerTrack { font-size:.95rem; }
  .intro { padding:68px 0; }
  .introGrid { grid-template-columns:1fr 1fr; gap:34px 15px; }
  .introLead { grid-column:1/-1; }
  .introLead h2 { font-size:clamp(2.95rem,11vw,4rem); }
  .miniCard { padding-left:14px; }
  .miniCard .num { font-size:1.7rem; }
  .miniCard h3 { font-size:.88rem; line-height:1.35; }
  .miniCard p { font-size:.82rem; }
  .events { padding:78px 0 73px; }
  .sectionHead { gap:18px; margin-bottom:30px; }
  .sectionHead h2 { font-size:clamp(3.55rem,14vw,5.2rem); }
  .eventStatusBar { margin:-7px 0 25px; font-size:.64rem; }
  .event { grid-template-columns:52px minmax(0,1fr) 22px; gap:12px; padding:18px 4px; margin:0; border-radius:9px; }
  .event:hover { padding-left:4px; transform:none; }
  .event.withImage { grid-template-columns:48px 76px minmax(0,1fr) 19px; gap:9px; }
  .eventImage { width:76px; height:76px; border-radius:8px; }
  .eventDate strong { font-size:2.04rem; }
  .eventDate span { font-size:.56rem; }
  .eventTitle { font-size:clamp(1.17rem,5.2vw,1.5rem); line-height:1.16; }
  .eventBadge { margin-top:7px; font-size:.57rem; }
  .eventArrow { width:22px; height:22px; font-size:1rem; }
  .more { gap:11px; }
  .more .btn { width:100%; }
  .gallery { display:grid; height:auto; padding:0 15px 15px; grid-template-columns:1fr 1fr; gap:9px; }
  .gallery img,.gallery img:nth-child(2),.gallery img:nth-child(3) { width:100%; height:210px; border:0; border-radius:11px; grid-column:auto; }
  .gallery img:first-child { grid-column:1/-1; height:265px; }
  .about { padding:80px 0; }
  .about h2 { font-size:clamp(3.4rem,10vw,4.8rem); line-height:1.08; }
  .about p { font-size:.98rem; }
  .aboutImages { gap:9px; }
  .aboutImages img { height:300px; border-radius:11px; }
  .aboutImages img:nth-child(2) { height:255px; margin-top:40px; }
  .hours { padding:85px 0; }
  .hours h2,.contact h2 { font-size:clamp(3.65rem,12vw,5.5rem); }
  .timeRow { font-size:.75rem; }
  .cta { padding:15px 0 80px; }
  .ctaGrid { border-radius:17px; padding:35px 24px; }
  .cta h2 { font-size:clamp(3.15rem,10vw,4.6rem); }
  .cta .actions,.cta .btn { width:100%; }
  .contact { padding:85px 0; }
  .mail { font-size:clamp(1.9rem,7.3vw,3.4rem); }
  footer { padding-top:40px; }
  .foot { gap:27px; }
  .footLinks { gap:17px; }
  .cookieNotice { left:10px; right:10px; padding:16px; }
}
@media(max-width:370px) {
  .brand { font-size:1.14rem; }
  .hero h1 { font-size:3.45rem; }
  .introGrid { gap:30px 11px; }
  .event.withImage { grid-template-columns:42px 64px minmax(0,1fr) 16px; gap:7px; }
  .eventImage { width:64px; height:64px; }
  .eventDate strong { font-size:1.75rem; }
  .eventTitle { font-size:1.08rem; }
  .eventArrow { width:17px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
/* Prevent long editorial headings from setting a mobile min-content width. */
@media(max-width:900px) {
  .aboutGrid { grid-template-columns:minmax(0,1fr); }
  .aboutGrid > * { min-width:0; }
  .about h2 { overflow-wrap:break-word; }
}
@media(max-width:600px) {
  .about h2 .red { display:block; }
  .eventTitle { overflow-wrap:anywhere; }
}
@media(max-width:600px) {
  .about h2 .red { font-size:.77em; letter-spacing:-.045em; }
}
@media(max-width:370px) {
  .hero h1 { font-size:clamp(2.72rem,12.5vw,3rem); }
}