.draft-banner{text-align:center;background:#dfd0b6;color:#443429;font-size:12px;letter-spacing:.06em;padding:10px 18px}.story-intro{display:grid;grid-template-columns:1fr 1.35fr;gap:36px;align-items:center;padding-block:46px 30px}.story-intro h1{font-size:clamp(48px,5vw,76px);line-height:1.04;letter-spacing:-.04em;margin:20px 0}.story-intro .lead{font-size:19px;line-height:1.65;max-width:43ch;margin:20px 0}.story-intro>img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.chapter-navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;border-block:1px solid var(--line)}.chapter-navigation nav{display:flex;flex-wrap:wrap;gap:14px 22px}.chapter-navigation a{font-size:13px;text-decoration:none}.chapter-navigation a[aria-current="step"]{color:#92502b;text-decoration:underline;text-underline-offset:5px}.story-motion-toggle{flex-shrink:0;font:inherit;font-size:13px;color:var(--ink);border:1px solid #bbaa8e;background:transparent;padding:11px 15px;border-radius:3px;cursor:pointer}.story-motion-toggle:focus-visible{outline:3px solid #92502b;outline-offset:3px}.story-trail{position:relative}.story-trail:before{content:"";position:absolute;left:50%;top:30px;bottom:30px;border-left:1px solid #c6b393;z-index:0}.story-chapter{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;padding-block:50px;scroll-margin-top:110px}.story-chapter:before{content:"";position:absolute;left:calc(50% - 5px);top:50%;width:10px;height:10px;background:#92502b;transform:rotate(45deg);box-shadow:0 0 0 10px #f5eedf}.story-chapter:nth-child(even) .chapter-illustration{order:2}.story-chapter:nth-child(even) .chapter-copy{order:1}.chapter-illustration{position:relative;aspect-ratio:3/2}.chapter-illustration img{width:100%;height:100%;object-fit:contain;display:block}.chapter-copy{position:relative;z-index:1;background:#f5eedf}.chapter-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.5vw,49px);line-height:1.14;letter-spacing:-.025em;margin:18px 0}.chapter-story{font-size:18px;line-height:1.8;color:#514a3f;max-width:49ch}.chapter-copy details{margin-top:24px;border-top:1px solid #c9baa0;padding-top:16px}.chapter-copy summary{cursor:pointer;font-size:14px;font-weight:600;color:#815030;min-height:30px}.chapter-copy details p{font-size:15px;line-height:1.75;margin-top:14px}.story-ending{text-align:center;border-top:1px solid var(--line);padding-block:60px 75px}.story-ending h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,62px);line-height:1.13;margin:20px 0}.story-ending>p{max-width:63ch;margin:22px auto;line-height:1.75}.story-ending .actions{justify-content:center}.story-note{font-size:13px;color:var(--muted);padding-top:28px}.story-effect{position:absolute;pointer-events:none;opacity:0}.steam-effect{width:15%;height:32%;left:36%;top:-4%}#hops .steam-effect{left:69%;top:5%}.grain-effect{left:58%;top:69%;width:8%;height:16%}.grain-effect i{position:absolute;width:5px;height:8px;background:#b88a38;border-radius:60%;top:0;left:20%}.grain-effect i:nth-child(2){left:55%;animation-delay:.35s!important}.grain-effect i:nth-child(3){left:80%;animation-delay:.65s!important}.yeast-effect{left:22%;top:19%;width:9%;height:9%}.yeast-effect i{position:absolute;width:8px;height:8px;border:1px solid #cf954a;border-radius:50%}.yeast-effect i:nth-child(2){left:20%;top:30%;animation-delay:.3s!important}.yeast-effect i:nth-child(3){left:60%;top:50%;animation-delay:.6s!important}.time-effect{left:47%;top:23%;font-size:19px;color:#a16b35}.motion-on .chapter-seen .steam-effect{animation:journey-steam 4s ease-out 2}.motion-on .chapter-seen .grain-effect{opacity:1}.motion-on .chapter-seen .grain-effect i{animation:journey-grain 1.3s ease-in 3}.motion-on .chapter-seen .yeast-effect{opacity:1}.motion-on .chapter-seen .yeast-effect i{animation:journey-yeast 2.5s ease-out 2}.motion-on .chapter-seen .time-effect{animation:journey-glint 4s ease-out 1}.motion-off .story-effect{display:none}.no-js .story-motion-toggle{display:none}@keyframes journey-steam{0%{opacity:0;transform:translateY(12px)}30%{opacity:.35}100%{opacity:0;transform:translateY(-15px)}}@keyframes journey-grain{0%{opacity:0;transform:translateY(0)}20%{opacity:.8}100%{opacity:0;transform:translateY(25px)}}@keyframes journey-yeast{0%{opacity:0;transform:scale(.8)}40%{opacity:.7}100%{opacity:0;transform:scale(1.1)}}@keyframes journey-glint{0%,100%{opacity:0}50%{opacity:.55}}
@media(max-width:950px){.story-chapter{gap:42px;padding-block:45px}.story-trail:before,.story-chapter:before{display:none}.chapter-navigation{align-items:flex-start}.chapter-navigation nav{gap:12px}.story-intro{gap:22px}.chapter-story{font-size:17px}}
@media(max-width:650px){.story-intro{grid-template-columns:1fr;padding-block:28px}.story-intro h1{font-size:50px}.story-intro>img{margin-top:6px}.chapter-navigation{flex-direction:column;padding-block:18px}.chapter-navigation nav{gap:12px 20px}.story-chapter{grid-template-columns:1fr;gap:22px;padding-block:35px;border-bottom:1px solid var(--line);scroll-margin-top:95px}.story-chapter:nth-child(even) .chapter-illustration,.story-chapter:nth-child(even) .chapter-copy{order:initial}.chapter-copy h2{font-size:36px}.chapter-story{font-size:17px}.chapter-illustration{max-width:550px;width:100%;margin:auto}.story-ending{padding-block:45px}.story-intro .lead{font-size:18px}.story-motion-toggle{min-height:44px}.chapter-navigation a{display:inline-flex;align-items:center;min-height:36px}}
@media(prefers-reduced-motion:reduce){.story-effect{display:none!important}.brew-story *{scroll-behavior:auto!important}}

.story-intro>img{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);-webkit-mask-composite:source-in}