/* The canvas is the stage; native scrolling is the timeline. */
[hidden]{display:none!important}
.brew-story{height:580svh;position:relative;background:#10110f;isolation:isolate}
.brew-pin{height:100svh;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 76% 48%,#6a543221 0,transparent 58%),#10110f}
.brew-topline{position:absolute;top:29px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:5}
.brew-topline p{font-size:10px;letter-spacing:1.6px;color:#b6af9d}.brew-topline p span{color:#665f50;margin:0 13px}
.brew-topline>a{font-size:12px;color:#b6af9d;display:flex;align-items:center;gap:15px}.brew-topline>a:hover{color:var(--orange)}.brew-topline>a svg{width:16px;height:16px}
.brew-backdrop-word{position:absolute;right:5%;top:13%;font:italic clamp(100px,13vw,210px)/1 var(--serif);letter-spacing:-9px;white-space:nowrap;color:#ded3b90a;user-select:none;pointer-events:none}
.brew-copy{position:absolute;left:6%;top:25%;width:36%;z-index:4;pointer-events:none}.brew-copy a{pointer-events:auto}.brew-copy .eyebrow{font-size:11px;letter-spacing:2px;color:var(--orange)}
.brew-copy h1{font-size:clamp(42px,4.9vw,76px);line-height:1.07;letter-spacing:-3px;margin:25px 0}.brew-copy h1>span,.brew-copy h1>em{display:block}.brew-copy h1>em{color:#ecae76}.brew-copy>p:not(.eyebrow){font-size:15px;line-height:1.9;color:#b1b3a4;max-width:340px}.brew-copy>.button{margin-top:23px;padding:13px 20px;font-size:13px}
.brew-scroll-cue{display:flex;align-items:center;gap:14px;margin-top:37px;color:#dbd4c2;font-size:10px;letter-spacing:1.7px;line-height:1.7}.brew-scroll-cue small{font-size:11px;letter-spacing:0;color:#777e6b}.scroll-cue-line{height:38px;width:1px;background:#ffffff20;position:relative;overflow:hidden}.scroll-cue-line:after{content:'';position:absolute;left:0;top:-100%;height:100%;width:1px;background:var(--orange);animation:scroll-line 2.5s ease-in-out infinite}
.brew-stage{position:absolute;inset:8% -6% 10% 33%;z-index:2;touch-action:pan-y}
.brew-stage #coffee-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s;pointer-events:none;z-index:2;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent)}
.brew-stage.webgl-ready #coffee-scene{opacity:1}.brew-fallback{position:absolute;left:0;top:10%;width:100%;height:80%;object-fit:contain;mix-blend-mode:lighten;opacity:.75;transition:opacity .6s;mask-image:radial-gradient(ellipse,#000 30%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 30%,transparent 72%)}.webgl-ready .brew-fallback{opacity:0;pointer-events:none}
.scene-status{position:absolute;bottom:11%;left:20%;right:20%;text-align:center;color:#b5a98e;font-size:12px;z-index:3}.scene-load-button{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);z-index:3}
.brew-scene-note{position:absolute;right:7%;top:19%;display:flex;flex-direction:column;gap:4px;text-align:right;font-size:9px;letter-spacing:1.8px;color:#797f6d;z-index:3;pointer-events:none}
.brew-footer{position:absolute;bottom:30px;left:6%;right:6%;z-index:5}.brew-footer-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:19px;color:#8f9485;font-size:9px;letter-spacing:1.4px}.brew-footer-meta>div{display:flex;align-items:center;gap:33px}.brew-motion{font-size:10px;color:#949b85;letter-spacing:.4px;padding:4px 0}.brew-motion:hover{color:var(--orange)}#brew-counter{font-variant-numeric:tabular-nums;color:#d8c5a4;letter-spacing:2px}
.brew-progress-track{height:1px;background:#ffffff25;width:100%;position:relative}.brew-progress-track>span{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;will-change:transform}
.brew-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:18px;gap:16px}.brew-steps button{text-align:left;padding:0;font-size:13px;color:#747c68;display:flex;gap:15px;align-items:center;transition:color .3s}.brew-steps button>span{font:italic 12px var(--serif);color:#69715c}.brew-steps button:hover,.brew-steps button[aria-current=step]{color:#f1ebdb}.brew-steps button[aria-current=step]>span{color:var(--orange)}.brew-steps button.is-complete{color:#b3b6a6}.brew-steps button:last-child{justify-content:flex-end}
.brew-story[data-step="4"] .brew-scroll-cue{display:none}.brew-story[data-step="4"] .brew-scene-note{color:#a98e66}.motion-paused .scroll-cue-line:after{animation-play-state:paused}.brew-noscript{padding:35px 8%;color:#c6c4b8;line-height:2}
@keyframes scroll-line{0%{top:-100%}60%,100%{top:100%}}
@media(min-width:1700px){.brew-copy{left:max(6%,calc((100vw - 1440px)/2));width:32%}.brew-topline,.brew-footer{left:max(6%,calc((100vw - 1440px)/2));right:max(6%,calc((100vw - 1440px)/2))}.brew-stage{right:0;left:34%}}
@media(max-width:1050px) and (min-width:761px){.brew-copy{width:39%;top:24%}.brew-copy h1{font-size:clamp(43px,5.4vw,57px);letter-spacing:-2px}.brew-copy>p:not(.eyebrow){font-size:14px;max-width:280px}.brew-stage{left:31%;right:-14%}.brew-scene-note{right:6%;font-size:8px}.brew-steps button{font-size:12px;gap:10px}.brew-topline p{font-size:9px;letter-spacing:1px}}
@media(max-width:760px){.brew-story{height:520svh}.brew-topline{top:20px;left:6%;right:6%;gap:10px}.brew-topline p{font-size:8px;letter-spacing:1.1px}.brew-topline p span{margin:0 6px}.brew-topline>a{font-size:10px;gap:6px;white-space:nowrap}.brew-topline>a svg{width:13px;height:13px}.brew-copy{left:7%;top:10%;width:86%;pointer-events:none}.brew-copy .eyebrow{font-size:9px;letter-spacing:1.8px}.brew-copy h1{font-size:clamp(35px,8.8vw,55px);line-height:1.04;letter-spacing:-1.7px;margin:13px 0}.brew-copy>p:not(.eyebrow){font-size:12px;line-height:1.7;max-width:345px}.brew-scroll-cue{display:none}.brew-stage{inset:32% -12% 11% -12%;}.brew-stage #coffee-scene{mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}.brew-backdrop-word{font-size:100px;letter-spacing:-5px;top:42%;right:0}.brew-scene-note{top:auto;bottom:19%;right:7%;font-size:7px;letter-spacing:1px}.brew-footer{left:7%;right:7%;bottom:24px}.brew-footer-meta{font-size:7px;letter-spacing:.6px;margin-bottom:15px;gap:10px}.brew-footer-meta>div{gap:12px}.brew-motion{font-size:8px}#brew-counter{font-size:8px;letter-spacing:1px}.brew-steps{gap:7px;margin-top:13px}.brew-steps button{font-size:10px;line-height:1.4;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.brew-steps button>span{font-size:10px}.brew-steps button:last-child{justify-content:flex-start}.brew-copy>.button{position:absolute;top:calc(100% + 8px);margin:0;padding:8px 13px;font-size:10px;gap:18px}.brew-copy>.button svg{width:14px;height:14px}.scene-status{font-size:10px;bottom:9%}.scene-load-button{font-size:11px;padding:10px 15px}.brew-topline p{max-width:180px}.brew-story[data-step="4"] .brew-stage{top:36%}}
@media(max-height:650px) and (min-width:761px){.brew-copy{top:18%}.brew-copy h1{font-size:48px;margin:15px 0}.brew-copy>p:not(.eyebrow){font-size:13px;line-height:1.7}.brew-scroll-cue{margin-top:18px}.brew-footer{bottom:20px}.brew-stage{top:6%;bottom:10%}.brew-copy>.button{padding:9px 15px;margin-top:13px}.brew-scene-note{top:16%}}
@media(max-height:680px) and (max-width:760px){.brew-copy{top:9%}.brew-copy h1{font-size:34px;margin:9px 0}.brew-copy>p:not(.eyebrow){font-size:11px;line-height:1.5;max-width:310px}.brew-stage{top:34%;bottom:13%}.brew-footer{bottom:16px}.brew-scene-note{display:none}.brew-topline{top:13px}}
@media(prefers-reduced-motion:reduce){.scroll-cue-line:after{animation:none}.brew-stage #coffee-scene,.brew-fallback{transition:none}.brew-steps button{transition:none}}