@font-face{font-family:Instrument;src:url('./assets/instrument-serif.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url('./assets/instrument-serif-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('./assets/dm-sans.woff2') format('woff2');font-style:normal;font-weight:400 600;font-display:swap}
:root{--cream:#f3ecdf;--ink:#26221c;--muted:#736b5c;--line:#b6ac9560;--serif:Instrument,Georgia,serif;--sans:DM,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#ada18b var(--cream)}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}body.dialog-open{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #936c3a;outline-offset:5px}a{color:inherit;text-decoration:none}button{border:0;background:none}button,a{touch-action:manipulation}.skip-link{position:fixed;top:-100px;left:12px;z-index:100;padding:12px;background:var(--ink);color:white}.skip-link:focus{top:12px}
.site-header{height:104px;position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 6.5vw;z-index:20;gap:30px;background:linear-gradient(var(--cream) 28%,#f3ecdfd9 76%,#f3ecdf00)}.wordmark{font-family:var(--serif);font-size:31px;letter-spacing:-1.2px;white-space:nowrap;line-height:1}.wordmark span{display:inline-block;font-size:25px;margin:0 5px;transform:translateY(-1px);color:#8d8068}.main-nav{display:flex;align-items:center;gap:24px;font-size:10px;white-space:nowrap;margin-left:auto;margin-right:20px}.main-nav a,.main-nav button{position:relative;padding:8px 0;transition:opacity .2s}.main-nav a:hover,.main-nav button:hover{opacity:.55}.main-nav .active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--ink)}.header-actions{display:flex;align-items:center;gap:26px}.login-link{padding:8px 0;font-size:10px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:15px 23px;border-radius:100px;font-size:10px;font-weight:500;line-height:1.2;border:1px solid transparent;transition:background .25s,transform .25s,color .25s;white-space:nowrap}.pill span{font-size:14px;line-height:1}.pill:hover{transform:translateY(-2px)}.pill-dark{background:var(--ink);color:#fffcf6}.pill-dark:hover{background:#56412d}.pill-outline{border-color:#7e755c8c;background:#f7f2e744}.pill-outline:hover{background:var(--ink);color:var(--cream)}.pill-light{background:#fffaf0e8;color:var(--ink);box-shadow:0 5px 22px #624c2b12}.pill.compact{padding:13px 19px;gap:19px}.nav-toggle{display:none;width:30px;height:30px;padding:6px}.nav-toggle span{display:block;height:1px;background:var(--ink);margin:6px 0}
.story{height:490svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:clip;isolation:isolate;background:#f3ecdf}.ambient-light{position:absolute;inset:0;background:radial-gradient(ellipse at 66% 45%,#ead5ae55,transparent 55%),linear-gradient(110deg,#faf5e633,#eadfca12);z-index:0}.cream-floor{position:absolute;left:-10%;right:-10%;height:20%;bottom:-11%;background:#fffdf565;border-top:1px solid #fffcf480;transform:rotate(4deg);z-index:0;transition:opacity 1s}.marble-band{position:absolute;left:-8%;right:-8%;bottom:-9vh;height:35vh;background:#d7b17c url('./assets/coffee-marble.png') center/cover;transform:rotate(5deg) translateY(10%);opacity:0;transition:opacity .6s;z-index:0;filter:saturate(.9) contrast(.67) brightness(1.16);mask-image:linear-gradient(to bottom,#000, #000 90%,transparent)}.stage[data-scene='2'] .marble-band,.stage[data-scene='3'] .marble-band{opacity:1}.stage[data-scene='2'] .cream-floor,.stage[data-scene='3'] .cream-floor{opacity:0}
#coffee-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .9s}#coffee-canvas canvas{display:block;width:100%;height:100%}.scene-ready #coffee-canvas{opacity:1}.canvas-fallback{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .7s}.scene-ready .canvas-fallback{opacity:0}.fallback-bean{position:absolute;width:26vw;height:40vw;max-height:60vh;left:50%;top:25%;border-radius:48% 49% 46% 44%;background:radial-gradient(ellipse at 29% 25%,#b17a48,transparent 35%),linear-gradient(92deg,#3e2517 1%,#8e5a35 30%,#4b2a1b 47%,#28180e 49%,#74452a 53%,#8a5533 70%,#3e281c);box-shadow:inset 25px -25px 50px #281b19a0,25px 50px 70px #805e2b25;transform:rotate(13deg)}
.scene-panel{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transform:translateY(30px);will-change:transform,opacity}.scene-panel.is-active{pointer-events:auto}.copy-block{position:absolute;left:8%;top:20%;max-width:38%}.eyebrow{text-transform:uppercase;font-size:9px;letter-spacing:1.8px;font-weight:600;margin:0 0 22px;line-height:1.4}.copy-block h1,.copy-block h2{font:400 clamp(80px,9.6vw,155px)/.82 var(--serif);letter-spacing:-.045em;margin:0 0 27px;text-wrap:balance}.copy-block h1 span,.copy-block h2 span{display:block}.body-copy{font-size:11px;line-height:1.8;color:#6b6354;letter-spacing:.01em;margin:0 0 23px}.copy-block h1{max-width:490px}.chapter-number{font:400 43px/1 var(--serif);display:block;margin-bottom:13px}.chapter-number+.eyebrow{font-size:8px;margin-bottom:17px}.scene-caption{position:absolute;right:8%;bottom:14%;font-size:8px;line-height:1.8;letter-spacing:1.6px;color:#81755f}.brew-spec{position:absolute;right:9%;bottom:17%;font-size:8px;color:#867960;letter-spacing:1.5px}.brew-spec>div{display:flex;align-items:center;gap:18px;margin-top:15px;color:#4c3c2a}.brew-spec b{font:400 33px/1 var(--serif);letter-spacing:-1px}.brew-spec b span{font:400 10px/1 var(--sans);padding-left:4px;letter-spacing:0}.brew-spec i{font-size:18px;font-style:normal}.brew-spec p{font-size:8px;letter-spacing:0;margin-top:13px}.scene-nav{position:absolute;right:3.2%;top:47%;z-index:8;display:flex;flex-direction:column;gap:10px}.scene-nav button{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:5px 0;width:43px}.scene-nav span{font-size:8px;opacity:0;transition:opacity .3s;color:#756b5a}.scene-nav i{display:block;border:1px solid #84775f80;border-radius:50%;width:4px;height:4px;transition:transform .3s,background .3s}.scene-nav .selected i{background:var(--ink);border-color:var(--ink);transform:scale(1.4)}.scene-nav .selected span,.scene-nav button:hover span{opacity:1}
#sip .copy-block{top:25%}#sip h2{font-size:clamp(67px,7.3vw,118px);line-height:.93}#bloom .copy-block{top:24%}#bloom h2{font-size:clamp(89px,10vw,165px);line-height:.84}.taste-intro{position:absolute;top:23%;left:8%}.taste-intro h2{font:400 clamp(40px,4.9vw,80px)/.92 var(--serif);letter-spacing:-.035em;margin:0 0 22px}.taste-heading{position:absolute;top:22%;left:53%;right:5%}.taste-heading h2{font:400 clamp(58px,6.5vw,108px)/.91 var(--serif);letter-spacing:-.04em;margin:0}.taste-heading .eyebrow{margin-bottom:14px}.flavor-tag{position:absolute;background:#fffdf2e6;border:1px solid #fffef75e;box-shadow:0 8px 20px #7f59280b;border-radius:5px;min-width:144px;text-align:left;padding:15px 30px 14px 15px;backdrop-filter:blur(10px);transform:rotate(-4deg);transition:transform .25s,background .25s}.flavor-tag span{display:block;font-size:12px;letter-spacing:.2px;font-weight:500}.flavor-tag small{font-size:8px;color:#887c67;display:block;margin-top:7px}.flavor-tag i{position:absolute;top:12px;right:12px;font-style:normal;font-size:12px}.flavor-tag:hover{background:#fffefa;transform:translateY(-4px) rotate(0)}.tag-origin{left:28%;top:58%;transform:rotate(5deg)}.tag-roast{left:73%;top:55%;transform:rotate(5deg)}.tag-flavor{left:70%;top:77%;transform:rotate(-5deg)}.taste-cta{position:absolute;left:49%;bottom:12%;transform:translateX(-50%)}.taste-cta:hover{transform:translateX(-50%) translateY(-3px)}
.stage-footer{position:absolute;bottom:28px;left:8%;right:8%;z-index:7;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#786e5c}.scroll-cue{display:flex;align-items:center;gap:23px;font-size:8px;text-transform:uppercase;letter-spacing:1px;padding:8px 0}.scroll-cue span{font-size:16px;animation:scrollHint 2.5s ease-in-out infinite}.ritual-note{font-size:7px;letter-spacing:1.6px}.replay{text-transform:uppercase;font-size:8px;letter-spacing:1px;padding:8px 0;margin-right:35px;display:flex;align-items:center;gap:10px}.replay span{font-size:12px}.floating-menu{position:absolute;right:3.2%;bottom:26px;z-index:10;border-radius:100%;width:37px;height:37px;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 5px 20px #30201115;transition:transform .3s}.floating-menu:hover{transform:rotate(12deg)}.floating-menu span{height:1px;width:12px;background:#eee6d6}.floating-menu span:nth-child(2){width:9px}.end-note{min-height:150px;position:relative;background:#f8f3e9;display:flex;align-items:center;justify-content:space-between;padding:35px 8%;gap:20px;border-top:1px solid #ded2bd66}.end-note .wordmark{font-size:25px}.end-note p{font:400 23px/1.2 var(--serif);color:#82755d}.text-button{font-size:9px;text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid #958870;padding:7px 0}
dialog{border:1px solid #e4d8c6;border-radius:8px;max-width:650px;width:calc(100% - 36px);max-height:88svh;padding:48px 48px 40px;background:#f7f1e6;color:var(--ink);box-shadow:0 30px 140px #1e180f55;overflow:auto}dialog::backdrop{background:#33281b55;backdrop-filter:blur(12px)}.dialog-close{position:absolute;right:17px;top:13px;font-size:27px;font-weight:400;color:#6c604c;width:30px;height:30px;line-height:1}.dialog-eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:1.7px;color:#85765e;margin:0 0 15px}.dialog-title{font:400 58px/.97 var(--serif);letter-spacing:-1.5px;margin:0 0 22px}.dialog-copy{font-size:12px;line-height:1.8;color:#7b6e58;max-width:440px}.choice-list{display:grid;gap:9px;margin:28px 0 20px}.choice{border:1px solid #bfb19a66;padding:16px 19px;border-radius:4px;display:flex;justify-content:space-between;align-items:center;text-align:left;background:#fffaf242;font-size:12px;transition:background .2s}.choice:hover{background:#e9dbc4}.choice small{font-size:9px;color:#8c7c62}.quiz-back{margin-top:14px;font-size:9px;color:#8d7e65;padding:8px 0}.collection{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}.coffee-pack{height:160px;position:relative;display:flex;align-items:center;justify-content:center;background:#e4d4b988;border-radius:3px}.bag{width:85px;height:120px;padding:25px 9px 12px;background:linear-gradient(100deg,#90704e,#b28b62 35%,#a3825c 70%,#785c40);box-shadow:9px 10px 12px #5c3f2722;transform:rotate(-5deg);border-radius:4px 4px 7px 7px;position:relative;color:#f9edd9;text-align:center}.bag:before{position:absolute;content:'';top:8px;left:0;right:0;height:1px;background:#d3b58a55}.bag b{font:400 15px/1 var(--serif);display:block;margin-bottom:15px}.bag span{font-size:6px;text-transform:uppercase;letter-spacing:1px}.bag strong{font:400 21px/.9 var(--serif);display:block;margin:5px 0}.bag small{font-size:6px}.coffee-card:nth-child(2) .bag{background:linear-gradient(100deg,#8e876c,#b7af8d 35%,#aaa482 70%,#847f65);transform:rotate(3deg)}.coffee-card:nth-child(3) .bag{background:linear-gradient(100deg,#6e4936,#8b5c44 35%,#8a5e44 70%,#5b3c2e);transform:rotate(-2deg)}.coffee-card h3{font:400 25px/1 var(--serif);margin:17px 0 8px}.coffee-card p{font-size:9px;line-height:1.6;color:#8c7b60;margin:0 0 12px}.coffee-card button{font-size:8px;border-bottom:1px solid #9b8b70;padding:6px 0}.dialog-footnote{font-size:9px;line-height:1.6;color:#94866d;margin:22px 0 0}.guide-steps{margin-top:30px}.guide-step{display:grid;grid-template-columns:32px 1fr;gap:16px;border-top:1px solid #b5a58b55;padding:16px 0}.guide-step>b{font:400 29px/1 var(--serif)}.guide-step h3{font-size:11px;font-weight:500;margin:2px 0 5px}.guide-step p{font-size:11px;line-height:1.7;color:#8b7b63;margin:0}.email-field{width:100%;border:0;border-bottom:1px solid #ad9d82;background:transparent;padding:13px 0;margin:15px 0 22px;border-radius:0;color:var(--ink);font:400 12px var(--sans)}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);background:var(--ink);color:#f7f0e3;border-radius:50px;padding:15px 25px;font-size:11px;z-index:100;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;box-shadow:0 10px 50px #36251720;max-width:85vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes scrollHint{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@media(min-width:1800px){.site-header{height:124px}.wordmark{font-size:36px}.main-nav{font-size:12px;gap:30px}.body-copy{font-size:13px}.eyebrow{font-size:11px}.pill{font-size:12px;padding:17px 26px}.copy-block{top:23%}.flavor-tag{padding:19px 35px 18px 21px;min-width:175px}.flavor-tag span{font-size:15px}.flavor-tag small{font-size:10px}.stage-footer{bottom:35px}}
@media(max-width:1100px){.site-header{padding:0 5%;gap:20px}.main-nav{gap:17px;font-size:9px;margin-right:5px}.main-nav button:nth-last-child(1),.main-nav button:nth-last-child(2){display:none}.header-actions{gap:17px}.copy-block{left:7%;top:23%}.copy-block h1{font-size:13vw}.scene-caption{font-size:7px;right:8%;bottom:15%}.body-copy{font-size:10px}.taste-heading{left:52%;right:4%}.flavor-tag{min-width:117px;padding:12px 23px 11px 12px}.flavor-tag span{font-size:10px}.flavor-tag small{font-size:7px}.tag-origin{left:24%}.tag-roast{left:76%}.tag-flavor{left:73%}.eyebrow{font-size:8px}}
@media(max-width:700px){.site-header{height:83px;padding:0 6%;gap:15px}.wordmark{font-size:28px}.wordmark span{font-size:23px}.header-actions{gap:16px}.login-link{display:none}.pill.compact{padding:11px 15px;font-size:9px;gap:17px}.nav-toggle{display:block}.main-nav{display:none;position:absolute;left:0;right:0;top:72px;margin:0;padding:30px 7% 37px;background:#f3ecdfef;backdrop-filter:blur(18px);border-bottom:1px solid #b5a58b33;font-size:14px;gap:20px;align-items:flex-start}.main-nav.is-open{display:flex;flex-direction:column}.main-nav button:nth-last-child(1),.main-nav button:nth-last-child(2){display:block}.stage{min-height:600px}.story{height:500svh}.copy-block{top:16%;left:7%;max-width:72%}.copy-block h1{font-size:18vw;line-height:.79;margin-bottom:18px;letter-spacing:-.04em}.copy-block .eyebrow{margin-bottom:15px;font-size:7px;letter-spacing:1.4px}.body-copy{font-size:9px;line-height:1.8;max-width:190px;margin-bottom:18px}.body-copy br.desktop-only{display:none}.pill{padding:12px 17px;font-size:9px;gap:23px}.scene-caption{right:8%;bottom:12%;font-size:6px;letter-spacing:1px}.cream-floor{bottom:-12%;height:19%}.marble-band{height:31vh;bottom:-4vh}.stage-footer{left:7%;right:7%;bottom:20px;gap:20px}.ritual-note{display:none}.replay{margin-right:39px;font-size:7px}.scroll-cue{font-size:7px;gap:12px}.scene-nav{right:5%;top:44%;gap:9px}.scene-nav span{font-size:7px}.scene-nav button{width:30px;gap:9px}.floating-menu{right:5%;bottom:21px;width:31px;height:31px}.chapter-number{font-size:32px;margin-bottom:12px}#bloom .copy-block{top:16%}#bloom h2{font-size:20vw;line-height:.86}#bloom .body-copy{max-width:170px}.brew-spec{right:8%;bottom:13%;font-size:6px;letter-spacing:1px}.brew-spec>div{margin-top:9px;gap:12px}.brew-spec b{font-size:24px}.brew-spec p{font-size:7px}#sip .copy-block{top:18%}#sip h2{font-size:14.5vw;line-height:.9}.taste-intro{top:17%;left:7%}.taste-intro .eyebrow{font-size:7px;margin-bottom:12px}.taste-intro h2{font-size:10vw;line-height:.92;margin-bottom:14px}.taste-intro .body-copy{max-width:150px;font-size:8px}.taste-heading{top:33%;left:44%;right:4%}.taste-heading .eyebrow{font-size:6px;letter-spacing:1px;margin-bottom:11px}.taste-heading h2{font-size:11vw;line-height:.95}.flavor-tag{min-width:100px;padding:10px 20px 10px 10px;border-radius:4px}.flavor-tag span{font-size:9px}.flavor-tag small{font-size:6px;margin-top:5px}.flavor-tag i{font-size:9px;top:8px;right:8px}.tag-origin{left:6%;top:63%}.tag-roast{left:auto;right:8%;top:57%}.tag-flavor{left:auto;right:6%;top:79%}.taste-cta{bottom:12%;left:44%;font-size:8px;gap:15px;padding:11px 17px}.end-note{padding:28px 7%;min-height:145px;flex-wrap:wrap}.end-note p{font-size:20px;margin:0}.end-note .text-button{font-size:8px}dialog{padding:43px 25px 28px}.dialog-title{font-size:47px}.collection{gap:9px}.coffee-pack{height:130px}.bag{width:65px;height:100px;padding-top:21px}.bag b{font-size:12px;margin-bottom:10px}.bag strong{font-size:17px}.coffee-card h3{font-size:21px}.coffee-card p{font-size:8px}.dialog-copy{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-cue span{animation:none}*,*:before,*:after{transition-duration:.01s!important}.scene-panel{will-change:auto}}

.stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;z-index:1;pointer-events:none;background:linear-gradient(transparent,#f3ecdfeb)}

@media(max-width:700px){.scene-caption,.brew-spec{display:none}}

/* The liquid background is now animated in the WebGL composition. */
.scene-ready .stage .marble-band{display:none}