/* Global design tokens and reused inline SVG textures. */
:root{
  --orange:#ff7a00;
  --orange-deep:#d94a00;
  --orange-soft:#ff9a2f;
  --yellow:#ffd21f;
  --yellow-deep:#f0c300;
  --cream:#f3e2c7;
  --cream-soft:#ffe4c7;
  --cream-pale:#fff3df;
  --brown:#3b1f14;
  --brown-dark:#2b140d;
  --brown-soft:#6f3c20;
  --shadow:rgba(43,20,13,.24);
  --outline-shadow:5px 5px 0 rgba(43,20,13,.92);
  --bg-orange:#f28c4b;
  --bg-yellow:#f4c95d;
  --bg-orange-rgb:242,140,75;
  --bg-yellow-rgb:244,201,93;
  --hand-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cg fill='%23c84835' opacity='.48' transform='translate(22 24) rotate(-18 118 132)'%3E%3Cpath d='M126 246c-29-28-54-65-67-104-4-13 9-21 18-11l31 34-34-93c-5-15 15-24 22-9l33 79-17-103c-2-17 20-21 25-4l22 102 5-95c1-17 23-16 24 1l4 98 25-66c6-15 26-8 22 8l-22 102c-6 28-26 51-55 65-12 6-25 5-36-4z'/%3E%3C/g%3E%3C/svg%3E");
  --hand-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' viewBox='0 0 360 260'%3E%3Cg fill='%23f4a65d' opacity='.52' transform='translate(42 6) rotate(17 112 122)'%3E%3Cpath d='M112 226c-25-25-47-58-58-92-4-12 8-19 16-10l27 30-30-82c-5-14 13-22 20-8l29 70-15-91c-2-15 18-19 22-4l20 91 4-84c1-15 21-14 22 1l3 87 22-59c5-13 23-7 20 7l-20 91c-5 25-23 46-49 58-11 5-23 4-33-5z'/%3E%3C/g%3E%3C/svg%3E");
  --hand-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='360' viewBox='0 0 500 360'%3E%3Cg fill='%23f7bd61' opacity='.38' transform='translate(190 58) rotate(-6 118 132)'%3E%3Cpath d='M126 246c-29-28-54-65-67-104-4-13 9-21 18-11l31 34-34-93c-5-15 15-24 22-9l33 79-17-103c-2-17 20-21 25-4l22 102 5-95c1-17 23-16 24 1l4 98 25-66c6-15 26-8 22 8l-22 102c-6 28-26 51-55 65-12 6-25 5-36-4z'/%3E%3C/g%3E%3C/svg%3E");
  --hero-hand-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cg fill='%23b93628' opacity='.84' transform='translate(22 24) rotate(-18 118 132)'%3E%3Cpath d='M126 246c-29-28-54-65-67-104-4-13 9-21 18-11l31 34-34-93c-5-15 15-24 22-9l33 79-17-103c-2-17 20-21 25-4l22 102 5-95c1-17 23-16 24 1l4 98 25-66c6-15 26-8 22 8l-22 102c-6 28-26 51-55 65-12 6-25 5-36-4z'/%3E%3C/g%3E%3C/svg%3E");
  --hero-hand-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' viewBox='0 0 360 260'%3E%3Cg fill='%23e57528' opacity='.86' transform='translate(42 6) rotate(17 112 122)'%3E%3Cpath d='M112 226c-25-25-47-58-58-92-4-12 8-19 16-10l27 30-30-82c-5-14 13-22 20-8l29 70-15-91c-2-15 18-19 22-4l20 91 4-84c1-15 21-14 22 1l3 87 22-59c5-13 23-7 20 7l-20 91c-5 25-23 46-49 58-11 5-23 4-33-5z'/%3E%3C/g%3E%3C/svg%3E");
  --hero-hand-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='360' viewBox='0 0 500 360'%3E%3Cg fill='%23e5a83c' opacity='.74' transform='translate(190 58) rotate(-6 118 132)'%3E%3Cpath d='M126 246c-29-28-54-65-67-104-4-13 9-21 18-11l31 34-34-93c-5-15 15-24 22-9l33 79-17-103c-2-17 20-21 25-4l22 102 5-95c1-17 23-16 24 1l4 98 25-66c6-15 26-8 22 8l-22 102c-6 28-26 51-55 65-12 6-25 5-36-4z'/%3E%3C/g%3E%3C/svg%3E");
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--bg-orange);
}

body{
  width:100%;
  max-width:100%;
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;
  color:var(--brown);
  font-family:Inter,"Trebuchet MS",Verdana,sans-serif;
  background:
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 50%,var(--bg-orange) 100%);
  background-attachment:fixed;
}

body.modal-open{
  overflow:hidden;
}

#root,
.App,

main{
  position:relative;
  width:100%;
  max-width:100%;
  min-height:100vh;
  height:auto;
  overflow-x:hidden;
  overflow-y:visible !important;
}

img,
svg,
iframe{
  max-width:100%;
}
.paint-blotches{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.paint-blotch{
  position:absolute;
  width:clamp(90px,13vw,175px);
  aspect-ratio:1.18;
  background:
    radial-gradient(circle at 18% 34%,rgba(255,243,223,.96) 0 13px,transparent 14px),
    radial-gradient(circle at 44% 18%,rgba(255,243,223,.9) 0 7px,transparent 8px),
    radial-gradient(circle at 66% 42%,rgba(255,243,223,.86) 0 5px,transparent 6px),
    radial-gradient(ellipse at 36% 62%,rgba(255,243,223,.95) 0 34px,transparent 35px),
    radial-gradient(ellipse at 62% 64%,rgba(255,243,223,.8) 0 22px,transparent 23px);
  opacity:.72;
}
.blotch-one{top:12%;right:-26px;rotate:18deg}
.blotch-two{top:34%;left:-34px;rotate:-12deg}
.blotch-three{top:56%;right:-48px;rotate:-24deg}
.blotch-four{top:73%;left:4%;rotate:20deg;opacity:.58}
.blotch-five{top:87%;right:8%;rotate:9deg;opacity:.52}
.paint-stroke{
  position:absolute;
  width:clamp(90px,14vw,190px);
  height:clamp(10px,1.5vw,18px);
  border-radius:999px;
  background:rgba(255,243,223,.72);
  box-shadow:32px 18px 0 rgba(255,210,31,.28),-24px -14px 0 rgba(255,243,223,.38);
  pointer-events:none;
}
.stroke-one{top:25%;right:8%;rotate:-18deg}
.stroke-two{top:61%;left:10%;rotate:15deg;opacity:.66}
.stroke-three{top:91%;left:18%;rotate:-9deg;opacity:.58}
.section-blotch{
  position:absolute;
  z-index:0;
  width:clamp(90px,12vw,170px);
  aspect-ratio:1.16;
  background:
    radial-gradient(circle at 20% 28%,rgba(255,243,223,.95) 0 12px,transparent 13px),
    radial-gradient(circle at 48% 17%,rgba(255,243,223,.88) 0 7px,transparent 8px),
    radial-gradient(circle at 68% 42%,rgba(255,243,223,.8) 0 5px,transparent 6px),
    radial-gradient(ellipse at 34% 62%,rgba(255,243,223,.95) 0 34px,transparent 35px),
    radial-gradient(ellipse at 66% 64%,rgba(255,243,223,.76) 0 21px,transparent 22px);
  opacity:.72;
  pointer-events:none;
}

.site-section{
  min-height:100vh;
  height:auto;
  padding:72px 0;
  position:relative;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:visible;
}

/* Hero section. */
.hero-section{
  background:
    var(--hero-hand-red),
    var(--hero-hand-orange),
    var(--hero-hand-yellow),
    var(--hero-hand-red),
    var(--hero-hand-orange),
    var(--hero-hand-yellow),
    radial-gradient(circle at 18% 32%,rgba(var(--bg-yellow-rgb),.22) 0 9%,transparent 10%),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:10% 12%, 90% 17%, 58% 70%, 17% 74%, 81% 58%, 44% 9%, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:clamp(235px,31vw,390px) auto, clamp(210px,27vw,330px) auto, clamp(260px,34vw,430px) auto, clamp(205px,26vw,330px) auto, clamp(200px,25vw,315px) auto, clamp(180px,23vw,295px) auto, auto, auto;
  min-height:calc(100vh - 74px);
  display:grid;
  place-items:center;
  padding-top:92px;
  text-align:center;
}
.hero-section:after,
.visit-section:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:150px;
  background:
    url("assets/pub1.png") 40px 28px / 110px 88px no-repeat,
    url("assets/pub2.png") 190px 18px / 110px 88px no-repeat,
    url("assets/pub3.png") 340px 30px / 110px 88px no-repeat,
    url("assets/pub4.png") 490px 20px / 110px 88px no-repeat,
    url("assets/pub5.png") 640px 28px / 110px 88px no-repeat,
    repeating-linear-gradient(
      90deg,
      rgba(var(--bg-yellow-rgb),.72) 0 80px,
      rgba(var(--bg-yellow-rgb),.72) 80px 130px,
      rgba(var(--bg-orange-rgb),.7) 130px 160px
    );
  clip-path:polygon(0 18%,100% 18%,100% 100%,0 100%);
  opacity:.95;
  pointer-events:none;
}
.polaroid-strip{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin:38px auto 70px;
  padding:0 20px;
}

