/* One scene: warm paper, coffee choreography, and a single editorial voice. */
:root { --cream:#f3e5ce; --espresso:#352014; --caramel:#a36132; --muted:#765037; }
html,body { background:#f3e5ce; color:#352014; }
.navbar { height:94px; padding:0 5vw; background:linear-gradient(#f3e5cf 10%,#f3e5cfe8 70%,#f3e5cf00); backdrop-filter:none; -webkit-backdrop-filter:none; }
.brand-logo { align-items:flex-start; flex-shrink:0; }
.brand-main { font-family:'Cormorant Garamond',Georgia,serif; font-size:35px; letter-spacing:-.035em; }
.brand-top { font-size:8px; letter-spacing:.18em; margin-bottom:5px; color:#86512e; }
.brand-sub { font-size:7px; letter-spacing:.18em; margin-top:5px; }
.brand-nav { display:flex; gap:28px; }
.brand-nav a { font-size:16px; color:#5c3923; text-decoration:none; padding:8px 0; border-bottom:1px solid transparent; }
.brand-nav a:hover { border-color:#9b6037; }
.nav-right { gap:18px; flex-shrink:0; }
.autoplay-btn { font-size:14px; padding:8px 0; border:0; background:none; box-shadow:none; color:#5c3923; white-space:nowrap; }
.autoplay-btn:hover,.autoplay-btn.playing { background:none; color:#9b6037; }
.cart-pill { font-size:14px; padding:13px 22px; background:#472716; box-shadow:none; white-space:nowrap; }
.scrolly-track { height:550svh; }
.stage { background:#f3e5ce; }
#processStreamCanvas { inset:94px 0 0; width:100%; height:calc(100% - 94px); transform:none; mask-image:none; z-index:2; }
.scene-decoration { position:absolute; inset:94px 0 0; overflow:hidden; pointer-events:none; z-index:3; mix-blend-mode:multiply; }
.scene-orbit { position:absolute; right:-17vw; bottom:-36vw; width:69vw; height:69vw; border-radius:50%; background:#bb642824; }
.scene-arc { position:absolute; left:31%; top:15%; width:65%; overflow:visible; opacity:.28; }
.scene-arc text { fill:#a5693e; font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:76px; letter-spacing:.01em; }
.stage[data-stage="1"] .scene-arc,.stage[data-stage="2"] .scene-arc { top:7%; opacity:.18; }
.stage[data-stage="4"] .scene-arc { top:3%; opacity:.16; }
.stage[data-stage="5"] .scene-arc { display:none; }
.stage-editorial { inset:126px 6vw 84px; z-index:5; }
.step-panel-left { left:0; top:50%; width:29%; max-width:500px; max-height:100%; overflow-y:auto; transform:translateY(-50%); }
.step-panel-right { display:none !important; }
.step-badge { border:0; border-radius:0; background:none; padding:0; font-family:inherit; font-size:12px; letter-spacing:.12em; color:#8e5430; margin-bottom:24px; }
.step-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(72px,6.5vw,118px); font-weight:700; line-height:.88; letter-spacing:-.045em; margin-bottom:28px; color:#352014; }
.step-title span { color:#a36132; display:block; margin-top:7px; }
#panelLeft3 .step-title span { font-size:.66em; }
.step-desc { font-size:clamp(19px,1.45vw,24px); line-height:1.55; max-width:350px; color:#67452e; margin-bottom:28px; }
.step-cta { background:#4b2b18; color:#fff4e1; box-shadow:none; border:0; border-radius:99px; padding:14px 24px; font-size:16px; font-weight:500; gap:24px; }
.step-cta:hover { background:#87502b; transform:translateY(-2px); }
.process-rail { right:20px; gap:10px; }
.rail-dot { height:6px; width:6px; background:#92633c55; }
.rail-dot.active { background:#98552b; height:22px; }
.scroll-hint-pill { left:6vw; bottom:26px; border:0; background:none; padding:0; box-shadow:none; font-family:inherit; font-size:12px; color:#805431; }
.scroll-dot-pulse { display:none; }
.process-status { border:0; background:#f3e5cef2; color:#5a321b; font-size:12px; }
.layer-s5-ui { z-index:5; }
.final-heading { position:absolute; left:6vw; top:20%; max-width:28vw; }
.final-heading>span { font-size:11px; letter-spacing:.12em; color:#8e5430; }
.final-heading h2 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:clamp(58px,5.5vw,96px); letter-spacing:-.04em; line-height:.94; margin-top:20px; }
.final-heading em { color:#a36132; font-weight:600; }
.spec-card { width:18vw; max-width:245px; background:#fff3d9d9; border:1px solid #bd90654d; border-radius:2px; padding:17px; box-shadow:0 8px 24px #6b39150a; backdrop-filter:none; }
.spec-card-tag { font-family:inherit; font-size:11px; color:#8e5430; margin-bottom:7px; letter-spacing:.1em; }
.spec-card h4 { font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; text-transform:none; line-height:1.05; letter-spacing:-.02em; }
.spec-card p { font-size:14px; line-height:1.5; color:#67452e; }
.spec-roast { top:58%; left:6vw; }
.spec-origin { top:20%; right:6vw; left:auto; }
.spec-craft { top:44%; right:6vw; }
.spec-flavor { top:68%; right:6vw; }
.s5-bottom-bar { bottom:26px; left:50%; gap:10px; }
.find-cup-btn { background:#4b2b18; box-shadow:none; font-size:15px; text-transform:none; letter-spacing:0; padding:14px 28px; }
.after-scroll-section { padding:90px 6vw 70px; background:#ecdbc0; }
.catalog-header { border-bottom:1px solid #b98e654d; padding-bottom:34px; margin-bottom:35px; }
.catalog-header h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(48px,5.5vw,86px); font-weight:600; line-height:.97; letter-spacing:-.04em; }
.catalog-header h2 em { color:#a36132; }
.catalog-header p { font-size:19px; line-height:1.6; max-width:360px; color:#67452e; }
.roast-card { border:1px solid #b98e654d; border-radius:4px; background:#f8edd9; box-shadow:none; padding:28px; }
.roast-card:hover { box-shadow:none; }
.roast-card h3 { font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; line-height:1; }
.roast-card p { font-size:16px; color:#67452e; line-height:1.6; }
.roast-badge { padding:0; background:none; font-size:11px; }
.roast-price { font-size:13px; }
.grind-chip { font-size:14px; border-radius:4px; padding:9px; }
.add-cart-btn { font-size:15px; background:#4b2b18; }
.sensory-banner { margin-top:65px; padding:55px 0 0; background:none; border-radius:0; border:0; border-top:1px solid #b98e654d; box-shadow:none; grid-template-columns:1fr 1fr; gap:8vw; }
.sensory-banner h3 { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(40px,4.5vw,72px); font-weight:600; color:#352014; letter-spacing:-.04em; }
.sensory-banner p { color:#67452e; font-size:19px; line-height:1.7; }
.story-link { font-size:16px; background:none; color:#63371e; border:0; border-bottom:1px solid #a97950; padding:0 0 8px; cursor:pointer; }
#our-story { scroll-margin-top:110px; }
.brand-footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:30px 6vw; background:#ecdbc0; border-top:1px solid #b98e654d; }
.brand-footer a { text-decoration:none; color:#67452e; font-size:14px; }
.brand-footer a:first-child { font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:700; }
.brand-footer span { font-size:13px; color:#805431; }
.toast:not(.show) { visibility:hidden; opacity:0; }
@media(min-width:981px) and (max-width:1150px) {
 .brand-main { font-size:28px; }
 .brand-nav { gap:16px; }
 .brand-nav a { font-size:14px; }
 .nav-right { gap:12px; }
 .autoplay-btn,.cart-pill { font-size:12px; }
 .step-title { font-size:72px; }
 .step-desc { font-size:18px; }
 .step-badge { font-size:10px; }
 .spec-card { padding:12px; }
 .spec-card h4 { font-size:20px; }
 .spec-card p { font-size:12px; }
}
@media(max-width:980px) {
 .navbar { height:80px; padding:0 5vw; }
 .brand-main { font-size:24px; }
 .brand-top { font-size:6px; letter-spacing:.1em; }
 .brand-sub { display:none; }
 .brand-nav { display:none; }
 .nav-right { gap:8px; }
 .autoplay-btn,.cart-pill { font-size:11px; }
 .cart-pill { padding:10px 12px; }
 #processStreamCanvas { inset:80px 0 auto; width:100%; height:38svh; }
 .scene-decoration { inset:80px 0 0; }
 .scene-arc { left:5%; top:0; width:90%; opacity:.13; }
 .scene-arc text { font-size:65px; }
 .scene-orbit { width:120vw; height:120vw; right:-60vw; bottom:-55vw; }
 .stage-editorial { inset:calc(90px + 38svh) 7vw 58px; }
 .step-panel-left { width:100%; top:0; max-width:none; max-height:100%; transform:none; }
 .step-title { font-size:clamp(49px,12.5vw,72px); line-height:.88; margin-bottom:18px; }
 #panelLeft3 .step-title span { font-size:.8em; }
 .step-badge { font-size:10px; margin-bottom:13px; }
 .step-desc { font-size:17px; line-height:1.5; max-width:600px; margin-bottom:18px; }
 .step-cta { font-size:14px; padding:12px 20px; }
 .scroll-hint-pill { left:7vw; bottom:20px; font-size:10px; }
 .layer-s5-ui { inset:calc(90px + 38svh) 7vw 55px; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; overflow-y:auto; }
 .final-heading { position:static; grid-column:1/-1; max-width:none; margin-bottom:4px; }
 .final-heading>span { display:none; }
 .final-heading h2 { font-size:35px; margin:0; }
 .final-heading h2 br { display:none; }
 .spec-card { position:static; width:auto; max-width:none; padding:10px; }
 .spec-card-tag { font-size:9px; }
 .spec-card h4 { font-size:20px; }
 .spec-card p { display:none; }
 .s5-bottom-bar { position:static; transform:none; grid-column:1/-1; width:100%; }
 .find-cup-btn { font-size:13px; padding:12px 20px; }
 .after-scroll-section { padding:60px 7vw; }
 .catalog-header h2 { font-size:48px; }
 .catalog-header p { font-size:17px; }
 .sensory-banner { grid-template-columns:1fr; gap:20px; padding-top:40px; }
 .sensory-banner p { font-size:17px; }
 .brand-footer { flex-wrap:wrap; }
 .brand-footer span { order:3; flex-basis:100%; }
}
@media(max-height:720px) and (max-width:980px) and (min-height:521px) {
 #processStreamCanvas { height:34svh; }
 .stage-editorial,.layer-s5-ui { top:calc(90px + 34svh); }
 .step-title { font-size:46px; margin-bottom:13px; }
 .step-badge { margin-bottom:10px; }
 .step-desc { font-size:16px; margin-bottom:14px; }
 .spec-card { padding:8px; }
 .final-heading h2 { font-size:30px; }
}
@media(max-height:520px) and (min-width:600px) {
 .navbar { height:68px; }
 #processStreamCanvas { inset:68px 0 auto; width:100%; height:calc(100% - 68px); }
 .stage-editorial { inset:90px 4vw 40px; }
 .step-panel-left { width:31%; }
 .step-title { font-size:42px; }
 .step-desc { display:none; }
 .scene-arc { left:35%; width:60%; }
 .layer-s5-ui { inset:85px 4vw 38px; display:block; overflow:auto; }
 .final-heading { width:30%; }
 .spec-card { display:none; }
 .s5-bottom-bar { position:absolute; left:0; bottom:0; width:30%; }
}

.scene-orbit { display:none; }
#processStreamCanvas { filter:sepia(.12) saturate(1.08); }