@font-face{font-family:Anton;src:url('./assets/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('./assets/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--paper:#f1c84a;--ink:#182345;--line:rgba(24,35,69,.25);--disc:#e7b936;--pointer-x:0;--pointer-y:0;--ease:cubic-bezier(.16,1,.3,1);font-family:Manrope,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
:root[data-beer=camette]{--paper:#a5c5a4;--disc:#8cb48a}
:root[data-beer=tricornus]{--paper:#d6a482;--disc:#ca906c}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);transition:background 1s var(--ease);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button{border:0;background:none}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible,.bottle-stage:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:3px}
::selection{background:var(--ink);color:var(--paper)}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-shell{height:100svh;min-height:100%;width:100%;padding:0 3.6vw;display:grid;grid-template-rows:116px minmax(0,1fr) 48px;position:relative;isolation:isolate}
.masthead{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10;border-bottom:1px solid var(--line)}
.brand{width:90px;display:block;flex-shrink:0}
.brand img{display:block;width:100%;height:auto}
.header-nav{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:700}
.social-links{display:flex;align-items:center;gap:8px;padding-right:18px;border-right:1px solid var(--line)}
.social-link{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;transition:background .25s,color .25s,transform .3s var(--ease)}
.social-link svg{width:19px;height:19px;stroke-width:1.7}
.social-link:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.social-link:active{transform:scale(.95)}
.social-link:focus-visible{border-radius:50%;outline-offset:4px}
.contact-link{display:flex;align-items:center;gap:19px;min-height:44px;padding:12px 18px;border:1px solid var(--ink);border-radius:30px;transition:background .25s,color .25s;white-space:nowrap;font-size:max(11px,1em)}
.contact-link svg{width:16px;height:16px}
.contact-link:hover{background:var(--ink);color:var(--paper)}
.experience{position:relative;min-height:0}
.place-marker{position:absolute;top:27px;left:0;font-size:9px;letter-spacing:.075em;font-weight:700;display:flex;align-items:center;gap:10px;z-index:3}
.marker-cross{font-size:18px;font-weight:400;line-height:1}
.hero-copy{position:absolute;top:16.4%;left:0;z-index:2;pointer-events:none}
h1{margin:0;font:400 clamp(70px,12.6vw,220px)/.99 Anton,sans-serif;letter-spacing:-.025em}
.title-line{display:block;width:max-content}
.second-line{padding-left:4.2vw}
.title-period{display:inline-block;color:var(--ink);transform:translateX(.015em)}
.hero-description{margin:32px 0 0 4.5vw;font-size:14px;font-weight:500;line-height:1.8}
.product-universe{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0}
.orbital-disc{width:min(46vw,71vh);aspect-ratio:1;position:absolute;right:2%;top:49%;transform:translateY(-50%);background:var(--disc);border-radius:50%;transition:background 1s var(--ease)}
.orbit{position:absolute;width:min(52vw,81vh);height:min(27vw,40vh);right:-.6%;top:49%;border:1px solid rgba(24,35,69,.3);border-radius:50%;transform:translateY(-50%) rotate(-36deg)}
.orbit-two{transform:translateY(-50%) rotate(51deg);width:min(46vw,72vh);height:min(47vw,72vh);right:2.8%;border-color:rgba(24,35,69,.13)}
.orbit-dot{width:10px;height:10px;background:var(--ink);position:absolute;border-radius:50%}
.orbit-dot-one{top:29%;right:3%}
.orbit-dot-two{top:66%;right:43%;width:6px;height:6px}
.universe-spark{fill:var(--ink);stroke:none;position:absolute}
.spark-one{width:50px;height:50px;right:6.5%;top:11%;transform:rotate(12deg)}
.spark-two{width:27px;height:27px;right:41%;top:63%;transform:rotate(15deg)}
#bubbles{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.bottle-stage{position:absolute;z-index:4;right:7.5%;top:4%;width:32%;height:83%;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;outline-offset:-6px}
.bottle-stage:active{cursor:grabbing}
.bottle-parallax{width:100%;height:100%;transform:translate3d(calc(var(--pointer-x)*-14px),calc(var(--pointer-y)*-9px),0) rotate(calc(var(--pointer-x)*3deg));will-change:transform}
.bottle-float{position:relative;height:100%;width:100%;animation:bottle-float 7s ease-in-out infinite}
.bottle{height:98%;width:auto;max-width:100%;object-fit:contain;position:absolute;left:50%;top:0;transform:translate(-50%,0) rotate(14deg);filter:drop-shadow(16px 25px 13px rgba(80,40,12,.22));opacity:0;visibility:hidden;transition:opacity .6s ease,transform .8s var(--ease),visibility .8s;pointer-events:none}
.bottle.active{opacity:1;visibility:visible}
.bottle.leaving{transform:translate(-85%,6%) rotate(-12deg);opacity:0;visibility:visible}
.bottle.entering{transform:translate(-10%,-5%) rotate(26deg);opacity:0;visibility:visible;transition:none}
.bottle-shadow{position:absolute;bottom:-1%;left:30%;width:65%;height:2.5%;border-radius:50%;background:rgba(82,48,16,.18);filter:blur(10px);transform:rotate(-7deg);animation:shadow-float 7s ease-in-out infinite;z-index:-1}
.roundel{position:absolute;right:36%;top:6%;width:110px;height:110px;z-index:5;pointer-events:none;transform:rotate(-13deg)}
.roundel>svg:first-child{width:100%;height:100%;animation:roundel-spin 38s linear infinite;stroke:none;fill:var(--ink);font-family:Manrope,sans-serif;font-size:9.4px;font-weight:800;letter-spacing:.05em}
.roundel-center{position:absolute;width:31px;height:31px;top:39px;left:39px;fill:var(--ink);stroke:none}
.roundel .award-medal{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:rotate(13deg);filter:drop-shadow(3px 7px 7px rgba(24,35,69,.14));transition:opacity .35s,visibility .35s}
:root[data-beer=charcennaise] .roundel>svg:not(.award-medal){visibility:hidden;opacity:0}
:root:not([data-beer=charcennaise]) .award-medal{visibility:hidden;opacity:0}
.drag-hint{position:absolute;right:11%;bottom:16.8%;z-index:6;font-size:8px;letter-spacing:.15em;font-weight:800;display:flex;gap:14px;align-items:center;opacity:.75;pointer-events:none}
.drag-hint span{font-size:17px;font-weight:400;letter-spacing:0}
.bottom-bar{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:space-between;align-items:center;z-index:6}
.chapter-note{display:flex;gap:14px;align-items:center;font-size:9px;line-height:1.8;letter-spacing:.03em;width:30%}
.chapter-note strong{font-weight:800}
.chapter-note svg{width:28px;height:28px;fill:var(--ink);stroke:none}
.beer-selector{display:flex;align-items:center;gap:25px;margin-right:4%;margin-top:20px}
.arrow-button{border:1px solid var(--line);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s,transform .3s var(--ease)}
.arrow-button svg{width:18px;height:18px}
.arrow-button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:scale(1.08)}
.arrow-button:active{transform:scale(.94)}
.beer-info{display:flex;align-items:center;flex-direction:column;min-width:155px;gap:7px}
.beer-count{display:flex;gap:8px;align-items:center;font-size:9px;font-weight:700;font-variant-numeric:tabular-nums}
.count-separator{width:26px;height:1px;background:var(--ink);opacity:.35}
.beer-name{font-size:16px;font-weight:800;letter-spacing:-.02em}
.beer-dots{display:flex;gap:1px;margin-top:-1px}
.beer-dot{width:28px;min-width:24px;min-height:24px;height:24px;position:relative;padding:0;display:grid;place-items:center}
.beer-dot:before{content:'';width:5px;height:5px;border:1px solid var(--ink);border-radius:50%;transition:background .3s,width .3s var(--ease),height .3s var(--ease)}
.beer-dot.selected:before{background:var(--ink);width:7px;height:7px}
.round-cta{width:143px;height:143px;background:var(--ink);color:var(--paper);border-radius:50%;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:0 25px;gap:10px;transform:rotate(-10deg);transition:transform .5s var(--ease),color .8s,box-shadow .4s;flex-shrink:0;margin-right:0;margin-top:-62px}
.round-cta span{font-size:8px;line-height:1.9;letter-spacing:.025em}
.round-cta strong{font-size:11px;white-space:nowrap;font-weight:800}
.round-cta svg{width:25px;height:25px;stroke-width:1.4;transition:transform .5s var(--ease)}
.round-cta:hover{transform:rotate(0) scale(1.04);box-shadow:0 13px 18px rgba(24,35,69,.16)}
.round-cta:hover svg{transform:translate(5px,-3px)}
.footer{z-index:7;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);font-size:8px;line-height:1.4}
.footer-signature{font-weight:800;font-size:8px;letter-spacing:.07em;white-space:nowrap}
.health-notice{font-size:8px;text-align:center}
.footer-tools{display:flex;gap:24px;align-items:center;white-space:nowrap}
.motion-toggle{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:800;padding:10px 0;min-height:44px}
.motion-toggle svg{width:12px;height:12px;stroke-width:2}
.noscript-note{position:fixed;left:0;right:0;bottom:48px;text-align:center;font-size:11px;background:var(--ink);color:var(--paper);padding:5px;z-index:20}
.noscript-note a{text-decoration:underline}
.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}
body.paused .hero-copy,body.paused .bottle-stage,body.paused .bottom-bar{animation:none!important}
body.paused .bottle-parallax{transform:none}
body.is-ready .hero-copy{animation:copy-in 1.1s var(--ease) both}
body.is-ready .bottle-stage{animation:bottle-in 1.4s var(--ease) both}
body.is-ready .bottom-bar{animation:bar-in 1.2s .1s var(--ease) both}
@keyframes bottle-float{0%,100%{transform:translate3d(0,0,0) rotate(-1.5deg)}50%{transform:translate3d(0,-15px,0) rotate(1deg)}}
@keyframes shadow-float{0%,100%{opacity:.8;scale:1}50%{opacity:.5;scale:.9}}
@keyframes roundel-spin{to{rotate:360deg}}
@keyframes copy-in{from{transform:translateY(30px);clip-path:inset(0 0 100% 0)}to{transform:translateY(0);clip-path:inset(-8% -8% -8% -8%)}}
@keyframes bar-in{from{transform:translateY(18px);opacity:.3}to{transform:translateY(0);opacity:1}}
@keyframes bottle-in{from{transform:translate(35px,-15px) rotate(9deg);opacity:.2}to{transform:translate(0,0) rotate(0);opacity:1}}

@media(min-width:1700px){.page-shell{padding-inline:5vw;grid-template-rows:130px minmax(0,1fr) 54px}.hero-copy{top:15%}h1{font-size:12.6vw}.hero-description{font-size:17px}.beer-name{font-size:19px}.round-cta{width:165px;height:165px;padding:0 29px}.round-cta strong{font-size:12px}.round-cta span{font-size:9px}.footer,.health-notice,.footer-signature{font-size:10px}}
@media(max-width:1100px){.page-shell{grid-template-rows:100px minmax(0,1fr) 48px}.brand{width:78px}.header-nav{gap:22px}.hero-copy{top:20%}h1{font-size:12.3vw}.hero-description{font-size:12px;margin-top:26px}.bottle-stage{right:6%;width:34%;top:8%;height:76%}.roundel{right:34%;top:8%;width:90px;height:90px}.roundel-center{left:33px;top:33px;width:24px;height:24px}.round-cta{width:120px;height:120px;padding-inline:20px}.round-cta strong{font-size:9px}.round-cta span{font-size:7px}.round-cta svg{width:21px;height:21px}.beer-selector{gap:15px;margin-right:1%}.chapter-note{font-size:8px}.footer-tools{gap:15px}.footer-signature,.health-notice{font-size:7px}.orbital-disc{top:47%}.orbit{top:47%}}
@media(max-width:700px){.page-shell{padding-inline:22px;grid-template-rows:83px minmax(0,1fr) 58px}.brand{width:65px}.header-nav{gap:17px;font-size:10px}.contact-link{padding:10px 13px;gap:10px}.contact-link svg{width:13px;height:13px}.place-marker{top:17px;font-size:8px;letter-spacing:.02em;gap:7px}.marker-cross{font-size:15px}.hero-copy{top:10%;left:0;right:0}.hero-copy h1{font-size:18.05vw;line-height:1.04;letter-spacing:-.025em}.second-line{padding-left:0}.hero-description{font-size:10px;line-height:1.7;margin:13px 0 0;max-width:200px}.bottle-stage{top:25%;height:58%;right:13%;width:45%}.bottle{height:100%;transform:translate(-50%,0) rotate(16deg);filter:drop-shadow(11px 16px 10px rgba(80,40,12,.2))}.bottle-shadow{bottom:-2%;left:35%;width:70%;height:2%}.orbital-disc{top:51%;right:-4%;width:82vw;max-width:390px;opacity:.8}.orbit{width:100vw;height:49vw;right:-14%;top:53%;transform:translateY(-50%) rotate(-33deg)}.orbit-two{width:81vw;height:83vw;right:2%;transform:translateY(-50%) rotate(45deg);top:52%}.orbit-dot-one{top:44%;right:0;width:7px;height:7px}.orbit-dot-two{top:74%;right:72%;width:5px;height:5px}.spark-one{width:33px;height:33px;top:34%;right:1%}.spark-two{width:19px;height:19px;top:71%;right:79%}.roundel{right:0;top:6%;width:83px;height:83px}.roundel-center{left:29px;top:29px;width:25px;height:25px}.bottom-bar{bottom:12px;align-items:flex-end;gap:0}.chapter-note{display:none}.beer-selector{margin:0;gap:10px;align-items:center}.arrow-button{width:34px;height:34px}.arrow-button svg{width:16px;height:16px}.beer-info{min-width:120px;gap:5px}.beer-name{font-size:13px}.beer-count{font-size:8px}.beer-dot{height:18px;width:22px}.round-cta{width:98px;height:98px;padding-inline:15px;margin:0 1px 0 0;gap:7px;transform:rotate(-9deg)}.round-cta span{font-size:6px}.round-cta strong{font-size:8px}.round-cta svg{width:19px;height:19px}.drag-hint{right:18%;bottom:17.5%;font-size:6px;letter-spacing:.1em;gap:9px}.drag-hint span{font-size:14px}.footer{display:grid;grid-template-columns:1fr auto;grid-template-rows:24px 24px;gap:0;padding-top:3px;align-content:start}.footer-signature{font-size:6.5px;letter-spacing:.045em}.footer-tools{gap:13px;grid-column:2;grid-row:1}.health-notice{grid-column:1/-1;grid-row:2;font-size:6.6px;line-height:1.5;text-align:left}.motion-toggle{font-size:6.5px;min-height:28px;padding:5px 0}.motion-toggle svg{width:10px;height:10px}.noscript-note{bottom:58px;font-size:9px}}
@media(max-width:370px){.page-shell{padding-inline:17px;grid-template-rows:76px minmax(0,1fr) 57px}.header-nav{font-size:9px;gap:13px}.contact-link{padding:10px}.brand{width:58px}.beer-selector{gap:5px}.beer-info{min-width:104px}.beer-name{font-size:11px}.round-cta{width:86px;height:86px;padding-inline:12px}.round-cta strong{font-size:7px}.round-cta span{font-size:5.5px}.footer-tools{gap:7px}.hero-description{font-size:9px}.roundel{width:71px;height:71px}.roundel-center{width:21px;height:21px;left:25px;top:25px}}
@media(min-width:701px) and (max-height:740px){.page-shell{grid-template-rows:86px minmax(0,1fr) 42px}.brand{width:65px}.place-marker{top:15px}.hero-copy{top:15%}h1{font-size:min(12vw,23vh)}.hero-description{font-size:11px;margin-top:20px}.bottle-stage{height:83%;top:1%;right:10%}.roundel{width:82px;height:82px;top:1%;right:34%}.roundel-center{width:24px;height:24px;left:29px;top:29px}.round-cta{width:110px;height:110px;padding-inline:19px}.round-cta strong{font-size:8px}.round-cta span{font-size:6px}.bottom-bar{bottom:12px}.beer-selector{margin-top:8px}.drag-hint{bottom:19%}}
@media(max-width:700px) and (max-height:700px){.page-shell{grid-template-rows:74px minmax(0,1fr) 54px}.brand{width:57px}.hero-copy{top:9%}.hero-copy h1{font-size:16.5vw;line-height:1.02}.hero-description{font-size:9px;margin-top:10px}.bottle-stage{top:26%;height:54%;right:12%}.roundel{width:67px;height:67px;top:6%}.roundel-center{left:24px;top:24px;width:19px;height:19px}.bottom-bar{bottom:8px}.round-cta{width:85px;height:85px;padding-inline:12px}.round-cta strong{font-size:7px}.round-cta span{font-size:5.5px}.beer-selector{gap:7px}.drag-hint{bottom:20%}}
@media(max-height:500px) and (min-width:600px){.page-shell{grid-template-rows:62px minmax(0,1fr) 32px}.brand{width:49px}.header-nav{font-size:10px}.contact-link{padding:8px 12px}.hero-copy{top:17%;left:3%}h1{font-size:21vh;line-height:1}.hero-description{font-size:9px;margin:12px 0 0}.place-marker{top:10px;font-size:7px}.bottle-stage{top:1%;right:15%;height:80%;width:25%}.roundel{width:65px;height:65px;right:40%;top:5%}.roundel-center{left:23px;top:23px;width:19px;height:19px}.orbital-disc{width:57vh;right:13%;top:45%}.orbit{width:70vh;height:35vh;right:9%;top:45%}.orbit-two{width:59vh;height:59vh;right:12%}.spark-one{width:25px;height:25px;right:11%;top:10%}.spark-two,.orbit-dot,.drag-hint,.chapter-note{display:none}.bottom-bar{left:auto;right:0;bottom:5px;gap:18px}.beer-selector{gap:10px;margin:0}.beer-info{min-width:110px;gap:3px}.beer-name{font-size:12px}.beer-count{font-size:7px}.beer-dot{height:12px;width:19px}.arrow-button{width:28px;height:28px}.arrow-button svg{width:13px;height:13px}.round-cta{width:78px;height:78px;margin:0;padding:0 10px;gap:4px}.round-cta span{font-size:5px}.round-cta strong{font-size:6.5px}.round-cta svg{width:17px;height:17px}.footer-signature,.health-notice{font-size:6px}.motion-toggle{font-size:6px;min-height:25px;padding:5px 0}.footer-tools{gap:10px}}
.page-shell{padding-left:max(3.6vw,env(safe-area-inset-left));padding-right:max(3.6vw,env(safe-area-inset-right));padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:700px){.page-shell{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));grid-template-rows:83px minmax(0,1fr) 68px}.beer-dot{min-width:24px;min-height:24px}.drag-hint{display:none}.footer{grid-template-rows:25px 30px}.footer-signature{font-size:7.5px}.motion-toggle{font-size:7px}.footer-tools{gap:10px}.health-notice{font-size:8.5px;line-height:1.5;align-self:center}}
@media(max-width:370px){.page-shell{padding-left:max(17px,env(safe-area-inset-left));padding-right:max(17px,env(safe-area-inset-right));grid-template-rows:74px minmax(0,1fr) 68px}.footer-tools{gap:6px}.footer-signature{font-size:6.7px}}
@media(max-width:700px){:root[data-beer=charcennaise] .roundel{right:-8px}}
@media(max-width:700px){.header-nav{gap:12px}.social-links{gap:4px;padding-right:0;border-right:0}}
@media(max-width:370px){.header-nav{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.bottle-parallax{transform:none!important}}