.polaroid-strip figure{
  width:150px;
  margin:0;
  padding:10px 10px 28px;
  background:#fff8ec;
  border:2px solid var(--brown-dark);
  box-shadow:5px 5px 0 rgba(43,20,13,.55);
  transform:rotate(-3deg);
}

.polaroid-strip figure:nth-child(even){
  transform:rotate(3deg);
}

.polaroid-strip img{
  width:100%;
  height:105px;
  object-fit:cover;
  display:block;
}

.polaroid-strip figcaption{
  margin-top:8px;
  color:var(--brown-dark);
  font-size:.75rem;
  font-weight:900;
  text-align:center;
}

@media(max-width:600px){
  .polaroid-strip{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:18px;
    margin:30px auto 54px;
    padding:0 18px;
    scroll-snap-type:x mandatory;
  }

  .polaroid-strip figure{
    flex:0 0 auto;
    width:140px;
    scroll-snap-align:center;
  }

  .polaroid-strip::-webkit-scrollbar{
    display:none;
  }
}

.taps-section:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-1px;
  height:120px;
  pointer-events:none;
  z-index:1;
}
.hero-section:after{
  background:var(--bg-yellow);
  clip-path:polygon(0 52%,10% 34%,22% 55%,35% 62%,49% 45%,62% 43%,76% 22%,90% 43%,100% 38%,100% 100%,0 100%);
}
.hero-page-shell{
  width:min(960px,calc(100% - 28px));
  margin:0 auto;
  position:relative;
  z-index:4;
  padding:44px 20px 56px;
}
.hero-logo-wrap{
  width:clamp(150px,22vw,230px);
  aspect-ratio:1;
  margin:0 auto 24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  animation:heroFloat 4.8s ease-in-out infinite,heroGlowPulse 2.8s ease-in-out infinite;
  filter:drop-shadow(0 0 20px rgba(255,210,31,.5));
}
.hero-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  transform:translateZ(0);
}
.hero-kicker{
  display:inline-block;
  margin:0 0 14px;
  padding:9px 18px;
  border:2px solid var(--brown-dark);
  border-radius:999px;
  background:var(--yellow);
  color:var(--brown-dark);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(43,20,13,.8);
}
.hero-section h1{
  max-width:860px;
  margin:0 auto 16px;
  color:var(--cream-pale);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(3rem,8vw,6.4rem);
  font-style:italic;
  line-height:.9;
  text-shadow:5px 5px 0 rgba(43,20,13,.85),0 0 26px rgba(255,210,31,.22);
}
.hero-intro{
  max-width:650px;
  margin:0 auto 30px;
  color:var(--cream-soft);
  font-size:clamp(1rem,2.2vw,1.25rem);
  font-weight:800;
  line-height:1.55;
}
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.hero-button{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 26px;
  border:3px solid var(--brown-dark);
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  font-weight:900;
  text-decoration:none;
  box-shadow:5px 5px 0 rgba(43,20,13,.86);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.hero-button.primary{
  background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));
  color:var(--brown-dark);
}
.hero-button.secondary{
  background:var(--brown-dark);
  color:var(--yellow);
}
.hero-button:hover,
.hero-button:focus-visible{
  transform:translateY(3px);
  box-shadow:2px 2px 0 rgba(43,20,13,.86),0 0 22px rgba(255,210,31,.35);
  outline:none;
}
.hero-sparkle{
  position:absolute;
  color:var(--yellow);
  font-size:clamp(1.8rem,4vw,3rem);
  text-shadow:0 0 18px rgba(255,210,31,.8),3px 3px 0 rgba(43,20,13,.7);
  animation:heroTwinkle 3.4s ease-in-out infinite;
  pointer-events:none;
}
.hero-sparkle-one{top:15%;left:16%;animation-delay:.2s}
.hero-sparkle-two{top:24%;right:18%;animation-delay:1s;color:var(--cream-pale)}
.hero-sparkle-three{bottom:22%;left:22%;animation-delay:1.8s}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-12px) scale(1.025)}
}
@keyframes heroGlowPulse{
  0%,100%{filter:drop-shadow(0 0 13px rgba(255,210,31,.55)) drop-shadow(0 0 28px rgba(255,122,0,.28))}
  50%{filter:drop-shadow(0 0 28px rgba(255,210,31,.9)) drop-shadow(0 0 48px rgba(255,122,0,.48))}
}
@keyframes heroTwinkle{
  0%,100%{transform:translateY(0) rotate(0deg) scale(.85);opacity:.45}
  50%{transform:translateY(-10px) rotate(8deg) scale(1.12);opacity:1}
}

.events-section,
.taps-section,
.staff-section,
.visit-section{background:transparent}

/* Events section and booking modal. */
.events-section{
  min-height:auto;
  padding-top:32px;
  padding-bottom:28px;
  background:
    var(--hand-red),
    var(--hand-orange),
    var(--hand-yellow),
    var(--hand-red),
    var(--hand-orange),
    var(--hand-yellow),
    var(--hand-red),
    var(--hand-orange),
    var(--hand-yellow),
    var(--hand-red),
    var(--hand-orange),
    var(--hand-yellow),
    var(--hand-red),
    var(--hand-orange),
    var(--hand-yellow),
    radial-gradient(circle at 92% 20%,rgba(255,243,223,.18) 0 7%,transparent 8%),
    radial-gradient(circle at 12% 72%,rgba(var(--bg-yellow-rgb),.22) 0 9%,transparent 10%),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:8% 16%, 92% 22%, 48% 58%, 74% 74%, 15% 82%, 38% 92%, 62% 88%, 94% 96%, 31% 18%, 52% 24%, 68% 16%, -10% 100%, 18% 108%, 55% 106%, 86% 110%, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  background-size:clamp(170px,23vw,300px) auto, clamp(145px,18vw,240px) auto, clamp(190px,25vw,330px) auto, clamp(135px,17vw,220px) auto, clamp(145px,19vw,250px) auto, clamp(130px,17vw,220px) auto, clamp(150px,20vw,260px) auto, clamp(120px,16vw,210px) auto, clamp(130px,16vw,210px) auto, clamp(120px,15vw,200px) auto, clamp(135px,17vw,220px) auto, 360px auto, 330px auto, 390px auto, 330px auto, auto, auto, auto;
}
.events-section:before{
  content:"";
  position:absolute;
  left:-44px;
  top:18%;
  width:210px;
  height:170px;
  background:
    radial-gradient(circle at 58% 22%,rgba(255,243,223,.94) 0 7px,transparent 8px),
    radial-gradient(circle at 74% 36%,rgba(255,243,223,.94) 0 5px,transparent 6px),
    radial-gradient(ellipse at 26% 50%,rgba(255,243,223,.94) 0 34px,transparent 35px),
    radial-gradient(ellipse at 50% 60%,rgba(255,243,223,.78) 0 22px,transparent 23px);
  rotate:14deg;
  opacity:.76;
  pointer-events:none;
}
.events-section:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-1px;
  height:118px;
  background:var(--bg-yellow);
  clip-path:polygon(0 52%,12% 42%,24% 56%,38% 46%,52% 58%,67% 43%,82% 52%,100% 40%,100% 100%,0 100%);
  pointer-events:none;
  z-index:1;
}

