/* An illustrated, responsive tasting room for Akan's six pours. */
#brews .section-heading { margin-bottom: 42px; }
#brews .beer-mobile-controls { display:none; }
#brews .beer-lineup-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
#brews .beer-lineup-toolbar > p { font-size:18px; color:var(--cream); }
#brews .beer-stepper { display:flex; align-items:center; gap:14px; flex-shrink:0; }
#brews .beer-stepper button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #e8e0d04d; background:transparent; border-radius:50%; font-size:25px; line-height:1; transition:background .2s,transform .2s; }
#brews .beer-stepper button:hover { background:#e8e0d018; transform:translateY(-2px); }
#brews .beer-step-count { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; min-width:48px; text-align:center; }
#brews .beer-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; border:0; margin:0 0 32px; padding:4px 2px 10px; }
#brews .beer-tabs button { display:flex; flex-direction:column; align-items:flex-start; gap:13px; min-width:0; text-align:left; padding:16px; border:1px solid #e8e0d02b; border-radius:4px; background:#e8e0d005; color:var(--cream); transition:background .25s,border-color .25s,transform .25s; }
#brews .beer-tabs button::after { display:none; }
#brews .beer-tabs button img { width:56px; height:56px; padding:3px; border-radius:50%; background:var(--paper); transition:transform .35s; }
#brews .beer-tabs button[aria-selected=true] { background:var(--paper); color:var(--ink); border-color:var(--paper); }
#brews .beer-tabs button[aria-selected=true] img { transform:rotate(-7deg) scale(1.08); }
#brews .beer-tabs button:hover { border-color:var(--copper); transform:translateY(-3px); }
#brews .beer-tab-copy { display:flex; flex-direction:column; gap:6px; }
#brews .beer-tab-copy strong { font-size:16px; line-height:1.3; font-weight:500; }
#brews .beer-tab-copy > span { font-size:13px; line-height:1.4; color:var(--muted); }
#brews .beer-tabs button[aria-selected=true] .beer-tab-copy > span { color:#69594b; }
#brews .brews-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,76px); align-items:center; }
#brews .beer-visual { min-height:0; aspect-ratio:auto; background:#f2e7ce; color:#24231d; border:1px solid #c9b590; overflow:hidden; }
#brews .beer-art { padding:32px 28px 26px; position:relative; min-height:615px; isolation:isolate; }
#brews .beer-art::before { content:''; position:absolute; inset:12px; border:1px solid #4d422b59; z-index:-1; pointer-events:none; }
#brews .beer-art::after { content:''; position:absolute; inset:0; z-index:-2; opacity:.24; pointer-events:none; background-image:radial-gradient(#6b583b55 .6px,transparent .6px); background-size:5px 5px; }
#brews .beer-art-heading { text-align:center; min-height:106px; color:var(--beer-accent); }
#brews .beer-art-heading > span { display:block; font-size:14px; line-height:1.5; letter-spacing:.15em; text-transform:uppercase; margin-bottom:12px; }
#brews .beer-art-heading h3 { font-family:var(--brand-serif); font-size:clamp(27px,2.75vw,42px); line-height:1.12; letter-spacing:-.045em; text-transform:uppercase; font-weight:600; max-width:450px; margin:auto; text-wrap:balance; }
#brews .beer-art-scene { height:355px; position:relative; }
#brews .beer-halo { position:absolute; width:88%; max-width:365px; aspect-ratio:1; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--beer-accent); opacity:.13; }
#brews .beer-halo::after { content:''; position:absolute; inset:12px; border:1px dashed var(--beer-accent); border-radius:50%; }
#brews .beer-illustration { width:76%; max-width:345px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#brews .beer-artwork { width:100%; height:auto; filter:drop-shadow(0 12px 12px #40291618); transform-origin:center 75%; }
#brews .art-note { display:flex; align-items:center; gap:7px; position:absolute; padding:7px 11px; background:#fbf1dc; color:var(--beer-accent); border:1px solid #b8a78880; box-shadow:0 4px 10px #58431e0c; border-radius:3px; font-size:15px; font-weight:500; line-height:1.4; }
#brews .art-note svg,#brews .taste-card svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#brews .art-note-1 { left:0; top:24px; transform:rotate(-7deg); --label-angle:-7deg; }
#brews .art-note-2 { right:0; top:65px; transform:rotate(6deg); --label-angle:6deg; }
#brews .art-note-3 { right:12px; bottom:8px; transform:rotate(-4deg); --label-angle:-4deg; }
#brews .art-spark { position:absolute; color:var(--beer-accent); font-size:35px; line-height:1; }
#brews .art-spark-one { left:7%; bottom:35px; }
#brews .art-spark-two { right:9%; top:9px; font-size:25px; }
#brews .art-bubble { position:absolute; width:9px; height:9px; border:1px solid var(--beer-accent); border-radius:50%; opacity:.35; }
#brews .bubble-one { left:13%; top:45%; }
#brews .bubble-two { right:10%; top:60%; width:6px; height:6px; }
#brews .bubble-three { left:27%; top:8%; width:5px; height:5px; }
#brews .beer-art-tagline { font:italic 30px/1.2 var(--serif); text-align:center; margin:20px 0 16px; border-top:1px solid #56452b4d; padding-top:18px; }
#brews .beer-art-signature { display:block; text-align:center; font-size:13px; letter-spacing:.12em; line-height:1.6; }
#brews .beer-discovery { display:block; padding:10px 0; }
#brews .beer-panel { min-height:0; padding:0; }
#brews .beer-panel-kicker { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
#brews .beer-number { margin:0; font-size:23px; white-space:nowrap; }
#brews .beer-number > span { font-size:14px; margin-left:6px; }
#brews .beer-category { display:block; padding:0; min-height:0; font-size:14px; line-height:1.5; letter-spacing:.12em; }
#brews .beer-panel h3 { font-size:clamp(32px,3.2vw,48px); line-height:1.15; margin:0 0 22px; text-wrap:balance; }
#brews .beer-description { min-height:0; font-size:18px; line-height:1.75; }
#brews .taste-heading { font-size:13px; letter-spacing:.13em; color:var(--copper); margin:30px 0 14px; }
#brews .tasting-notes { display:grid; grid-template-columns:1fr; gap:0; margin:0 0 26px; letter-spacing:0; }
#brews .taste-card { display:flex; align-items:center; gap:18px; padding:14px 0; border-bottom:1px solid #e8e0d020; color:var(--cream); transition:padding-left .25s; }
#brews .taste-card:first-child { border-top:1px solid #e8e0d020; }
#brews .taste-card > svg { width:33px; height:33px; color:var(--copper); }
#brews .taste-card > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; }
#brews .taste-card strong { font-weight:500; font-size:20px; line-height:1.5; }
#brews .taste-card span { display:block; font-size:16px; line-height:1.5; color:var(--muted); }
#brews .taste-card span::before { content:none; }
#brews .beer-prices { padding-top:0; border:0; gap:12px; }
#brews .beer-prices span { font-size:14px; }
#brews .beer-prices strong { font-size:26px; }
#brews .beer-discovery > .text-link { margin-top:24px; }
#brews .brews-note { margin-top:28px; }
@media (hover:hover) {
  #brews .taste-card:hover { padding-left:8px; }
  .beer-motion #brews .taste-card:hover svg { animation:taste-sketch .6s ease both; }
  .beer-motion #brews .beer-visual:hover .beer-artwork { animation:character-nod .8s ease both; }
}
.beer-motion #brews .beer-art:not([hidden]) { animation:poster-arrive .45s ease both; }
.beer-motion #brews .beer-art:not([hidden]) .beer-artwork { animation:character-pop .65s cubic-bezier(.18,.7,.3,1.1) both; }
.beer-motion #brews .beer-visual.is-in-view .beer-illustration { animation:character-float 5s ease-in-out infinite; }
.beer-motion #brews .beer-visual.is-in-view .art-bubble { animation:art-fizz 4s ease-in-out infinite; }
.beer-motion #brews .beer-visual.is-in-view .bubble-two { animation-delay:-1.4s; }
.beer-motion #brews .beer-visual.is-in-view .bubble-three { animation-delay:-2.7s; }
.beer-motion #brews .beer-art:not([hidden]) .art-note { animation:note-arrive .55s .18s both; }
.beer-motion #brews .beer-art:not([hidden]) .art-note-2 { animation-delay:.27s; }
.beer-motion #brews .beer-art:not([hidden]) .art-note-3 { animation-delay:.36s; }
.beer-motion #brews .beer-panel:not([hidden]) .taste-card { animation:taste-arrive .45s calc(100ms + var(--note-delay)) both; }
.beer-motion #brews .beer-panel:not([hidden]) .tasting-notes { animation:none; }
@keyframes poster-arrive { from{opacity:0}to{opacity:1} }
@keyframes character-pop { from{opacity:0;transform:scale(.86) rotate(-9deg)}to{opacity:1;transform:none} }
@keyframes character-float { 0%,100%{transform:translate(-50%,-50%) rotate(-1deg)}50%{transform:translate(-50%,calc(-50% - 7px)) rotate(1deg)} }
@keyframes art-fizz { 0%,100%{opacity:.15;transform:translateY(4px)}50%{opacity:.5;transform:translateY(-10px)} }
@keyframes note-arrive { from{opacity:0;transform:translateY(10px) rotate(0)}to{opacity:1;transform:rotate(var(--label-angle))} }
@keyframes taste-arrive { from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none} }
@keyframes taste-sketch { 30%{transform:rotate(-12deg)}65%{transform:rotate(8deg)}100%{transform:none} }
@keyframes character-nod { 35%{transform:rotate(-4deg) scale(1.03)}70%{transform:rotate(2deg)}100%{transform:none} }
@media(max-width:1100px) {
  #brews .beer-tabs button { padding:13px 10px; }
  #brews .beer-art { padding:30px 22px 25px; min-height:590px; }
  #brews .beer-art-scene { height:330px; }
  #brews .beer-art-tagline { font-size:28px; }
  #brews .taste-card > div { display:block; }
}
@media(max-width:900px) {
  #brews .beer-tabs { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#d9936b66 transparent; overscroll-behavior-x:contain; }
  #brews .beer-tabs button { flex:0 0 164px; scroll-snap-align:start; padding:15px; }
  #brews .brews-grid { grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:28px; align-items:start; }
  #brews .beer-art { min-height:0; padding:30px 20px 26px; }
  #brews .beer-art-heading { min-height:100px; }
  #brews .beer-art-heading h3 { font-size:29px; }
  #brews .beer-art-scene { height:285px; }
  #brews .beer-illustration { width:90%; }
  #brews .art-note { font-size:13px; padding:6px 8px; gap:5px; }
  #brews .art-note svg { width:19px; height:19px; }
  #brews .art-note-1 { top:6px; }
  #brews .art-note-2 { top:60px; }
  #brews .art-note-3 { right:0; bottom:0; }
  #brews .beer-art-tagline { font-size:25px; }
  #brews .beer-art-signature { font-size:13px; letter-spacing:.06em; }
  #brews .beer-panel-kicker { gap:12px; }
  #brews .beer-panel h3 { font-size:32px; }
  #brews .beer-description { font-size:17px; }
  #brews .beer-prices { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  #brews .beer-mobile-controls { display:flex; justify-content:space-between; gap:16px; margin:0 0 28px; padding-bottom:18px; border-bottom:1px solid var(--line); }
  #brews .beer-mobile-controls button { font-size:16px; min-height:46px; padding:8px 12px; background:transparent; border:1px solid #e8e0d04d; color:var(--cream); }
  #brews .beer-mobile-controls button:hover { background:#e8e0d015; }
  #brews .section-heading { margin-bottom:28px; }
  #brews .beer-lineup-toolbar { align-items:flex-start; gap:15px; margin-bottom:12px; }
  #brews .beer-lineup-toolbar > p { font-size:17px; max-width:180px; }
  #brews .beer-stepper { gap:8px; }
  #brews .beer-stepper button { width:44px; height:44px; }
  #brews .beer-step-count { min-width:42px; font-size:13px; }
  #brews .beer-tabs { margin-bottom:24px; padding-bottom:12px; }
  #brews .beer-tabs button { flex-basis:150px; gap:11px; }
  #brews .beer-tabs button img { width:52px; height:52px; }
  #brews .brews-grid { grid-template-columns:1fr; gap:30px; }
  #brews .beer-visual { width:100%; max-width:510px; margin:auto; }
  #brews .beer-art { padding:30px 24px 26px; }
  #brews .beer-art-heading { min-height:94px; }
  #brews .beer-art-heading h3 { font-size:34px; }
  #brews .beer-art-heading > span { font-size:13px; }
  #brews .beer-art-scene { height:305px; }
  #brews .beer-illustration { width:84%; max-width:310px; }
  #brews .art-note { font-size:14px; }
  #brews .art-note-2 { top:58px; }
  #brews .beer-art-tagline { font-size:28px; margin-top:16px; }
  #brews .beer-discovery { padding:0; }
  #brews .beer-panel h3 { font-size:36px; margin-bottom:18px; }
  #brews .beer-panel-kicker { margin-bottom:18px; }
  #brews .taste-heading { margin-top:24px; }
  #brews .taste-card > div { display:flex; }
  #brews .taste-card strong { font-size:20px; }
  #brews .beer-prices { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  #brews .beer-prices strong { font-size:24px; }
}
@media(max-width:360px) {
  #brews .beer-lineup-toolbar > p { font-size:16px; }
  #brews .beer-stepper { gap:5px; }
  #brews .beer-art { padding-inline:20px; }
  #brews .beer-art-heading h3 { font-size:29px; }
  #brews .beer-art-scene { height:270px; }
  #brews .art-note { font-size:13px; padding:6px; }
  #brews .beer-panel h3 { font-size:32px; }
  #brews .beer-prices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media(prefers-reduced-motion:reduce) {
  #brews *,#brews *::before,#brews *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
