@font-face{font-family:'Big Shoulders';src:url(../../fonts/concepts/bigshoulders.woff2) format('woff2');font-weight:800;font-display:swap}
.defs{position:absolute}
.st-brew{--g:var(--c6-cream);--i:var(--c6-tomato);--a:var(--c6-navy);--big:'Big Shoulders',var(--body);background:var(--g);color:var(--i);transition:background-color .35s var(--ease),color .35s var(--ease);overflow:hidden}
.st-brew[data-way=navy]{--g:var(--c6-navy);--i:var(--c6-cream);--a:var(--c6-amber)}
.st-brew[data-way=forest]{--g:var(--c6-forest);--i:var(--c6-amber);--a:var(--c6-cream)}
.st-brew h1,.st-brew h2,.st-brew h3{font-family:var(--big);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.st-brew .st-nav{font-weight:600;text-transform:uppercase}
.st-brew .st-nav b{font:800 1.5rem/1 var(--big);letter-spacing:.02em}
.st-brew .st-chip[aria-pressed=true]{background:var(--i);color:var(--g)}
.st-brew .st-chip{font-weight:600}
/* the marks: drawn in currentColor, with --cut as whatever sits behind them */
.mk-line{fill:none;stroke:currentColor;stroke-width:6}
.mk-thin{stroke-width:2.5}
.mk-arc{font:800 15.5px/1 var(--big);letter-spacing:.17em;fill:currentColor}
.mk-big{font:800 118px/1 var(--big);fill:currentColor}
.mk-fill{fill:currentColor}
.mk-cut{fill:none;stroke:var(--cut,var(--g));stroke-width:9;stroke-linecap:round}
.mk-hop path{fill:currentColor;stroke:var(--cut,var(--g));stroke-width:3.5;stroke-linejoin:round}
.mk-stem{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round}
/* the first screen */
.br-hero{position:relative;padding:clamp(.6rem,1.6vw,3rem) var(--st-pad) clamp(1.4rem,2.4vw,4rem);min-height:calc(100vh - 7.4rem);min-height:calc(100svh - 7.4rem);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.br-hero h1{font-size:min(17.5vw,26vh);line-height:.84;margin:0;position:relative;z-index:1}
.br-tools{display:flex;flex-wrap:wrap;gap:1.2rem 3rem;position:relative;z-index:1}
.br-tools p{margin:0 0 .6rem;font:800 1.2rem/1 var(--big);text-transform:uppercase;letter-spacing:.04em}
.br-tools .st-chips{margin:0}
.br-ways{display:flex;gap:.4rem}
.way{width:2.6rem;height:2.6rem;padding:0;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px currentColor;background:none;color:inherit;transition:transform .3s var(--spring)}
.way:active{transform:scale(.9)}
.way i{display:block;width:100%;height:100%;clip-path:polygon(0 0,100% 0,0 100%)}
.way[aria-pressed=true]{box-shadow:inset 0 0 0 3px currentColor}
.way-tomato{background:var(--c6-cream)}.way-tomato i{background:var(--c6-tomato)}
.way-navy{background:var(--c6-cream)}.way-navy i{background:var(--c6-navy)}
.way-forest{background:var(--c6-amber)}.way-forest i{background:var(--c6-forest)}
.br-big{position:absolute;right:calc(var(--st-pad) * .7);bottom:clamp(1.4rem,2.4vw,4rem);width:min(29vw,35vh);--cut:var(--g)}
.br-big svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:760px){.br-hero h1{font-size:25vw}.br-big{position:relative;right:auto;bottom:auto;width:52vw;align-self:flex-end;order:1}.br-hero{min-height:0}}
/* every surface, in one colour-blocked wall */
.br-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.sf{position:relative;margin:0;min-width:0;overflow:hidden;--sf-g:var(--i);--sf-i:var(--g);background:var(--sf-g);transition:background-color .35s var(--ease)}
.sf-stage{display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;padding:clamp(1.4rem,3.4vw,6rem)}
.sf figcaption{position:absolute;left:1rem;bottom:.8rem;font:800 1rem/1 var(--big);text-transform:uppercase;letter-spacing:.05em;color:var(--sf-i)}
.sf svg{display:block;max-width:100%;height:auto;overflow:visible}
.sf-van{grid-column:span 7}.sf-can{grid-column:span 5;--sf-g:var(--a);--sf-i:var(--g)}
.sf-tee{grid-column:span 4;--sf-g:var(--g);--sf-i:var(--i)}.sf-board{grid-column:span 8;--sf-g:var(--a);--sf-i:var(--g)}
.sf-coaster{grid-column:span 4;--sf-g:var(--a);--sf-i:var(--g)}.sf-ads{grid-column:span 8}
.sf-van svg{width:min(100%,46rem)}
.sf-can svg{height:clamp(16rem,32vw,62rem);width:auto}
.sf-tee svg{height:clamp(16rem,28vw,56rem);width:auto}
.sf-board svg{width:min(100%,50rem);transform:perspective(1400px) rotateY(-9deg)}
.sf-coaster svg{width:min(70%,22rem);transform:rotate(-11deg);filter:none}
.sf-tee{box-shadow:inset 0 0 0 1px var(--i)}
@media (max-width:760px){.sf,.sf-van,.sf-can,.sf-tee,.sf-board,.sf-coaster,.sf-ads{grid-column:span 12}.st-brew .st-nav a{display:none}.st-brew .st-nav{justify-content:space-between}.st-brew .st-nav b{margin:0}}
/* the van */
.v-body{fill:var(--sf-i);transition:fill .35s var(--ease)}
.v-win{fill:var(--sf-g);opacity:.9}
.v-line{fill:none;stroke:var(--sf-g);stroke-width:2;opacity:.35}
.v-wheel{fill:var(--c6-ink)}.v-hub{fill:var(--c6-metal)}
.v-t{font:800 54px/1 var(--big);fill:var(--sf-g);letter-spacing:.01em}
.sf-van .mk{color:var(--sf-g);--cut:var(--sf-i)}
/* the can */
.can-rim{fill:var(--c6-metal)}
.can-body{fill:var(--i);transition:fill .35s var(--ease)}
.can-shade{fill:url(#can-sh)}
.s-d{stop-color:var(--c6-ink);stop-opacity:.42}.s-0{stop-color:var(--c6-ink);stop-opacity:0}.s-l{stop-color:var(--c6-white);stop-opacity:.34}.s-d2{stop-color:var(--c6-ink);stop-opacity:.55}
.can .mk{color:var(--g);--cut:var(--i)}
.can-t{font:800 25px/1 var(--big);fill:var(--g);letter-spacing:.03em}
.can-s{font:800 10px/1 var(--big);fill:var(--g);letter-spacing:.24em}
/* the tee, on the LodiTees rig */
.tee .g-cloth{fill:var(--i);transition:fill .35s var(--ease)}
.tee .g-in{fill:var(--c6-ink);opacity:.5}
.tee .mk{color:var(--g);--cut:var(--i)}
/* the billboard */
.b-post{fill:none;stroke:var(--c6-ink);stroke-width:14}
.b-frame{fill:var(--c6-ink)}
.b-face{fill:var(--g);transition:fill .35s var(--ease)}
.b-t{font:800 74px/1 var(--big);fill:var(--i);letter-spacing:-.005em}
.sf-board .mk{color:var(--i);--cut:var(--g)}
/* the coaster */
.co-face{fill:var(--g);transition:fill .35s var(--ease)}
.co-ring{fill:none;stroke:var(--i);stroke-width:2.5}
.sf-coaster .mk{color:var(--i);--cut:var(--g)}
/* the campaign: three phones running real ads */
.sf-ads .sf-stage{gap:clamp(.8rem,2vw,3rem)}
.ph{width:min(30%,15rem);aspect-ratio:9/18;padding:.35rem;background:var(--c6-ink);border-radius:clamp(.8rem,1.6vw,2rem);container-type:inline-size}
.ph-face{position:relative;height:100%;border-radius:clamp(.5rem,1.2vw,1.6rem);overflow:hidden;background:var(--g);color:var(--i);--cut:var(--g);transition:background-color .35s var(--ease),color .35s var(--ease)}
.ph-2 .ph-face{background:var(--a);color:var(--g);--cut:var(--a)}
.ph-words{position:absolute;left:7cqi;top:8cqi;font:800 27cqi/.92 var(--big)}
.ph-words span{display:block}
.ph-mk{position:absolute;right:7cqi;bottom:7cqi;width:30cqi;height:30cqi}
html.motion .ph-words span{animation:br-word 6.4s var(--ease) infinite;animation-delay:calc(var(--i) * .24s)}
html.motion .ph-2 .ph-words span{animation-delay:calc(1.1s + var(--i) * .24s)}
html.motion .ph-3 .ph-words span{animation-delay:calc(2.2s + var(--i) * .24s)}
@keyframes br-word{0%{opacity:0;transform:translateY(46%)}6%,76%{opacity:1;transform:none}84%,100%{opacity:0;transform:translateY(-22%)}}
/* the stamp: a mark lands with weight, one surface after another */
.mk,.br-big svg,.ph-mk{transform-box:fill-box;transform-origin:center}
html.motion .strike .mk,html.motion .strike .br-big svg,html.motion .strike .ph-mk{animation:br-strike .6s var(--spring) both;animation-delay:var(--d,0s)}
@keyframes br-strike{0%{transform:scale(1.9);opacity:0}38%{transform:scale(.94);opacity:1}64%{transform:scale(1.03)}100%{transform:none;opacity:1}}
.sf-van{--d:.04s}.sf-can{--d:.1s}.sf-tee{--d:.16s}.sf-board{--d:.22s}.sf-coaster{--d:.28s}.sf-ads{--d:.34s}
/* on tap, and the shop */
.br-tap{background:var(--g);transition:background-color .35s var(--ease)}
.st-brew h2{font-size:max(3.4rem,8vw);line-height:.9;margin:0 0 2rem}
.br-beers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1rem,2vw,4rem)}
.br-beers svg{display:block;height:clamp(13rem,20vw,38rem);width:auto;margin-bottom:1rem;overflow:visible}
.br-beers h3{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem;font-size:clamp(1.6rem,2.2vw,4rem);margin:0 0 .3rem}
.br-beers h3 span{font-size:.7em}
.br-beers p{margin:0;font-size:.92rem}
@media (max-width:760px){.br-beers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.br-shop{background:var(--i);color:var(--g);transition:background-color .35s var(--ease),color .35s var(--ease)}
.br-shop p{max-width:46ch}
.br-shop .st-chip[aria-pressed=true]{background:var(--g);color:var(--i)}
.br-list{list-style:none;margin:2rem 0 0;padding:0;border-top:2px solid currentColor}
.br-list li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1.4rem;padding:.9rem 0;border-bottom:2px solid currentColor;font:800 clamp(1.5rem,2.6vw,5rem)/1 var(--big);text-transform:uppercase}
.br-list b{font-weight:800}