.visit-section{
  background:
    var(--hand-yellow),
    radial-gradient(circle at 86% 18%,rgba(255,243,223,.14) 0 6%,transparent 7%),
    radial-gradient(circle at 12% 78%,rgba(var(--bg-yellow-rgb),.2) 0 8%,transparent 9%),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:8% 68%, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:clamp(160px,19vw,250px) auto, auto, auto, auto;
}
.visit-section:before{
  content:"";
  position:absolute;
  left:-30px;
  top:36%;
  width:165px;
  height:150px;
  background:
    radial-gradient(circle at 20% 18%,var(--cream-pale) 0 12px,transparent 13px),
    radial-gradient(circle at 44% 24%,var(--cream-pale) 0 7px,transparent 8px),
    radial-gradient(circle at 55% 39%,var(--cream-pale) 0 5px,transparent 6px),
    radial-gradient(ellipse at 22% 58%,var(--cream-pale) 0 28px,transparent 29px);
  rotate:-16deg;
  opacity:.96;
  pointer-events:none;
}
.visit-section:after{
  height:82px;
  background:
    repeating-linear-gradient(90deg,rgba(var(--bg-yellow-rgb),.72) 0 18px,rgba(var(--bg-yellow-rgb),.72) 18px 34px,rgba(var(--bg-orange-rgb),.7) 34px 44px,rgba(var(--bg-orange-rgb),.7) 44px 58px);
  clip-path:polygon(0 30%,100% 30%,100% 100%,0 100%);
  opacity:.82;
}

.taps-section{
  background:
    var(--hand-red),
    radial-gradient(circle at 8% 22%,rgba(255,243,223,.16) 0 8%,transparent 9%),
    radial-gradient(circle at 88% 48%,rgba(var(--bg-yellow-rgb),.2) 0 7%,transparent 8%),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:92% 72%, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:clamp(145px,17vw,230px) auto, auto, auto, auto;
}
.taps-section:before{
  content:"";
  position:absolute;
  right:-18px;
  bottom:7%;
  width:190px;
  height:160px;
  background:
    radial-gradient(ellipse at 68% 72%,var(--brown-dark) 0 18px,transparent 19px),
    radial-gradient(ellipse at 46% 66%,var(--brown-dark) 0 15px,transparent 16px),
    radial-gradient(ellipse at 30% 76%,var(--brown-dark) 0 13px,transparent 14px),
    linear-gradient(116deg,transparent 0 46%,var(--brown-dark) 47% 53%,transparent 54% 100%);
  rotate:-20deg;
  opacity:.88;
  pointer-events:none;
}
.taps-section:after{
  height:128px;
  background:var(--bg-yellow);
  clip-path:polygon(0 50%,12% 44%,25% 55%,39% 48%,52% 58%,67% 46%,82% 54%,100% 42%,100% 100%,0 100%);
}

.events-page-shell,
.taps-page-shell,
.staff-page-shell,
.visit-page-shell{
  width:min(1100px,calc(100% - 28px));
  margin:0 auto;
  position:relative;
  z-index:4;
}
.staff-page-shell{width:min(1200px,calc(100% - 32px))}

.events-panel{
  position:relative;
  min-height:500px;
  display:grid;
  grid-template-columns:minmax(340px,560px) minmax(300px,430px);
  align-items:start;
  justify-content:center;
  justify-items:center;
  gap:clamp(28px,4vw,48px);
  overflow:hidden;
  margin:0;
  padding:24px clamp(24px,5vw,52px) 58px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.events-panel:after{
  content:none;
}
.events-title{
  position:relative;
  grid-column:1 / -1;
  justify-self:center;
  z-index:2;
  margin:0 0 2px;
  color:var(--orange-deep);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(3rem,7vw,5.4rem);
  font-style:italic;
  font-weight:800;
  line-height:.86;
  text-align:center;
  text-shadow:3px 3px 0 rgba(255,243,223,.78),5px 5px 0 rgba(43,20,13,.28);
}
.events-copy{
  position:relative;
  z-index:2;
  width:100%;
  max-width:560px;
  justify-self:center;
  padding-top:56px;
}
.event-list{display:grid;gap:20px;margin:0 0 30px;padding:0;list-style:none}
.event-item{
  position:relative;
  display:block;
  min-height:74px;
  padding:16px 24px 16px 74px;
  border-radius:999px;
  background:var(--orange-deep);
  box-shadow:7px 7px 0 rgba(43,20,13,.4);
}
.event-icon{
  position:absolute;
  left:18px;
  top:50%;
  width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;
  background:var(--bg-yellow);color:var(--orange-deep);font-weight:900;
  transform:translateY(-50%);
}
.event-item strong{
  display:block;
  color:var(--cream-pale);
  font-family:'Cormorant Garamond',Georgia,"Times New Roman",serif;
  font-size:1.55rem;
  font-weight:800;
  font-style:italic;
  line-height:1;
}
.event-item small{
  display:block;
  max-width:440px;
  margin-top:6px;
  color:var(--cream-soft);
  font-size:.82rem;
  font-weight:900;
  line-height:1.4;
}
.book-button,
.directions-button,
.controls button,
.submit-button{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 24px;
  border:3px solid var(--brown-dark);
  border-radius:999px;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));
  color:var(--brown-dark);
  cursor:pointer;
  font-size:.98rem;
  font-weight:800;
  font-family:inherit;
  text-decoration:none;
  box-shadow:4px 4px 0 rgba(43,20,13,.75);
  transition:.16s ease;
}
.book-button:hover,.book-button:focus-visible,
.directions-button:hover,.directions-button:focus-visible,
.controls button:hover,.controls button:focus-visible,
.submit-button:hover,.submit-button:focus-visible{
  transform:translateY(2px);
  box-shadow:2px 2px 0 rgba(43,20,13,.75);
  outline:none;
}
.event-slider{
  position:relative;
  z-index:1;
  width:min(100%,420px);
  height:410px;
  justify-self:end;

  border:14px solid #4b2b17;
  border-radius:18px;

  background:#4b2b17; /* Simple wood colour for the photo frame. */

  box-shadow:
    inset 0 0 0 4px rgba(255,230,180,.18),
    inset 0 0 18px rgba(0,0,0,.45),
    8px 8px 0 rgba(43,20,13,.55);

  padding:10px;
  overflow:hidden;
  rotate:2deg;
}
.slide.active{
  opacity:1;
  z-index:1;
}
.slider-track{
  background:#1a0f0a;
  border-radius:10px;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .4s ease;
}

