:root{--ink:#20352b;--lilac:#d4c9ed;--lime:#e4ed8a;--paper:#f6f3e9;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--lilac);font-family:Jost,'PingFang SC','Microsoft YaHei',sans-serif}a{color:inherit;text-decoration:none}h1,h2,h3,p,figure{margin:0}button{font:inherit;color:inherit}img{width:100%;height:100%;object-fit:cover;display:block}header{padding:25px 4%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand{font-size:22px;font-weight:700;line-height:1.2}.brand span{display:block;font-size:12px;letter-spacing:.17em;margin-top:6px}nav{display:flex;gap:38px;font-size:15px}.find{border-bottom:1px solid;padding:8px 0}.hero{min-height:810px;height:calc(100svh - 90px);max-height:1050px;position:relative;isolation:isolate;overflow:hidden;padding:30px 7%}.aside{font-size:13px;letter-spacing:.18em;display:block;margin:10px 0 40px}h1{font-size:clamp(72px,10.5vw,166px);letter-spacing:-.08em;line-height:1.13;position:relative;z-index:2;pointer-events:none;width:90%}h1>span{display:block}h1>span+span{margin-left:15%}.outline{-webkit-text-stroke:2px var(--ink);color:var(--lilac)}.hero-photo{position:absolute;width:44%;height:77%;right:9%;top:9%;border-radius:49% 49% 47% 47%;transform:rotate(13deg);overflow:hidden;z-index:1}.hero-photo img{object-position:65% center;transform:rotate(-13deg) scale(1.23);transition:opacity 180ms}.hero-note{position:absolute;left:7%;bottom:11%;z-index:3;display:flex;gap:45px;align-items:center}.hero-note p{line-height:1.9;font-size:17px}.round-link{background:var(--lime);width:116px;height:116px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-12deg);font-size:15px;transition:transform 220ms}.round-link span{font-size:34px;line-height:1}.handwriting{position:absolute;right:3%;bottom:10%;font:italic 34px/1.1 'Bodoni Moda',Georgia,serif;transform:rotate(-10deg);z-index:3}.orbit{border:1px solid #20352b50;width:90%;height:45%;position:absolute;top:27%;left:3%;border-radius:50%;transform:rotate(-23deg);z-index:-1}.selector{position:absolute;bottom:3%;left:7%;display:flex;gap:24px;z-index:3}.selector button{border:0;background:none;padding:10px 0;opacity:.55;cursor:pointer}.selector button[aria-pressed=true]{opacity:1;border-bottom:2px solid}.ribbon{background:var(--ink);color:var(--lime);transform:rotate(-3deg);width:100%;overflow:hidden;padding:18px 0;position:relative;z-index:4}.ribbon>div{font-size:32px;font-weight:500;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}.tastes{padding:110px 6% 150px;background:var(--paper);margin-top:-35px}.taste-heading{position:relative}.taste-heading>span,.story>div>span{font-size:12px;letter-spacing:.2em}.taste-heading h2{font-size:clamp(48px,6.4vw,100px);line-height:1.12;margin-top:25px;letter-spacing:-.06em}.taste-heading em{font-style:normal;margin-left:130px}.taste-heading p{position:absolute;right:5%;bottom:15px;line-height:1.9}.flavour-drift{display:flex;align-items:start;gap:7%;margin-top:65px}.beer{width:29%;transition:transform 280ms var(--ease)}.beer .oval{height:440px;border-radius:48% 48% 48% 48%;overflow:hidden}.beer.first{transform:rotate(-7deg)}.beer.first img{object-position:67% center}.beer.second{margin-top:150px;transform:rotate(6deg)}.beer.third{margin-top:-95px;transform:rotate(-5deg)}.beer.third .oval{height:390px}.beer h3{font-size:26px;margin-top:22px;font-weight:500}.beer h3 span{float:right}.beer p{font-size:14px;margin-top:8px}.all-beers{display:flex;align-items:center;gap:35px;width:fit-content;margin:60px 0 0 auto;font-size:18px;border-bottom:1px solid;padding-bottom:12px}.all-beers span{font-size:32px}.gather{position:relative;background:var(--lime);padding:70px 7% 0}.wave{position:absolute;width:100%;height:130px;left:0;top:-129px;fill:var(--lime)}.gather-title{display:flex;align-items:end;justify-content:space-between}.gather h2{font-size:clamp(44px,6vw,90px);line-height:1.2;letter-spacing:-.06em}.gather h2 span{display:block;margin-left:80px}.gather-title p{font-size:16px;line-height:1.9}.photo-scatter{position:relative;height:660px;margin-top:60px}.snapshot{display:block;position:absolute;background:var(--paper);padding:12px 12px 20px;box-shadow:0 10px 25px #20352b14}.snapshot img{height:350px}.snapshot span{display:block;margin:18px 4px 0;font-size:17px}.snapshot.one{width:53%;left:2%;top:10px;transform:rotate(-8deg)}.snapshot.two{width:44%;right:0;top:170px;transform:rotate(9deg)}.snapshot.two img{height:290px}.gather-cta{position:absolute;right:12%;top:-25px;border:1px solid;width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(12deg)}.gather-cta b{font-size:36px;font-weight:400}.giant-word{display:block;font-size:19vw;line-height:.9;letter-spacing:-.07em;text-align:center}.story{padding:120px 8%;background:var(--paper);display:flex;gap:10%;align-items:center}.story-photo{width:52%;height:470px;border-radius:50% 50% 5% 50%;overflow:hidden;transform:rotate(-6deg)}.story-photo img{object-position:65% center}.story>div{flex:1}.story h2{font-size:clamp(42px,4vw,64px);line-height:1.2;margin:25px 0;letter-spacing:-.06em}.story p{font-size:17px;line-height:1.9;max-width:320px}.story a{display:inline-block;margin-top:30px;border-bottom:1px solid;padding-bottom:8px}.ending{padding:70px 8% 90px;text-align:center}.ending>p{font-size:18px}.ending>a{display:block;font-size:clamp(52px,9vw,150px);letter-spacing:-.07em;margin:28px 0}.ending>a span{display:inline-block;transform:rotate(-15deg);margin-left:30px}.ending-links{display:flex;gap:60px;justify-content:center}.ending-links a{border-bottom:1px solid;padding-bottom:8px}footer{padding:28px 5%;background:var(--ink);color:var(--paper)}footer strong{font-size:8vw;letter-spacing:-.06em;font-weight:500}footer>div{display:flex;justify-content:space-between;gap:16px;font-size:12px;padding-top:25px}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}@media(hover:hover){.beer:hover{transform:rotate(0deg) translateY(-12px)}.round-link:hover{transform:rotate(0deg) scale(1.06)}nav a:hover{opacity:.6}.snapshot:hover{z-index:3}.ending>a:hover span{transform:rotate(0)}}.reveal{transition:opacity 600ms var(--ease),translate 600ms var(--ease)}.reveal.waiting{opacity:0;translate:0 35px}
@media(max-width:900px){.hero{min-height:720px;height:800px}.hero-photo{width:54%;right:3%;height:67%;top:12%}.hero-note{gap:20px}.handwriting{font-size:26px}.beer .oval{height:310px}.beer.third .oval{height:290px}.taste-heading p{right:0;font-size:14px}.gather-title{display:block}.gather-title p{margin-top:25px}.photo-scatter{height:590px}.snapshot img{height:270px}.snapshot.two img{height:230px}.story-photo{height:380px}}
@media(max-width:600px){header{padding:18px 6%;flex-wrap:wrap;gap:20px}.brand{font-size:18px}.brand span{font-size:10px}nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:14px}.find{font-size:14px}.hero{height:840px;min-height:0;padding:20px 6%}.aside{font-size:11px;margin:0 0 26px}h1{font-size:18vw;width:100%;line-height:1.2}h1>span+span{margin-left:10%}.hero-photo{top:225px;width:73%;height:420px;right:8%;transform:rotate(10deg)}.hero-photo img{transform:rotate(-10deg) scale(1.2)}.hero-note{left:6%;bottom:70px;gap:30px;align-items:end}.hero-note p{font-size:14px}.round-link{width:90px;height:90px;font-size:13px}.handwriting{font-size:23px;bottom:210px;right:4%}.selector{bottom:12px;left:6%;font-size:14px}.orbit{top:200px;height:250px;transform:rotate(-40deg);width:105%;left:-5%}.ribbon>div{font-size:24px}.tastes{padding:85px 7% 110px}.taste-heading h2{font-size:48px}.taste-heading em{margin-left:60px}.taste-heading p{position:static;margin-top:25px}.flavour-drift{flex-wrap:wrap;gap:30px 12%;margin-top:45px}.beer{width:70%}.beer .oval{height:340px}.beer.second{width:65%;margin:10px 0 0 auto}.beer.third{width:65%;margin-top:0}.beer.third .oval{height:330px}.beer h3{font-size:24px}.all-beers{font-size:15px;margin-top:30px;gap:20px}.gather{padding:20px 7% 0}.gather h2{font-size:41px}.gather h2 span{margin-left:15px}.gather-title p{font-size:14px}.photo-scatter{height:740px;margin-top:35px}.snapshot.one{width:88%;left:0;top:20px}.snapshot.two{width:85%;top:360px;right:0}.snapshot img{height:235px}.snapshot.two img{height:210px}.snapshot span{font-size:14px}.gather-cta{width:90px;height:90px;font-size:14px;top:295px;right:0;z-index:3;background:var(--lime)}.giant-word{font-size:20vw}.story{padding:65px 7%;display:block}.story-photo{width:90%;height:300px;margin-bottom:45px}.story h2{font-size:44px}.story p{font-size:16px}.ending{padding:55px 6%}.ending>p{font-size:15px}.ending>a{font-size:13vw;margin:35px 0}.ending>a span{margin-left:15px}.ending-links{gap:35px;font-size:15px}footer{padding:25px 6%}footer strong{font-size:12vw}footer>div{flex-wrap:wrap;font-size:11px}.wave{height:80px;top:-79px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.waiting{opacity:1;translate:none}}
body{overflow-x:clip}@media(max-width:600px){.handwriting{display:none}}
@media(min-width:601px){.beer.third{margin-top:-30px}}
/* Brand stamps, beer bubbles and a small toast interaction. */
.panda-mark{display:block;width:66px;height:66px;background:url('brand-header.jpg') -513px -39px/1920px 110px no-repeat;filter:invert(1);mix-blend-mode:multiply}.panda-seal{position:absolute;z-index:4;right:5%;top:0;width:140px;height:140px;transform:rotate(14deg)}.panda-seal svg{width:100%;height:100%;fill:var(--ink);font:11px Jost,sans-serif;letter-spacing:2px;animation:seal-turn 45s linear infinite}.panda-seal>.panda-mark{position:absolute;left:37px;top:37px;transform:rotate(-14deg)}@keyframes seal-turn{to{transform:rotate(360deg)}}.bubble-cluster{position:absolute;left:43%;top:6%;width:100px;height:90px;pointer-events:none}.bubble-cluster i{position:absolute;border:1px solid #20352b80;border-radius:50%;width:12px;height:12px;animation:bubble-breathe 5s ease-in-out infinite}.bubble-cluster i:nth-child(2){width:28px;height:28px;left:25px;top:30px;animation-delay:-1s}.bubble-cluster i:nth-child(3){width:9px;height:9px;left:65px;top:20px;animation-delay:-2s}.bubble-cluster i:nth-child(4){width:18px;height:18px;left:75px;top:55px;animation-delay:-3s}.bubble-cluster i:nth-child(5){left:5px;top:65px;animation-delay:-4s}@keyframes bubble-breathe{50%{transform:translateY(-9px);opacity:.45}}.taste-swoosh{position:absolute;width:190px;left:47%;top:45px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-14deg)}.gather-title{position:relative}.panda-mini{position:absolute;left:-35px;top:-60px;transform:rotate(-18deg) scale(.72)}.cheers-play{position:relative;display:flex;align-items:center;justify-content:center;height:145px;margin:-35px 0 25px;isolation:isolate}.cheers-button{border:1px solid #20352b55;border-radius:50%;width:132px;height:132px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;transition:background 180ms,transform 180ms}.cheers-button svg{width:76px;height:66px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cheers-button .beer-fill{fill:var(--ink);stroke:none;opacity:.7}.cheers-button span{font-size:12px;margin-top:3px}.cheers-button:active{transform:scale(.94)}.cheers-button.toasting .glass-left{transform:rotate(15deg);transform-origin:24px 60px}.cheers-button.toasting .glass-right{transform:rotate(-15deg);transform-origin:56px 60px}.glass-left,.glass-right{transition:transform 180ms}.cheers-particles{position:absolute;left:50%;top:40%;pointer-events:none;z-index:1}.cheers-particles i{position:absolute;width:var(--size);height:var(--size);border:1px solid var(--ink);border-radius:50%;animation:toast-pop 950ms cubic-bezier(.1,.6,.3,1) forwards}.cheers-particles i:nth-child(3n){background:var(--paper)}@keyframes toast-pop{from{transform:translate(-50%,0) scale(.3);opacity:1}to{transform:translate(var(--x),var(--y)) scale(1);opacity:0}}.cheers-message{position:absolute;left:calc(50% + 95px);top:55px;font:italic 30px 'Bodoni Moda',Georgia,serif;white-space:nowrap;transform:rotate(-9deg)}.ending{position:relative}.ending-panda{display:inline-block;transform:rotate(12deg);margin-bottom:20px}.ending-panda .panda-mark{width:66px;height:66px}@media(hover:hover){.cheers-button:hover{background:var(--paper)}.panda-seal:hover svg{animation-play-state:paused}}@media(max-width:900px){.panda-seal{right:2%;width:110px;height:110px}.panda-seal>.panda-mark{left:22px;top:22px;transform:scale(.85)}.taste-swoosh{left:52%;width:135px;top:65px}}@media(max-width:600px){.panda-seal{top:185px;right:3%;width:90px;height:90px}.panda-seal>.panda-mark{left:12px;top:12px;transform:scale(.65)}.bubble-cluster{left:auto;right:5%;top:10px;transform:scale(.65)}.taste-swoosh{left:auto;right:-10px;top:100px;width:100px}.panda-mini{top:-60px;left:auto;right:0;transform:rotate(15deg) scale(.65)}.cheers-play{margin:-25px 0 30px;height:130px}.cheers-button{width:115px;height:115px}.cheers-message{left:auto;right:-5px;font-size:20px;top:8px}.ending-panda{margin-bottom:14px;transform:scale(.8) rotate(12deg)}}@media(prefers-reduced-motion:reduce){.cheers-particles{display:none}.panda-seal svg,.bubble-cluster i{animation:none}}
.panda-seal,.panda-mini,.ending-panda{mix-blend-mode:multiply}main{overflow-x:clip}