.roast-story{position:relative;height:100svh;min-height:700px;background:#bdc1ac}.roast-stage{--roast-bg:#bdc1ac;--roast-ink:#23271f;--roast-muted:#5e6455;position:relative;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:var(--roast-bg);color:var(--roast-ink)}.js:not(.reduced-motion) .roast-story:not(.roast-static){height:700svh;min-height:3900px}.js:not(.reduced-motion) .roast-story:not(.roast-static) .roast-stage{position:sticky}.roast-top{position:absolute;z-index:4;top:clamp(90px,11svh,130px);left:clamp(24px,4.5vw,85px);right:clamp(24px,4.5vw,85px);display:flex;justify-content:space-between;align-items:flex-start;gap:40px;font-size:10px;line-height:1.7}.roast-top>p:first-child{max-width:180px;letter-spacing:.09em;font-weight:500;text-transform:uppercase;margin:0}.roast-top>p:last-child{max-width:205px;margin:0;font-size:12px;font-weight:400;line-height:1.8;color:var(--roast-muted);text-align:right}.roast-readout{position:absolute;z-index:4;left:clamp(24px,4.5vw,85px);top:clamp(137px,18svh,210px);display:flex;align-items:flex-start;gap:3px;font-variant-numeric:tabular-nums;color:var(--roast-ink);pointer-events:none}.roast-readout>span:first-child{font-size:clamp(65px,8.4vw,130px);font-weight:350;line-height:.9;letter-spacing:-.085em}.roast-readout>span:last-child{font-size:clamp(20px,2.7vw,43px);font-weight:350;line-height:1;letter-spacing:-.055em;margin-top:1px}.roast-word{position:absolute;z-index:1;left:50%;top:50%;width:max-content;max-width:none;transform:translate(-50%,calc(-40% + var(--roast-word-y,0px)));margin:0;font-size:clamp(120px,18.5vw,330px);font-weight:600;line-height:1;letter-spacing:-.075em;white-space:nowrap;pointer-events:none;color:var(--roast-ink)}.roast-viewport{position:absolute;z-index:2;inset:12% 0 9%;pointer-events:none}.roast-canvas{display:block;width:100%;height:100%;pointer-events:none}.roast-fallback{position:absolute;width:min(43vw,580px);height:75%;max-height:570px;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;opacity:1;transition:opacity .4s}.roast-ready .roast-fallback{opacity:0}.roast-bottom{position:absolute;z-index:5;left:clamp(24px,4.5vw,85px);right:clamp(24px,4.5vw,85px);bottom:clamp(30px,5svh,58px);display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.roast-bottom>p{max-width:260px;font-size:10px;line-height:1.8;font-weight:400;color:var(--roast-muted);margin:0}.roast-tabs{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.roast-tabs button{font:inherit;font-size:10px;font-weight:400;letter-spacing:-.01em;padding:10px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--roast-muted);cursor:pointer;transition:color .2s,border-color .2s}.roast-tabs button[aria-current=step],.roast-tabs button.is-active,.roast-tabs button:hover{color:var(--roast-ink);border-bottom-color:var(--roast-ink)}.roast-tabs button:focus-visible{outline:1px solid currentColor;outline-offset:5px}.roast-static{height:100svh;min-height:700px}.roast-static .roast-stage{position:relative;height:100%;min-height:700px;background:#e8dfd1}.roast-static .roast-canvas{display:none}.roast-static .roast-fallback{opacity:1}.roast-static .roast-tabs{display:none}.roast-static .roast-word{opacity:.75}.roast-static .roast-readout{display:none}html:not(.js) .roast-readout,html:not(.js) .roast-tabs{display:none}
#brew-viewport{position:relative;isolation:isolate}#brew-viewport .roast-brew-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}#brew-viewport.brew-3d-ready .brew-fallback{opacity:0}#brew-viewport.brew-reduced-motion .roast-brew-canvas{display:none}#brew-viewport.brew-reduced-motion .brew-fallback{opacity:1}
@media(min-width:1700px){.roast-word{font-size:19.5vw}.roast-top{font-size:11px}.roast-top>p:last-child{font-size:14px;max-width:250px}.roast-tabs button{font-size:11px}.roast-bottom>p{font-size:11px;max-width:300px}}
@media(max-width:900px){.roast-top{top:100px}.roast-readout{top:155px}.roast-top>p:last-child{font-size:11px;max-width:180px}.roast-word{font-size:18.8vw}.roast-viewport{inset:15% -4% 11%}.roast-bottom{gap:25px}.roast-tabs{gap:16px}.roast-tabs button{font-size:9px}.roast-bottom>p{font-size:9px;max-width:210px}}
@media(max-width:600px){.js:not(.reduced-motion) .roast-story:not(.roast-static){height:650svh;min-height:3800px}.roast-stage{min-height:600px}.roast-top{top:100px;left:24px;right:24px;gap:25px}.roast-top>p:first-child{font-size:8px;max-width:115px}.roast-top>p:last-child{font-size:10px;max-width:150px}.roast-readout{left:24px;top:157px}.roast-readout>span:first-child{font-size:73px}.roast-readout>span:last-child{font-size:25px}.roast-word{top:49%;font-size:19.6vw;letter-spacing:-.075em;transform:translate(-50%,calc(-50% + var(--roast-word-y,0px)))}.roast-viewport{inset:22% -8% 15%}.roast-fallback{width:76vw;max-height:430px;height:87%}.roast-bottom{left:24px;right:24px;bottom:30px;flex-direction:column;align-items:flex-start;gap:20px}.roast-bottom>p{font-size:9px;max-width:230px}.roast-tabs{width:100%;justify-content:space-between;gap:8px;flex-wrap:nowrap}.roast-tabs button{font-size:8px;white-space:nowrap}.roast-static{height:100svh;min-height:700px}.roast-static .roast-stage{min-height:700px}.roast-static .roast-word{top:42%}}
@media(max-height:679px){.roast-stage{min-height:0}.roast-top{top:83px}.roast-readout{top:120px}.roast-readout>span:first-child{font-size:68px}.roast-readout>span:last-child{font-size:24px}.roast-bottom{bottom:20px}.roast-top>p:last-child{font-size:10px}.roast-bottom>p{font-size:8px}.roast-viewport{inset:15% 0 8%}}
@media(prefers-reduced-motion:reduce){.roast-story{height:100svh;min-height:700px}.roast-stage{position:relative;min-height:700px}.roast-canvas{display:none}.roast-fallback,.roast-ready .roast-fallback{opacity:1;transition:none}.roast-tabs{display:none}#brew-viewport .roast-brew-canvas{display:none}#brew-viewport .brew-fallback{opacity:1}}