.slide.active{
  opacity:1;
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid var(--brown-dark);
  background:var(--yellow);
  color:var(--brown-dark);
  font-size:1.4rem;
  cursor:pointer;
  z-index:2;
}

.slider-btn.prev{left:10px;}
.slider-btn.next{right:10px;}

.booking-overlay{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;
  background:rgba(44,28,9,.58)
}
.booking-overlay[hidden]{display:none}
.booking-box{
  position:relative;
  width:min(100%,430px);
  padding:30px;
  border:3px solid var(--brown-dark);
  border-radius:22px;
  background:linear-gradient(180deg,var(--cream-pale),var(--cream));
  box-shadow:8px 8px 0 rgba(43,20,13,.92),0 26px 70px rgba(30,18,5,.34);
}
.booking-box h2{
  margin:0 0 22px;
  color:var(--brown-dark);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2rem;
  font-style:italic;
  line-height:1;
}
.close-button{
  position:absolute;top:12px;right:14px;width:34px;height:34px;
  border:2px solid var(--brown-dark);border-radius:50%;
  background:var(--yellow);color:var(--brown-dark);cursor:pointer;
  font-size:1.45rem;font-weight:800;line-height:1
}
.booking-form{display:grid;gap:10px}
.booking-form label{color:var(--brown-dark);font-size:.92rem;font-weight:800}
.booking-form input,.booking-form select{
  width:100%;min-height:44px;padding:8px 12px;
  border:2px solid rgba(59,31,20,.35);border-radius:10px;
  background:#fff8ec;color:var(--brown-dark);font:inherit
}
.form-message{min-height:20px;margin:4px 0 0;color:var(--orange-deep);font-size:.9rem;font-weight:800;line-height:1.35}

.taps-hero-title,
.visit-hero-title,
.staff-title-wrap{display:flex;justify-content:center}
.taps-hero-title{margin-bottom:34px}
.visit-hero-title{margin-bottom:28px}
.taps-hero-title span,
.visit-hero-title span,
.staff-title{
  display:inline-block;
  padding:14px 30px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));
  color:var(--brown-dark);
  border:2px solid var(--brown-dark);
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:700;
  box-shadow:5px 5px 0 rgba(43,20,13,.92);
  letter-spacing:.03em;
}
.staff-title{font-style:italic;line-height:1;margin:0}

/* Interactive beer taps and pour animation. */
.tap-board{
  position:relative;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.08) 0 2px,transparent 3px),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0 2px,transparent 3px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px),
    linear-gradient(180deg,#263529 0%,#18251d 52%,#101a15 100%);
  background-position:center, center, center, center;
  background-repeat:repeat, repeat, repeat, no-repeat;
  background-size:auto, auto, auto, auto;
  border:12px solid #4b2b17;
  border-radius:12px;
  padding:58px 34px 46px;
  box-shadow:inset 0 0 0 3px rgba(255,238,193,.22),inset 0 0 40px rgba(0,0,0,.42),8px 10px 0 rgba(43,20,13,.9),0 18px 34px rgba(43,20,13,.22);
}
.tap-board:before{
  content:"This Week's Tap Selection!";
  position:absolute;
  left:50%;
  top:10px;
  z-index:3;
  color:rgba(255,243,223,.92);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.6rem,4vw,2.5rem);
  font-style:italic;
  font-weight:800;
  line-height:1;
  width:max-content;
  max-width:calc(100% - 32px);
  text-align:center;
  text-shadow:0 0 1px rgba(255,255,255,.7);
  transform:translateX(-50%);
  pointer-events:none;
}
.tap-board:after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:52px;
  height:2px;
  z-index:3;
  background:repeating-linear-gradient(90deg,rgba(255,243,223,.78) 0 16px,transparent 16px 24px);
  pointer-events:none;
}
.tap-scroll-hint{display:none}
.tap-row{display:flex;justify-content:center;align-items:flex-end;gap:28px;flex-wrap:wrap}
.tap-unit{position:relative;appearance:none;border:0;background:transparent;cursor:pointer;display:grid;grid-template-columns:1fr;grid-template-rows:88px auto auto;justify-items:center;align-items:end;min-width:148px;min-height:250px;transition:transform .25s ease;scroll-snap-align:center}
.tap-unit:hover,.tap-unit.active,.tap-unit:focus-visible{transform:translateY(-8px)}
.tap-unit:focus-visible{outline:3px solid var(--yellow);outline-offset:6px;border-radius:18px}
.tap-top{
  grid-column:1;
  grid-row:2;
  width:28px;height:28px;border-radius:999px;border:2px solid rgba(255,243,223,.78);
  background:radial-gradient(circle at 40% 35%,rgba(255,243,223,.85) 0 14%,var(--badge) 15% 58%,rgba(255,255,255,.45) 59% 64%,rgba(0,0,0,.18) 65% 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.28);margin-bottom:12px
}
.tap-handle{
  grid-column:1;
  grid-row:2;
  width:54px;min-height:118px;border-radius:18px;
  background:transparent;
  border:2px solid rgba(255,243,223,.72);box-shadow:3px 3px 0 rgba(0,0,0,.28);
  color:rgba(255,243,223,.94);padding:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;overflow:visible;
  min-height:118px;
}
.tap-label-name{
  position:absolute;
  top:0;
  left:50%;
  width:142px;
  transform:translateX(-50%) rotate(-2deg);
  font-family:'Cormorant Garamond',serif;font-size:1.85rem;font-weight:900;
  line-height:.88;margin:0;color:rgba(255,243,223,.98);white-space:normal;overflow:visible;text-shadow:0 0 1px rgba(255,255,255,.55),2px 2px 0 rgba(0,0,0,.22)
}
.tap-label-style{
  position:absolute;
  top:48px;
  left:50%;
  width:142px;
  transform:translateX(-50%) rotate(1deg);
  font-size:.9rem;line-height:1.1;font-weight:900;color:rgba(244,201,93,.94);overflow:visible;text-shadow:0 0 1px rgba(255,255,255,.3);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.tap-stem{
  grid-column:1;
  grid-row:3;
  width:14px;height:50px;border-radius:0 0 14px 14px;
  background:linear-gradient(to bottom,rgba(255,243,223,.88),rgba(180,150,108,.72));
  border:2px solid rgba(255,243,223,.78);margin-top:6px
}
.beer-info-card{
  margin-top:24px;
  background:linear-gradient(180deg,var(--cream-pale) 0%,var(--cream) 60%,#ecd2a9 100%);
  border:5px solid var(--brown-dark);
  border-radius:28px;
  box-shadow:6px 6px 0 rgba(43,20,13,.92);
  display:grid;grid-template-columns:180px  1fr;gap:26px;padding:34px 36px;align-items:center
}
.beer-illustration{
  display:flex;justify-content:center;align-items:center;min-height:196px;padding:14px;border-radius:20px;
  background:radial-gradient(circle at top,rgba(255,255,255,.16),transparent 38%),linear-gradient(180deg,rgba(223,208,183,.76),rgba(202,183,153,.66));
  border:2px solid rgba(95,72,52,.22)
}
.beer-glass{
  position:relative;width:82px;height:154px;border-radius:10px 10px 14px 14px;border:4px solid #f2ddad;
  background:linear-gradient(to right,rgba(255,255,255,.36),rgba(255,255,255,.88),rgba(255,255,255,.28));overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.44),0 0 0 3px rgba(43,20,13,.78),0 12px 22px rgba(0,0,0,.24)
}
.beer-glass-foam{
  position:absolute;inset:0 6px auto 6px;height:46px;border-radius:14px 14px 10px 10px;
  background:
    radial-gradient(circle at 18% 35%,#fff 0 8px,transparent 9px),
    radial-gradient(circle at 34% 22%,#fff 0 7px,transparent 8px),
    radial-gradient(circle at 50% 38%,#fff 0 9px,transparent 10px),
    radial-gradient(circle at 68% 24%,#fff 0 7px,transparent 8px),
    radial-gradient(circle at 82% 34%,#fff 0 8px,transparent 9px),
    linear-gradient(180deg,#f8f1e4 0%,#fcf5e9 42%,var(--foam-tint,#f4ead8) 100%);
  z-index:2;opacity:0;transition:opacity .3s ease;overflow:hidden
}
.beer-glass-foam:before,.beer-glass-foam:after{content:"";position:absolute;inset:0;opacity:0}
.beer-glass-foam.bubbles-enabled:before{background:radial-gradient(circle at 22% 70%,rgba(255,255,255,.88) 0 4px,transparent 5px),radial-gradient(circle at 63% 72%,rgba(255,255,255,.84) 0 4px,transparent 5px);animation:foamBubbles 3.8s linear infinite;opacity:1}
.beer-glass-foam.bubbles-enabled:after{background:radial-gradient(circle at 30% 85%,rgba(255,255,255,.72) 0 3px,transparent 4px),radial-gradient(circle at 74% 88%,rgba(255,255,255,.68) 0 3px,transparent 4px);animation:foamBubblesAlt 4.8s linear infinite;opacity:.92}
.beer-glass-fill{position:absolute;left:7px;right:7px;bottom:7px;height:38%;border-radius:12px 12px 10px 10px;transition:height .08s ease,background .35s ease;box-shadow:inset 0 10px 16px rgba(255,255,255,.12),inset 0 -8px 14px rgba(90,45,10,.18)}
@keyframes foamBubbles{0%{transform:translateY(8px);opacity:.35}50%{opacity:.9}100%{transform:translateY(-10px);opacity:.2}}
@keyframes foamBubblesAlt{0%{transform:translateY(10px);opacity:.2}50%{opacity:.7}100%{transform:translateY(-12px);opacity:.15}}
.glass-highlight{position:absolute;left:12px;top:22px;width:10px;height:104px;border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,.42),rgba(255,255,255,.2));z-index:3}
.beer-copy h2{
  font-family:'Cormorant Garamond',serif;color:var(--brown-dark);background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));display:inline-block;
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;margin:0 0 10px;padding:10px 18px;border:3px solid var(--brown-dark);border-radius:18px;box-shadow:3px 4px 0 rgba(43,20,13,.75)
}
.beer-meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
#beer-style{color:var(--orange-deep);font-family:'Cormorant Garamond',serif;font-size:1.55rem;margin:0}
.abv-pill{display:inline-flex;align-items:center;background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));color:var(--brown-dark);padding:7px 14px;border-radius:999px;border:2px solid var(--brown-dark);font-weight:700;font-size:.92rem}
.beer-description{font-family:'Cormorant Garamond',serif;font-size:1.5rem;max-width:680px;line-height:1.28;margin:0 0 18px;color:var(--brown-soft)}
.beer-price{color:var(--orange-deep);font-weight:800;font-size:1.05rem}
.controls{display:flex;justify-content:center;margin-top:18px}

/* Other drinks carousel. */
.drinks-carousel-section{
  position:relative;
  z-index:4;
  padding:128px 0 78px;
  background:
    var(--hand-yellow),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:6% 74%, center;
  background-repeat:no-repeat, no-repeat;
  background-size:clamp(150px,18vw,245px) auto, auto;
}
.drinks-carousel-section:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:18px;
  height:54px;
  background:
    repeating-linear-gradient(90deg,rgba(var(--bg-orange-rgb),.9) 0 22px,rgba(var(--bg-orange-rgb),.9) 22px 46px,transparent 46px,transparent 60px);
  border-radius:999px;
  opacity:.75;
  pointer-events:none;
}
.drinks-carousel-section:after{
  content:"Drinks";
  position:absolute;
  top:86px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  color:rgba(43,20,13,.82);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(3rem,8vw,5.4rem);
  font-style:italic;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}
