@font-face{font-family:Giorgio;src:url(GiorgioSans-Bold.woff2) format('woff2');font-display:swap}@font-face{font-family:Inter;src:url(Inter-Regular.woff2) format('woff2');font-display:swap}
:root{color-scheme:light;--ink:#151515;--paper:#faf9f5;--line:#d4d4cb;--lime:#d6e589;--pink:#ecc7d4;--blue:#bfdae4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Inter,Arial,sans-serif}a{color:inherit}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #1179a2;outline-offset:6px}h1,h2,h3,p,figure{margin:0}h1,h2,h3,.cta,.header nav,.recipe strong,.ribbon,.brand{font-family:Giorgio,Impact,'Arial Narrow',sans-serif;font-weight:400;line-height:.98;letter-spacing:.015em;text-transform:uppercase}h2{font-size:clamp(48px,6vw,78px)}h3{font-size:42px}p+p{margin-top:20px}.wrap{max-width:1280px;padding-inline:56px;margin-inline:auto}.header{height:126px;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:122px;height:78px;object-fit:contain;mix-blend-mode:multiply}.header nav{display:flex;gap:34px;font-size:24px;letter-spacing:.025em}.header a{text-decoration:none}.header a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:620px;align-items:center;padding-top:30px;padding-bottom:62px;gap:12px}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;line-height:1.6;margin-bottom:25px}.hero h1{font-size:clamp(76px,8.9vw,126px);letter-spacing:.005em}.hero h1 span{display:inline-block;position:relative}.hero h1 span:after{content:'';height:9px;background:var(--lime);position:absolute;bottom:0;left:0;right:0;z-index:-1}.lead{font-size:18px;line-height:1.65;margin:30px 0}.cta{display:inline-flex;justify-content:space-between;align-items:center;gap:48px;padding:21px 26px;background:var(--ink);color:white;text-decoration:none;border:2px solid var(--ink);font-size:28px;letter-spacing:.025em;transition:background .15s,color .15s}.cta:hover{background:var(--lime);color:var(--ink)}.cta:disabled{opacity:.5;cursor:wait}.cta span{font-family:Arial,sans-serif;font-size:28px}.micro{font-size:12px;margin-top:14px;color:#575750}.hero-art{height:480px;position:relative;min-width:0}.triangle{position:absolute;inset:10px -10px 30px -20px;background:var(--lime);clip-path:polygon(50% 0,100% 95%,0 79%);transform:rotate(9deg)}#hero-fly{position:absolute;inset:0 -10px 0 -35px;display:grid;place-items:center}#hero-fly canvas{width:100%;height:100%}.fly-fallback{font-family:Giorgio,Impact,sans-serif;font-size:85px;line-height:1;text-align:center;transform:rotate(-9deg)}.hero-art figcaption{position:absolute;bottom:0;left:15%;right:0;display:flex;justify-content:space-between;gap:16px;font-size:11px}.ribbon{background:var(--ink);color:var(--paper);display:flex;justify-content:center;gap:9vw;padding:24px 20px;font-size:38px;letter-spacing:.055em}.ribbon span+span:before{content:'✳';margin-right:8vw;color:var(--lime);font:26px Arial,sans-serif}.explanation,.under{display:grid;grid-template-columns:1fr 1.06fr;gap:100px;padding-block:98px}.explanation p:not(.eyebrow){max-width:580px}.text-link{font-size:13px;text-underline-offset:4px}.explanation .text-link{display:inline-block;margin-top:26px}.experiment{background:#efeee8;padding-block:80px;scroll-margin-top:0}.section-top{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:36px}.section-top>p{font-size:14px;max-width:355px}.recipes{padding:0;border:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.recipe{display:flex;flex-direction:column;position:relative;cursor:pointer;min-height:290px;padding:26px;border:2px solid transparent;transition:transform .15s,box-shadow .15s}.recipe:hover{transform:translateY(-4px)}.recipe:has(input:checked){border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}.recipe:has(input:focus-visible){outline:3px solid #1179a2;outline-offset:6px}.recipe input{position:absolute;top:25px;right:23px;accent-color:var(--ink);width:20px;height:20px;margin:0}.lager{background:var(--lime)}.apa{background:var(--pink)}.neipa{background:var(--blue)}.recipe-number{font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding-right:24px}.recipe strong{font-size:52px;line-height:1;margin:34px 0}.recipe-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;margin-top:auto}.selection{font:26px Arial,sans-serif}.launch{display:flex;align-items:center;gap:26px;margin-top:36px}.launch p{font-size:13px;max-width:370px}.experiment-note{font-size:12px;color:#53534c;max-width:800px;margin-top:25px}#brew{margin-top:60px}#brew[hidden]{display:none}.brew-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}#brew-loading{font-size:14px;margin:20px 0}iframe{display:block;border:0;width:100%;min-height:1100px;background:white}#brew .micro{max-width:700px}.under h2+p{margin-top:28px;font-size:14px}.faq details{padding:20px 0;border-bottom:1px solid var(--line)}.faq details:first-child{padding-top:0}.faq summary{list-style:none;font-size:17px;cursor:pointer;display:flex;justify-content:space-between;gap:24px;line-height:1.5}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:26px;line-height:1}.faq details[open] summary:after{content:'−'}.faq p{font-size:14px;margin-top:18px;color:#494943}.real-beer{background:var(--ink);color:var(--paper);padding-block:65px}.real-beer>.wrap{display:flex;justify-content:space-between;align-items:center;gap:30px}.real-beer .eyebrow{color:var(--lime)}.cta-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.footer{padding-block:32px;display:flex;justify-content:space-between;gap:22px;font-size:11px}.footer>a{font-size:13px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:absolute;top:0;left:0;z-index:20;padding:16px;background:white}
@media(max-width:1000px){.wrap{padding-inline:32px}.hero{min-height:550px}.hero h1{font-size:100px}.hero-art{height:420px}.hero-art figcaption{left:8%;flex-direction:column;gap:0}.explanation,.under{gap:50px}.recipe{padding:20px;min-height:275px}.recipe strong{font-size:46px}.recipe input{right:18px;top:20px}.real-beer>.wrap{align-items:start;flex-direction:column}.ribbon{gap:5vw;font-size:32px}.ribbon span+span:before{margin-right:5vw}}
@media(max-width:720px){.wrap{padding-inline:24px}.header{height:96px}.brand img{width:95px;height:67px}.header nav{gap:20px;font-size:21px}.hero{grid-template-columns:1fr;padding-top:28px;padding-bottom:30px;gap:4px}.hero h1{font-size:clamp(75px,14vw,105px)}.hero .eyebrow{font-size:10px}.lead{font-size:16px;margin:24px 0}.hero-art{height:330px;margin-top:10px}.triangle{inset:0 15% 25px;transform:rotate(9deg)}#hero-fly{inset:0 0 18px}.hero-art figcaption{left:0;right:0;flex-direction:row;font-size:10px}.ribbon{font-size:25px;gap:5vw;padding-block:19px}.ribbon span+span:before{display:none}.explanation,.under{grid-template-columns:1fr;gap:30px;padding-block:60px}.eyebrow{margin-bottom:18px}.section-top{display:block}.section-top>p{margin-top:22px}.experiment{padding-block:54px}.recipes{grid-template-columns:1fr;gap:16px}.recipe{min-height:180px;padding:22px}.recipe strong{font-size:47px;margin:20px 0}.recipe strong br{display:none}.recipe strong br:after{content:' '}.recipe-number{font-size:11px}.recipe-bottom{font-size:12px}.launch{align-items:stretch;flex-direction:column;gap:18px}.cta{font-size:27px;padding:19px 22px;gap:24px}.launch p{max-width:none}.brew-heading{align-items:start;flex-direction:column;gap:12px}#brew{margin-top:38px}.footer{flex-wrap:wrap}.footer span{order:3;width:100%}.real-beer{padding-block:50px}h2{font-size:58px}.faq summary{font-size:16px}.faq p{font-size:14px}iframe{min-height:1450px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.recipe:hover{transform:none}}

@media(max-width:420px){.header nav a:first-child{display:none}.header nav{font-size:22px}}

/* The greeting belongs to the fly and stays above its head at every breakpoint. */
.fly-speech{position:absolute;z-index:2;top:-8px;left:9%;width:max-content;max-width:min(85%,340px);margin:0;padding:22px 30px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:52% 48% 49% 51% / 48% 52% 48% 52%;box-shadow:4px 5px 0 var(--ink);font:400 36px/1.1 Giorgio,Impact,sans-serif;letter-spacing:.025em;white-space:normal;text-align:center;text-wrap:balance;transform:rotate(-6deg)}
.fly-speech:after{content:'';position:absolute;left:29%;bottom:-18px;width:25px;height:29px;background:var(--paper);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewY(-38deg);border-bottom-left-radius:3px}
@media(max-width:1000px){.fly-speech{font-size:30px;padding:19px 25px;left:5%;top:-12px}}
@media(max-width:720px){.hero-art{margin-top:48px}.fly-speech{top:-24px;left:14%;font-size:30px;padding:18px 25px}}
@media(max-width:420px){.fly-speech{left:9%;font-size:28px;padding:16px 22px}}

.fly-speech-tail{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}.has-speech-tail .fly-speech:after{display:none}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-actions .cta{font-size:24px;padding:18px 20px;gap:16px}.cta-shop{background:var(--lime);color:var(--ink)}.cta-shop:hover{background:white}.header .nav-shop{background:var(--lime);padding:8px 12px}.brew-shop{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 26px;margin:20px 0;background:var(--lime);border:1px solid var(--ink)}.brew-shop strong{font-family:Giorgio,Impact,sans-serif;font-size:32px;font-weight:400;line-height:1.1}.brew-shop p{font-size:13px;margin-top:6px}.brew-shop .cta{font-size:24px;white-space:nowrap;padding:16px 20px;gap:24px}.result-shop[hidden]{display:none}.shop-copy{font-size:15px;max-width:470px;margin-top:20px}.real-beer .cta{flex-shrink:0}
@media(max-width:720px){.brew-shop{flex-direction:column;align-items:stretch;padding:20px;gap:16px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .cta{font-size:25px}.brew-shop .cta{white-space:normal}.real-beer h2{font-size:52px}}

/* A mobile launch lands on the model, before promotion or technical detail. */
@media(max-width:760px){
 #brew{display:flex;flex-direction:column;margin-top:20px;scroll-margin-top:0}
 #brew[hidden]{display:none}
 #brew>.brew-heading{display:none}
 #brew>#brew-loading{order:0}
 #brew>#simulator{order:1;min-height:600px;scroll-margin-top:0}
 #brew>.brew-shop{order:2;margin:14px 0}
 #brew>#result-shop{order:3}
 #brew>.micro{order:4}
 .experiment>.wrap{padding-inline:12px}
 html{scroll-padding-top:0}
}

.mobile-shop-dock{display:none}
@media(max-width:760px){body.watching-brew .mobile-shop-dock{display:block;position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--lime);border:1px solid var(--ink);padding:12px 18px;box-shadow:2px 2px 0 var(--ink);font:24px/1 Giorgio,Impact,sans-serif;text-decoration:none}.watching-brew{padding-bottom:70px}}

/* Drawn arrows avoid iOS emoji font substitution. */
.arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.nav-shop{display:inline-flex;align-items:center;gap:8px}
.mobile-shop-dock .arrow-icon{margin-left:8px}