.drinks-blotch-left{
  left:clamp(8px,4vw,56px);
  top:34%;
  rotate:-18deg;
}
.drinks-blotch-right{
  right:clamp(4px,5vw,70px);
  bottom:14%;
  rotate:22deg;
  scale:.82;
  opacity:.62;
}
.drinks-carousel-section .section-blotch:after,
.food-menu-section .section-blotch:after,
.staff-section .section-blotch:after{
  content:"";
  position:absolute;
  width:68px;
  height:9px;
  border-radius:999px;
  background:rgba(255,210,31,.48);
  transform:translate(86px,58px) rotate(-18deg);
}
.drinks-carousel-shell{
  position:relative;
  z-index:1;
  width:min(1100px,calc(100% - 28px));
  margin:58px auto 0;
  padding:30px clamp(18px,4vw,34px) 34px;
  border:4px solid var(--brown-dark);
  border-radius:28px;
  background:linear-gradient(180deg,var(--cream-pale),var(--cream));
  box-shadow:6px 6px 0 rgba(43,20,13,.92),0 16px 30px rgba(43,20,13,.18);
}
.drinks-carousel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.drinks-carousel-header h2{
  margin:0;
  color:var(--brown-dark);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2rem,5vw,3.4rem);
  font-style:italic;
  line-height:1;
}
.drinks-carousel-controls{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}
.carousel-arrow{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:3px solid var(--brown-dark);
  border-radius:50%;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));
  color:var(--brown-dark);
  cursor:pointer;
  font:inherit;
  font-size:2rem;
  font-weight:900;
  line-height:1;
  box-shadow:3px 3px 0 rgba(43,20,13,.85);
  transition:transform .16s ease,box-shadow .16s ease;
}
.carousel-arrow:hover,
.carousel-arrow:focus-visible{
  transform:translateY(2px);
  box-shadow:1px 1px 0 rgba(43,20,13,.85);
  outline:none;
}
.drinks-carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px,30%);
  gap:18px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:4px;
  padding:4px 4px 14px;
  cursor:grab;
  user-select:none;
  scrollbar-width:none;
}
.drinks-carousel::-webkit-scrollbar{display:none}
.drinks-carousel.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}
.drink-card{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:26px 20px;
  border:3px solid var(--brown-dark);
  border-radius:22px;
  background:linear-gradient(180deg,#fff8ec,var(--cream));
  box-shadow:5px 5px 0 rgba(43,20,13,.86);
  scroll-snap-align:center;
  text-align:center;
}
.drink-card h3{
  margin:0;
  color:var(--orange-deep);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2rem;
  font-style:italic;
  line-height:1;
}
.drink-card p{
  max-width:230px;
  margin:0;
  color:var(--brown-soft);
  font-size:.95rem;
  font-weight:800;
  line-height:1.45;
}
.drink-icon{
  position:relative;
  width:92px;
  height:112px;
  display:grid;
  place-items:center;
}
.wine-icon:before{
  content:"";
  width:48px;
  height:68px;
  border:5px solid var(--brown-dark);
  border-radius:10px 10px 28px 28px;
  background:linear-gradient(180deg,#fff8ec 0 42%,#8c1f36 43% 100%);
  box-shadow:0 0 0 4px rgba(255,210,31,.26);
}
.wine-icon:after{
  content:"";
  position:absolute;
  bottom:3px;
  width:44px;
  height:38px;
  border-bottom:5px solid var(--brown-dark);
  border-left:5px solid var(--brown-dark);
  border-right:5px solid var(--brown-dark);
}
.bottle-icon:before{
  content:"";
  width:42px;
  height:104px;
  border:5px solid var(--brown-dark);
  border-radius:18px 18px 10px 10px;
  background:linear-gradient(180deg,#3e6b3a 0 35%,#fff3df 36% 60%,#3e6b3a 61% 100%);
  box-shadow:8px 8px 0 rgba(43,20,13,.14);
}
.soft-icon:before{
  content:"";
  width:58px;
  height:88px;
  border:5px solid var(--brown-dark);
  border-radius:12px;
  background:linear-gradient(180deg,#ff7a00 0 22%,#ffd21f 23% 62%,#ff7a00 63% 100%);
  box-shadow:8px 8px 0 rgba(43,20,13,.14);
}
.spirit-icon:before{
  content:"";
  width:70px;
  height:70px;
  border:5px solid var(--brown-dark);
  border-radius:16px 16px 26px 26px;
  background:linear-gradient(180deg,#fff8ec 0 45%,#d94a00 46% 100%);
  box-shadow:8px 8px 0 rgba(43,20,13,.14);
}

/* Food menu placeholder. */
.food-menu-section{
  position:relative;
  z-index:4;
  padding:84px 0 92px;
  background:
    var(--hand-orange),
    radial-gradient(circle at 10% 26%,rgba(255,243,223,.18) 0 8%,transparent 9%),
    radial-gradient(circle at 90% 72%,rgba(var(--bg-yellow-rgb),.22) 0 7%,transparent 8%),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:92% 28%, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:clamp(145px,17vw,230px) auto, auto, auto, auto;
}
.food-menu-section:before{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  top:-1px;
  height:92px;
  background:var(--bg-orange);
  clip-path:polygon(0 0,100% 0,100% 48%,88% 42%,75% 56%,60% 45%,47% 58%,32% 43%,16% 55%,0 46%);
  pointer-events:none;
}
.food-menu-section:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-1px;
  height:116px;
  background:var(--bg-orange);
  clip-path:polygon(0 54%,12% 43%,25% 57%,39% 45%,52% 58%,66% 44%,82% 55%,100% 42%,100% 100%,0 100%);
  pointer-events:none;
  z-index:0;
}
.food-blotch-left{
  left:clamp(4px,5vw,72px);
  top:24%;
  rotate:18deg;
  scale:.92;
}
.food-blotch-right{
  right:clamp(4px,5vw,78px);
  top:46%;
  rotate:-24deg;
  opacity:.64;
}
.food-menu-box{
  position:relative;
  isolation:isolate;
  width:min(1100px,calc(100% - 28px));
  margin:0 auto;
  min-height:260px;
  display:grid;
  place-items:center;
  gap:22px;
  padding:42px 18px 48px;
  border:5px solid var(--brown-dark);
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,243,223,.98),rgba(243,226,199,.98)),
    repeating-linear-gradient(90deg,transparent 0 26px,rgba(59,31,20,.035) 26px 28px);
  box-shadow:0 14px 34px rgba(43,20,13,.22);
  text-align:center;
  overflow:hidden;
}
.food-menu-box h2{
  position:relative;
  z-index:2;
  margin:0;
  color:var(--brown-dark);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2.5rem,7vw,5rem);
  font-style:italic;
  line-height:1;
  text-shadow:3px 3px 0 rgba(255,210,31,.85);
}
.floating-food{
  position:absolute;
  z-index:1;
  width:clamp(92px,16vw,170px);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(7px 8px 0 rgba(43,20,13,.2));
}
.floating-food-combo{
  left:clamp(12px,5vw,76px);
  top:118px;
  width:clamp(178px,29vw,330px);
  rotate:-7deg;
  mix-blend-mode:multiply;
  opacity:.94;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.72) 72%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 58%,rgba(0,0,0,.72) 72%,transparent 100%);
  animation:foodImageFloat 4.8s ease-in-out infinite;
}
.coming-soon-badge{
  position:relative;
  z-index:2;
  width:clamp(130px,22vw,190px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:16px;
  border:4px solid var(--brown-dark);
  border-radius:50%;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));
  color:var(--brown-dark);
  font-size:clamp(1rem,2.4vw,1.45rem);
  font-weight:900;
  text-transform:uppercase;
  box-shadow:6px 6px 0 rgba(43,20,13,.9),0 0 24px rgba(255,210,31,.35);
  animation:foodBadgeFloat 3s ease-in-out infinite;
}
@keyframes foodBadgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes foodImageFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(4deg)}
}
@keyframes foodImageFloatAlt{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-12px) rotate(-5deg)}
}

/* Staff flip cards. */
.staff-section{
  min-height:auto;
  padding-top:44px;
  color:#3b1f14;
  overflow:hidden;
  background:
    var(--hand-red),
    var(--hand-orange),
    var(--hand-yellow),
    radial-gradient(circle at 12% 30%,rgba(255,243,223,.16) 0 7%,transparent 8%),
    radial-gradient(circle at 88% 62%,rgba(255,243,223,.18) 0 8%,transparent 9%),
    radial-gradient(circle at 45% 88%,rgba(var(--bg-yellow-rgb),.22) 0 10%,transparent 11%),
    linear-gradient(180deg,var(--bg-orange) 0%,var(--bg-yellow) 52%,var(--bg-orange) 100%);
  background-position:0 18px, 96% 88px, 48% 42%, center, center, center, center;
  background-repeat:repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:420px 300px, 360px 260px, 500px 360px, auto, auto, auto, auto;
}

.staff-section:before{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  top:-1px;
  height:112px;
  background:var(--bg-orange);
  clip-path:polygon(0 0,100% 0,100% 46%,88% 58%,74% 45%,60% 57%,45% 42%,30% 56%,14% 44%,0 54%);
  pointer-events:none;
  z-index:1;
}

.staff-section:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  height:58px;
  background:
    repeating-linear-gradient(90deg,rgba(var(--bg-orange-rgb),.72) 0 24px,rgba(var(--bg-orange-rgb),.72) 24px 48px,rgba(var(--bg-yellow-rgb),.5) 48px 62px,rgba(var(--bg-yellow-rgb),.5) 62px 76px);
  opacity:.5;
  pointer-events:none;
}

.staff-blotch-left{
  left:clamp(0px,4vw,54px);
  top:18%;
  rotate:-16deg;
  opacity:.68;
}

.staff-blotch-right{
  right:clamp(0px,5vw,70px);
  top:46%;
  rotate:20deg;
  scale:.9;
  opacity:.62;
}

.staff-title-wrap{margin-bottom:20px}

.staff-text{
  max-width:620px;
  margin:0 auto 35px auto;
  font-size:.88rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cream-soft);
  font-weight:800;
}

.staff-cards{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  max-width:1200px;
  margin:auto;
}

/* Fixed flip-card setup for desktop + mobile Safari/Chrome */
.staff-card{
  width:270px;
  height:380px;
  position:relative;
  cursor:pointer;
  perspective:1000px;
  -webkit-perspective:1000px;
  outline:none;
  transform:translateZ(0);
}

.staff-card-box{
  width:100%;
  height:100%;
  position:relative;
  transition:transform .6s;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

.staff-card.flipped .staff-card-box{
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
}

.staff-card-face{
  width:100%;
  height:100%;
  background:var(--cream);
  border:3px solid var(--brown-dark);
  border-radius:25px;
  position:absolute;
  top:0;
  left:0;
  padding:20px;
  box-sizing:border-box;
  box-shadow:6px 6px 0 var(--brown-dark);
  overflow:hidden;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

.staff-front{
  z-index:2;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
}

.staff-back{
  z-index:1;
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--brown-dark);
  color:var(--yellow);
}

.staff-card.flipped .staff-front{
  z-index:1;
  pointer-events:none;
}

.staff-card.flipped .staff-back{
  z-index:3;
}

.staff-name{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;
  color:var(--orange);
  margin:8px 0 5px 0;
  font-weight:800;
  line-height:1;
}

.staff-job{
  font-size:11px;
  color:var(--orange-deep);
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:800;
  margin:0;
}

.staff-back .staff-job{color:var(--yellow)}

.staff-likes{
  font-size:14px;
  margin:18px 0 0;
  font-weight:800;
  line-height:1.5;
}

.staff-bio{
  font-size:14px;
  line-height:1.7;
  margin-top:15px;
  margin-bottom:20px;
}

.funfact-box{
  background:var(--yellow);
  border:2px solid var(--brown-dark);
  border-radius:12px;
  padding:12px;
  margin-top:20px;
  color:var(--brown-dark);
}

.funfact-box h4{
  margin:0 0 8px 0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.funfact-box p{
  margin:0;
  font-size:13px;
  font-style:italic;
  line-height:1.5;
}

.staff-card:active{transform:scale(.98)}

.staff-card:hover .staff-card-face,
.staff-card:focus-visible .staff-card-face{
  box-shadow:6px 6px 0 var(--brown-dark),0 0 0 4px rgba(255,210,31,.42);
}

/* Staff images */
.Staff-Image{
  z-index:2;
  width:200px;
  height:200px;
  display:block;
  flex:0 0 auto;
  margin:0 auto 10px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  transform:translateZ(1px);
  -webkit-transform:translateZ(1px);
}

.Profile-Picture{
  display:block;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

/* Visit cards and embedded map. */
.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:30px}
.info-card{
  border-radius:28px;padding:26px 26px 28px;
  background:linear-gradient(180deg,var(--cream-pale),var(--cream));
  border:3px solid var(--brown-dark);
  box-shadow:6px 6px 0 rgba(43,20,13,.92),0 12px 28px rgba(34,16,6,.18)
}
.contact-card{display:flex;flex-direction:column;justify-content:center;gap:32px}
.card-title{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}
.card-title h2,.contact-block h2,.map-panel-header h3{font-family:'Cormorant Garamond',serif;font-weight:700}
.card-title h2{color:var(--orange-deep);font-size:2.4rem;margin:0}
.contact-block h2{color:var(--brown-dark);font-size:2.2rem;margin:0 0 6px}
.icon-badge{
  width:46px;height:46px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:1.3rem;
  border:2px solid var(--brown-dark);box-shadow:0 4px 10px rgba(60,28,12,.08)
}
.icon-badge.olive,.icon-badge.coral{margin:0 auto 12px}
.hours-list{display:flex;flex-direction:column}
.hours-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid rgba(128,96,66,.24)}
.hours-row:last-child{border-bottom:none}
.hours-row span{font-size:1.05rem;font-weight:700;color:var(--brown-soft)}
.hours-row strong{font-size:1.05rem;font-weight:800;color:var(--orange-deep);text-align:right}
.contact-block{text-align:center}
.contact-block p{font-size:1.05rem;line-height:1.5;color:var(--brown);margin:0}
.social-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border:2px solid var(--brown-dark);
  border-radius:999px;
  background:var(--yellow);
  color:var(--brown-dark);
  font-size:.9rem;
  font-weight:900;
  text-decoration:none;
  box-shadow:3px 3px 0 rgba(43,20,13,.78);
  transition:transform .16s ease,box-shadow .16s ease
}
.social-links a:hover,
.social-links a:focus-visible{
  transform:translateY(2px);
  box-shadow:1px 1px 0 rgba(43,20,13,.78);
  outline:none
}
.map-panel{
  background:linear-gradient(180deg,var(--cream-pale),var(--cream));
  border-radius:28px;padding:16px;border:3px solid var(--brown-dark);
  box-shadow:6px 6px 0 rgba(43,20,13,.92),0 12px 28px rgba(34,16,6,.18)
}
.map-panel-header{text-align:center;padding:8px 10px 16px}
.map-panel-header h3{font-size:2rem;color:var(--orange-deep);margin:0 0 4px}
.map-panel-header p{color:var(--brown-soft);font-size:.95rem;margin:0}
.map-frame{overflow:hidden;border-radius:20px;border:2px solid rgba(111,79,47,.2);min-height:340px;background:#e8dcc4}
.map-frame iframe{display:block;width:100%;height:340px;border:0}
.directions-button{display:flex;width:fit-content;margin:18px auto 4px}

.Staff-Image {
  z-index: 2;
  width: 200px;
  height: 200px;
  display: block;
  flex: 0 0 auto;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.Profile-Picture {
  display: block;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Responsive adjustments. */
/* Responsive adjustments. */
@media(max-width:900px){
  .tap-row{
    gap:12px;
  }

  .tap-unit{
    min-width:124px;
  }

  .tap-handle{
    width:50px;
    min-height:114px;
  }

  .beer-info-card{
    grid-template-columns:1fr;
    text-align:center;
  }

  .beer-meta{
    justify-content:center;
  }

  .drinks-carousel{
    grid-auto-columns:minmax(230px,48%);
  }
}

@media(max-width:820px){
  .info-cards{
    grid-template-columns:1fr;
  }
}

/* Tablet and phone layout */
@media(max-width:760px){
  .site-section{
    padding:52px 0;
  }

  .hero-section{
    min-height:88vh;
    padding-top:72px;
  }

  .hero-page-shell{
    padding:28px 14px 38px;
  }

  .hero-sparkle{
    display:none;
  }

  .hero-actions{
    gap:12px;
  }

  .hero-button{
    width:min(100%,280px);
  }

  /* Events section mobile fix */
  .events-section{
    overflow-x:hidden;
    overflow-y:visible;
  }

  .events-page-shell{
    width:100%;
    max-width:100%;
    padding:0 14px;
    overflow-x:hidden;
    overflow-y:visible;
  }

  .events-panel{
    width:100%;
    max-width:100%;
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    padding:28px 0 52px;
    overflow-x:hidden;
    overflow-y:visible;
    justify-items:center;
  }

  .events-title{
    grid-column:auto;
    justify-self:center;
    width:100%;
    max-width:100%;
    font-size:clamp(2.7rem,13vw,4rem);
    text-align:center;
    line-height:.92;
    margin-bottom:8px;
  }

  .events-copy{
    width:100%;
    max-width:420px;
    justify-self:center;
    padding-top:0;
    overflow:visible;
  }

  .event-list{
    width:100%;
    max-width:100%;
    gap:18px;
  }

  .event-item{
    width:100%;
    max-width:100%;
    min-height:72px;
    padding:14px 18px 14px 64px;
    border-radius:28px;
    box-shadow:5px 5px 0 rgba(43,20,13,.4);
    overflow:hidden;
  }

  .event-icon{
    left:16px;
    width:32px;
    height:32px;
  }

  .event-item strong{
    font-size:1.35rem;
    line-height:1.05;
  }

  .event-item small{
    font-size:.78rem;
    line-height:1.35;
  }

  .book-button{
    width:100%;
    max-width:320px;
    margin:0 auto;
    display:flex;
  }

  .event-slider{
    width:100%;
    max-width:340px;
    height:360px;
    justify-self:center;
    rotate:0deg;
    border-width:10px;
    padding:8px;
    overflow:hidden;
  }

  .slider-track{
    width:100%;
    height:100%;
    position:relative;
  }

  .slide{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .slider-btn{
    z-index:5;
  }

  .booking-box{
    padding:26px 20px;
  }

  /* Beer tap mobile fix */
  .taps-page-shell{
    width:min(100% - 18px,1100px);
  }

  .tap-board{
    padding:76px 8px 42px;
    overflow:hidden;
    border-width:8px;
    border-radius:14px;
  }

  .tap-board:before{
    left:50%;
    top:14px;
    width:calc(100% - 28px);
    max-width:calc(100% - 28px);
    font-size:clamp(1.05rem,5.4vw,1.45rem);
    font-weight:900;
    white-space:normal;
    text-shadow:0 0 1px rgba(255,255,255,.9),2px 2px 0 rgba(0,0,0,.36);
    transform:translateX(-50%);
  }

  .tap-board:after{
    left:14px;
    right:14px;
    top:48px;
  }

  .tap-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(125px,1fr));
    justify-items:center;
    justify-content:center;
    align-items:end;
    gap:30px 14px;
    width:100%;
    padding:18px 8px 10px;
    overflow:visible;
  }

  .tap-unit{
    width:100%;
    min-width:125px;
    max-width:150px;
    min-height:210px;
    justify-self:center;
    grid-template-rows:50px auto auto;
  }

  .tap-handle{
    width:58px;
    min-height:124px;
  }

  .tap-label-name{
    top:0;
    width:118px;
    font-size:1.42rem;
  }

  .tap-label-style{
    top:30px;
    width:118px;
    font-size:.76rem;
  }

  .tap-stem{
    height:42px;
  }

  .beer-info-card{
    margin-top:18px;
    grid-template-columns:1fr;
    gap:14px;
    padding:18px;
    border-width:3px;
    border-radius:22px;
    text-align:center;
  }

  .beer-illustration{
    width:min(100%,150px);
    justify-self:center;
    min-height:132px;
    padding:10px;
    border-radius:16px;
  }

  .beer-glass{
    width:58px;
    height:112px;
    border-width:3px;
  }

  .beer-glass-foam{
    height:34px;
    inset:0 5px auto;
  }

  .beer-copy h2{
    font-size:clamp(1.9rem,9vw,2.7rem);
    padding:8px 12px;
    border-width:2px;
    border-radius:14px;
    line-height:1.1;
  }

  .beer-meta{
    gap:8px;
    margin-bottom:10px;
    justify-content:center;
  }

  #beer-style{
    font-size:1.35rem;
  }

  .abv-pill{
    padding:6px 11px;
    font-size:.9rem;
  }

  .beer-description{
    font-size:1.38rem;
    line-height:1.24;
  }

  .beer-price{
    font-size:1.05rem;
  }

  /* Drinks mobile */
  .drinks-carousel-shell{
    width:min(100% - 18px,1100px);
  }

  .drinks-carousel-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .drinks-carousel{
    grid-auto-columns:minmax(238px,86%);
  }

  /* Food mobile */
  .taps-hero-title span,
  .visit-hero-title span{
    padding:10px 18px;
    text-align:center;
    font-size:1.45rem;
  }

  .food-menu-box{
    min-height:300px;
    padding:36px 14px 42px;
  }

  .floating-food{
    width:96px;
    opacity:.88;
  }

  .floating-food-combo{
    left:4px;
    top:108px;
    width:150px;
  }

  /* Visit mobile */
  .visit-page-shell{
    width:min(100% - 18px,1100px);
  }

  .info-card{
    padding:20px 18px;
    border-radius:22px;
  }

  .hours-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .hours-row strong{
    text-align:left;
  }

  .map-frame,
  .map-frame iframe{
    min-height:280px;
    height:280px;
  }

  /* Staff mobile: force two cards per row */
  .staff-section{
    padding:52px 0;
    background-position:-44px 18px,132px 130px,-18px 260px,center,center,center,center;
    background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-size:260px auto,230px auto,320px auto,auto,auto,auto,auto;
  }

  .staff-page-shell{
    width:min(100% - 20px,1200px);
  }

  .staff-title{
    font-size:28px;
    padding:10px 20px;
  }

  .staff-text{
    font-size:12px;
    letter-spacing:1px;
    margin-bottom:20px;
  }

  .staff-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100%;
    max-width:720px;
    margin:0 auto;
    padding:0 4px;
  }

  .staff-card{
    width:100% !important;
    max-width:none !important;
    height:360px;
    perspective:1000px;
    -webkit-perspective:1000px;
  }

  .staff-card-box{
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
  }

  .staff-card-face{
    padding:12px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
  }

  .staff-front{
    transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
  }

  .staff-back{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    justify-content:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .staff-card.flipped .staff-front{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }

  .staff-card.flipped .staff-back{
    visibility:visible;
    opacity:1;
  }

  .Staff-Image{
    width:110px;
    height:110px;
    margin:0 auto 10px;
  }

  .staff-name{
    font-size:26px;
  }

  .staff-job{
    font-size:9px;
  }

  .staff-likes{
    font-size:11px;
    line-height:1.35;
    margin-top:10px;
  }

  .staff-bio{
    font-size:11px;
    line-height:1.35;
    margin-top:12px;
    margin-bottom:12px;
  }

  .funfact-box{
    padding:10px;
    margin-top:10px;
  }

  .funfact-box h4{
    font-size:10px;
  }

  .funfact-box p{
    font-size:11px;
    line-height:1.3;
  }
}

/* Small phones */
@media(max-width:430px){
  .events-page-shell{
    padding:0 10px;
  }

  .events-title{
    font-size:clamp(2.4rem,15vw,3.3rem);
  }

  .events-copy{
    max-width:100%;
  }

  .event-item{
    padding:13px 14px 13px 58px;
    border-radius:24px;
  }

  .event-icon{
    left:14px;
    width:30px;
    height:30px;
  }

  .event-item strong{
    font-size:1.2rem;
  }

  .event-item small{
    font-size:.74rem;
  }

  .event-slider{
    max-width:100%;
    height:330px;
    border-width:8px;
  }

  .tap-row{
    grid-template-columns:repeat(2,minmax(120px,1fr));
    gap:28px 10px;
    padding-inline:6px;
  }

  .tap-unit{
    min-width:120px;
    max-width:142px;
  }

  .tap-handle{
    width:62px;
    min-height:132px;
  }

  .tap-label-name{
    width:112px;
    font-size:1.42rem;
  }

  .tap-label-style{
    width:112px;
    font-size:.74rem;
  }

  .staff-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100%;
    padding:0;
  }

  .staff-card{
    width:100% !important;
    max-width:none !important;
    height:350px;
  }

  .Staff-Image{
    width:100px;
    height:100px;
  }

  .staff-name{
    font-size:24px;
  }

  .staff-bio,
  .staff-likes,
  .funfact-box p{
    font-size:10.5px;
  }
}

/* HARD FIX: remove nested page scrollbars */
html,
body{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:100% !important;
  margin:0 !important;
  overflow-x:hidden !important;
}

html{
  overflow-y:auto !important;
}

body{
  overflow-y:auto !important;
}

/* React / app wrappers must NOT become their own scroll areas */
#root,
.App,
main,
.site-section,
.hero-section,
.events-section,
.taps-section,
.drinks-carousel-section,
.food-menu-section,
.staff-section,
.visit-section{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow-y:visible !important;
  overflow-x:clip !important;
}

/* Keep full-screen section height without making each section scroll */
.hero-section{
  min-height:100vh !important;
}

.site-section{
  min-height:auto !important;
}

/* Only these are allowed to scroll horizontally */
.polaroid-strip,
.drinks-carousel{
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

/* Prevent hidden scrollbars appearing from decorative/slider/card wrappers */
.paint-blotches,
.events-panel,
.event-slider,
.slider-track,
.tap-board,
.food-menu-box,
.staff-card,
.staff-card-face,
.map-frame{
  overflow-y:hidden !important;
}