@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@font-face{font-family:'Druk Bialetti';src:url('./assets/DrukCyr-Medium.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}

:root{--ink:#101010;--paper:#f5f4ef;--cream:#ece9df;--brown:#321b13;--green:#23714c;--red:#d9183d;--edge:clamp(22px,4vw,70px);font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:#050505;font-synthesis:none}
*{box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--red);color:#fff}
.skip{position:fixed;left:10px;top:-70px;z-index:1000;background:#fff;color:#000;padding:12px;opacity:0}
.skip:focus{top:10px;opacity:1}
.site-header{position:fixed;z-index:50;top:0;left:0;width:100%;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);color:#fff;background:#000;pointer-events:none}
.site-header.is-hidden{transform:translateY(-100%);visibility:hidden}
.site-header>*{pointer-events:auto}
.brand{font:700 26px/1 'Space Grotesk',sans-serif;letter-spacing:-.09em;text-decoration:none;white-space:nowrap}
.brand span{font-weight:400}
.site-header nav{display:flex;gap:clamp(15px,3vw,50px)}
.site-header nav a,.header-index{text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.site-header nav a{transition:opacity .2s}
.site-header nav a:hover{opacity:.55}
.header-index{min-width:135px;text-align:right}
.sticky-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.scroll-scene{position:relative}
.section-label,.eyebrow,.scene-no{font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.paper{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}

/* The opening reproduces the reference's visual sequence: particulate type, a stirred field, then a quiet paper wordmark. */
.hero-scroll{height:300svh;background:#000}
.hero-stage{background:#000;color:#fff;isolation:isolate}
#particle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:var(--canvas-opacity,1);mix-blend-mode:difference}
.hero-fallback{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;font:900 clamp(100px,12vw,160px)/.87 Arial,Helvetica,sans-serif;letter-spacing:-.075em;white-space:nowrap}
.hero-fallback-dot{display:block;font-size:.38em;line-height:.2;margin-left:1.2em}
.js-motion .hero-fallback{opacity:0;pointer-events:none}
.hero-paper{position:absolute;z-index:0;inset:0;background:#f8f8f6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");opacity:var(--paper-opacity,0);pointer-events:none}
.hero-wordmark{position:absolute;z-index:3;left:50%;top:49%;transform:translate(-50%,var(--wordmark-y,0px)) scale(var(--wordmark-scale,1));transform-origin:center;opacity:var(--wordmark-opacity,0);color:#171717;font:700 clamp(56px,8vw,120px)/.9 'Space Grotesk',Arial,sans-serif;letter-spacing:-.105em;white-space:nowrap;pointer-events:none}
.hero-wordmark span{font-weight:400}
.hero-thread{position:absolute;z-index:2;left:50%;top:57%;height:31vh;border-left:1px dashed #333;opacity:var(--thread-opacity,0);transform:translateY(var(--thread-y,0px));pointer-events:none}
.hero-story{position:absolute;z-index:2;left:50%;top:82%;width:min(31vw,400px);aspect-ratio:1.45;margin:0;overflow:hidden;border-radius:2px;opacity:var(--story-opacity,0);transform:translate(-50%,var(--story-y,100px));pointer-events:none}
.hero-story img,.hero-story video{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:5vh;transform:translateX(-50%);width:16px;height:16px;margin:0;opacity:var(--cue-opacity,1)}
.scroll-cue span{display:block;width:13px;height:13px;border-right:1px solid #fff8;border-bottom:1px solid #fff8;transform:rotate(45deg)}

.idea-section{min-height:100svh;display:flex;align-items:center;padding:10vh var(--edge)}
.idea-lead{display:grid;grid-template-columns:1fr 3fr 1.3fr;column-gap:4vw;align-items:start;width:100%}
.hairline{width:100%;height:1px;background:var(--ink);margin-top:8px}
.idea-lead .section-label{margin:0}
.idea-lead h2{grid-column:2;grid-row:2;margin:6vh 0 0;font:500 clamp(80px,13vw,210px)/.82 'Space Grotesk',Arial,sans-serif;letter-spacing:-.105em}
.idea-lead>p:last-child{grid-column:3;grid-row:2;align-self:end;margin:0 0 1vw;max-width:240px;font-size:clamp(15px,1.3vw,19px);line-height:1.35}

.gallery-scroll{height:370svh}
.gallery-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9vh var(--edge) 6vh}
.gallery-label{position:absolute;left:var(--edge);top:12vh}
.gallery-stage h2{font:500 clamp(45px,5.5vw,94px)/1 'Space Grotesk',sans-serif;letter-spacing:-.075em;margin:0 0 4vh;white-space:nowrap}
.gallery-window{position:relative;width:min(83vw,1200px);height:60vh;min-height:300px;overflow:hidden;border-radius:3px;transform:scale(var(--gallery-scale,1));background:#141414;color:#fff}
.gallery-window img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.22);transform:scale(var(--image-scale,1.08));will-change:transform}
.gallery-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0008,#0003)}
.gallery-window p{position:absolute;left:4%;right:4%;top:50%;transform:translateY(-50%);margin:0;text-align:center;font:500 clamp(23px,3vw,50px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.05em;text-shadow:0 2px 20px #000}
.frame-counter{position:absolute;right:25px;bottom:22px;font-size:11px;letter-spacing:.12em}
.gallery-caption{font-size:11px;letter-spacing:.04em;margin:2.5vh 0 0;opacity:.55}

.orbit-scroll{height:210svh}
.orbit-stage{display:grid;place-items:center}
.orbit-ring{position:absolute;width:min(58vw,75vh);aspect-ratio:1;border:2px dashed var(--ink);border-radius:50%;transform:translate(-4%,0) rotate(var(--ring-one,0deg))}
.orbit-ring--two{width:min(66vw,85vh);transform:translate(5%,9%) rotate(var(--ring-two,0deg))}
.orbit-words{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vh,55px);font:400 clamp(28px,3.5vw,56px)/1 'Space Grotesk',sans-serif;letter-spacing:-.07em}
.orbit-words span{opacity:var(--word-opacity,1)}
.orbit-note{position:absolute;left:var(--edge);bottom:4vh;font-size:11px;letter-spacing:.07em;text-transform:uppercase}

.grinder-scroll{height:3500px;background:#3b1c10}
.grinder-stage{height:100svh;min-height:0;background:#3b1c10;color:#e09b69;isolation:isolate}
.grinder-rule{position:absolute;z-index:5;left:0;top:10.3%;width:100%;height:5px;background:#dd2040}
.grinder-stage>.section-label{display:none}
.moka-stage>.section-label,.pour-stage>.section-label{position:absolute;z-index:3;top:13vh;left:var(--edge);margin:0}
.grinder-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grinder-type{position:absolute;z-index:3;left:10%;top:20%;width:80%;height:70%;font:400 clamp(48px,7vw,100px)/.98 'Druk Bialetti',Impact,sans-serif;white-space:nowrap}
.grinder-type--mobile{display:none}
.grinder-word{position:absolute;left:calc(var(--word-x)*1em);top:calc(var(--word-y)*1em);display:block;color:#e09b69;transform-origin:center;will-change:transform,opacity}
.grinder-type--mobile .grinder-word:nth-child(-n+3){color:#dd2040}
.grinder-type--mobile .grinder-word:nth-child(1){--word-x:0;--word-y:0;width:148px}
.grinder-type--mobile .grinder-word:nth-child(2){--word-x:2.58;--word-y:0;width:130px}
.grinder-type--mobile .grinder-word:nth-child(3){--word-x:0;--word-y:1;width:245px}
.grinder-type--mobile .grinder-word:nth-child(4){--word-x:0;--word-y:2;width:147px}
.grinder-type--mobile .grinder-word:nth-child(5){--word-x:2.66;--word-y:2;width:175px}
.grinder-type--mobile .grinder-word:nth-child(6){--word-x:0;--word-y:3;width:151px}
.grinder-type--mobile .grinder-word:nth-child(7){--word-x:2.78;--word-y:3;width:112px}
.grinder-type--mobile .grinder-word:nth-child(8){--word-x:0;--word-y:4;width:54px}
.grinder-type--mobile .grinder-word:nth-child(9){--word-x:.84;--word-y:4;width:172px}
.grinder-type--desktop{left:0;top:0;width:100%;height:100%;font-size:110px;line-height:110px}
.grinder-type--desktop .grinder-word{--word-y:0;--word-x:0;left:calc(50% - 8px);top:var(--desktop-top);width:var(--desktop-width)}
.grinder-type--desktop .grinder-word:nth-child(-n+4){color:#dd2040}
.grinder-type--desktop .grinder-word:nth-child(1){--desktop-top:150px;--desktop-width:680px}
.grinder-type--desktop .grinder-word:nth-child(2){--desktop-top:50px;--desktop-width:387px}
.grinder-type--desktop .grinder-word:nth-child(3){--desktop-top:150px;--desktop-width:420px;left:calc(50% + 230px)}
.grinder-type--desktop .grinder-word:nth-child(4){--desktop-top:250px;--desktop-width:780px}
.grinder-type--desktop .grinder-word:nth-child(5){--desktop-top:350px;--desktop-width:384px}
.grinder-type--desktop .grinder-word:nth-child(6){--desktop-top:450px;--desktop-width:356px}
.grinder-type--desktop .grinder-word:nth-child(7){--desktop-top:550px;--desktop-width:195px}
.grinder-type--desktop .grinder-word:nth-child(8){--desktop-top:550px;--desktop-width:278px;left:calc(50% + 330px)}
.grinder-photo{position:absolute;z-index:2;left:52%;top:78%;width:min(25vw,320px);height:auto;filter:grayscale(1);transform:translate(-50%,-50%) rotate(var(--photo-turn,-8deg)) translate(var(--photo-x,0px),var(--photo-y,0px)) scale(var(--photo-scale,1));opacity:var(--photo-opacity,1);will-change:transform,opacity}
.blade{position:absolute;z-index:4;width:min(62vw,730px);height:auto;max-width:none;left:50%;top:76%;filter:drop-shadow(0 20px 25px #0a050486);transform:translate(-50%,-50%) rotate(var(--blade-turn,68deg)) scale(var(--blade-scale,1));opacity:var(--blade-opacity,0);will-change:transform,opacity}
.grinder-aside{position:absolute;z-index:5;right:var(--edge);bottom:6vh;max-width:205px;margin:0;font-size:11px;line-height:1.4;color:#e09b69;opacity:var(--grinder-aside-opacity,.75)}
.scene-no{position:absolute;z-index:3;left:var(--edge);bottom:8vh}
@media(min-width:701px){.grinder-photo{left:calc(50% - 378px);top:0;width:300px;transform:translate(var(--photo-x,0px),var(--photo-y,0px)) rotate(calc(20deg + var(--photo-turn,0deg)));filter:grayscale(1)}.blade{left:calc(50% - 371px);top:-50px;width:698px;transform:rotate(var(--blade-turn,68deg));filter:none}}
.grinder-aside,.grinder-stage>.scene-no{display:none}

.number-scroll{height:240svh}
.number-stage{display:grid;place-items:center;isolation:isolate}
.number-stage::after{content:"";position:absolute;z-index:2;inset:0;background:#3b1c10;opacity:var(--number-wash,0);pointer-events:none;will-change:opacity}
.number-stage .section-label{position:absolute;z-index:3;top:13vh;left:var(--edge);opacity:var(--number-copy-opacity,1);transform:translateY(var(--number-copy-y,0px))}
.number-stage h2{position:absolute;z-index:3;top:21vh;left:var(--edge);font:500 clamp(32px,4vw,65px)/1 'Space Grotesk',sans-serif;letter-spacing:-.07em;max-width:10ch;opacity:var(--number-copy-opacity,1);transform:translateY(var(--number-copy-y,0px))}
.zoom-number{position:absolute;z-index:1;font:700 clamp(350px,50vw,900px)/.65 'Space Grotesk',sans-serif;letter-spacing:-.13em;color:var(--red);transform:translate(var(--number-shift-x,-6%),14%) scale(var(--number-scale,.2));transform-origin:center;will-change:transform}
.number-note{position:absolute;z-index:3;bottom:7vh;right:var(--edge);max-width:200px;text-align:right;font-size:13px}

.moka-scroll{height:290svh}
.moka-stage{background:#b81338;color:#f9f2e8;isolation:isolate}
.moka-top-band{position:absolute;left:0;right:0;bottom:0;height:34%;background:#206d49}
.moka-stage h2{position:absolute;z-index:3;left:var(--edge);top:24vh;margin:0;font:700 clamp(70px,9.5vw,155px)/.8 'Space Grotesk',sans-serif;letter-spacing:-.1em;text-transform:uppercase;max-width:8ch}
.moka-subtitle{position:absolute;z-index:3;left:var(--edge);bottom:17vh;font-size:14px;max-width:210px;line-height:1.4}
.moka-top{position:absolute;z-index:2;width:min(50vw,680px);height:min(50vw,680px);object-fit:contain;top:52%;left:60%;filter:drop-shadow(30px 30px 23px #220b1270);transform:translate(-50%,-50%) rotate(var(--moka-turn,0deg)) scale(var(--moka-scale,.75));will-change:transform}
.moka-guide{position:absolute;border:1px solid #fff6;border-radius:50%;width:min(50vw,680px);aspect-ratio:1;top:52%;left:60%;transform:translate(-50%,-50%)}
.moka-guide--two{width:min(58vw,780px);border-style:dashed;opacity:.4}

.pour-scroll{height:min(145.5vw,2000px);min-height:1600px;background:#fff}
.pour-stage{position:relative;height:100%;overflow:hidden;background:#fff;color:var(--brown);isolation:isolate}
.pour-upper{position:absolute;inset:0 0 auto;height:min(66.6vw,900px);background:#3b1c10}
.pour-stage h2{position:absolute;z-index:2;top:11.9vw;left:3.05vw;width:88.7vw;margin:0;font:400 min(8.91vw,122px)/1 'Druk Bialetti',Impact,sans-serif;text-transform:uppercase;white-space:nowrap}
.pour-line{display:block}
.pour-line--light,.pour-bankruptcy{color:#f2f0ed}
.pour-line--green{color:#347a4b}
.pour-bankruptcy{position:absolute;z-index:3;top:16.7vw;left:58.5vw;font:400 min(7.7vw,105px)/1 'Druk Bialetti',Impact,sans-serif;text-transform:uppercase;transform:rotate(24deg);transform-origin:left center;white-space:nowrap}
.pour-pot{position:absolute;z-index:4;top:min(34vw,470px);left:19.5vw;width:61vw;max-width:none;height:auto;transform:translate3d(0,var(--pour-y,-300px),0) rotate(var(--pour-turn,-140deg));filter:drop-shadow(12px 10px 10px #1c100e33)}
.pour-letters{position:absolute;z-index:5;top:89.8vw;left:15.6vw;width:130px;font:400 min(8.9vw,122px)/.9 'Druk Bialetti',Impact,sans-serif;color:#381b0f}
.pour-letters span{position:absolute;top:var(--ly);left:var(--x);display:block;line-height:1;opacity:0;transform:rotate(var(--tilt));transform-origin:center}

.ending{min-height:120svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:55vh var(--edge) 15vh;background:#3b1c10;color:#f5f4ef}
.ending h2{margin:4vh 0;font:500 clamp(60px,9vw,145px)/.9 'Space Grotesk',sans-serif;letter-spacing:-.09em;max-width:12ch}
.ending>p:not(.section-label){font-size:clamp(16px,1.5vw,21px);line-height:1.4;max-width:470px}
.cta{display:inline-flex;justify-content:space-between;align-items:center;gap:50px;padding:18px 22px;border:1px solid var(--ink);text-decoration:none;font-size:13px;font-weight:700;margin-top:5vh;transition:background .25s,color .25s}
.cta:hover{background:var(--ink);color:#fff}
.ending .cta{border-color:currentColor}
.ending .cta:hover{background:#f5f4ef;color:#3b1c10}
.cta span{font-size:21px;line-height:0}
.site-footer{background:#050505;color:#f7f7f7;padding:10vh var(--edge) 25px}
.footer-mark{display:block;font:700 clamp(80px,15vw,240px)/.8 'Space Grotesk',Arial,sans-serif;letter-spacing:-.13em;text-decoration:none;max-width:100%;margin:5vh 0 11vh;white-space:nowrap}
.footer-mark br{display:none}
.footer-mark span{margin-left:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:5vw;align-items:start;margin-bottom:12vh}
.footer-grid p{font-size:clamp(14px,1.25vw,20px);line-height:1.4;margin:0}
.footer-grid nav{display:flex;flex-direction:column;gap:6px;font-size:clamp(18px,1.8vw,30px)}
.footer-grid nav a{text-decoration:none;width:max-content}
.footer-grid nav a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid #666;display:flex;justify-content:space-between;gap:20px;padding-top:15px;color:#999;font-size:11px}

@media(max-width:700px){
 .site-header{height:68px}.site-header nav{gap:15px}.site-header nav a{font-size:11px}.site-header nav a:nth-child(2){display:none}.header-index{display:none}.brand{font-size:22px}
 .sticky-stage{min-height:560px}.hero-scroll{height:260svh}.hero-fallback{font-size:clamp(79px,19vw,125px)}.hero-wordmark{font-size:clamp(38px,9vw,64px)}.hero-story{width:66vw;top:78%}.hero-thread{top:56%;height:25vh}
 .idea-section{min-height:90svh}.idea-lead{grid-template-columns:1fr}.hairline{display:none}.idea-lead .section-label,.idea-lead h2,.idea-lead>p:last-child{grid-column:1;grid-row:auto}.idea-lead h2{font-size:clamp(75px,18vw,140px);margin:8vh 0}.idea-lead>p:last-child{max-width:310px}
 .gallery-scroll{height:310svh}.gallery-stage{padding-top:15vh}.gallery-label{top:12vh}.gallery-stage h2{font-size:clamp(40px,10vw,70px)}.gallery-window{width:calc(100vw - 2*var(--edge));height:55vh}.gallery-window p{font-size:clamp(25px,6vw,40px)}.gallery-caption{text-align:center;max-width:240px;line-height:1.35}
 .orbit-scroll{height:170svh}.orbit-ring{width:88vw}.orbit-ring--two{width:98vw}.orbit-words{gap:25px;font-size:30px}.orbit-note{bottom:12vh}
 .grinder-scroll{height:2700px}.grinder-stage{min-height:0}.grinder-type--desktop{display:none}.grinder-type--mobile{display:block;left:16.4%;top:22.1%;font-size:clamp(45px,11.3vw,60px);line-height:.94}.grinder-photo{width:218px;left:48%;top:112%;transform:translate(-50%,-50%) translate(var(--photo-x,0px),var(--photo-y,0px)) rotate(calc(-18deg + var(--photo-turn,0deg)))}.blade{width:84vw;left:47%;top:76%}.grinder-aside{right:5%;bottom:5vh;font-size:10px;max-width:145px}
 .number-scroll{height:195svh}.number-stage h2{top:19vh;font-size:38px}.zoom-number{font-size:110vw}.number-note{bottom:10vh}
 .moka-scroll{height:230svh}.moka-stage h2{top:22vh;font-size:clamp(70px,14vw,110px)}.moka-top{width:95vw;height:95vw;top:57%;left:58%}.moka-guide{width:95vw;top:57%;left:58%}.moka-guide--two{width:110vw}.moka-subtitle{bottom:8vh}.moka-top-band{height:29%}
 .pour-scroll{height:145.5vw;min-height:1600px}
 .ending h2{font-size:clamp(60px,11vw,90px)}.footer-mark{font-size:15vw;margin:7vh 0 12vh}.footer-grid{grid-template-columns:1fr 1fr;row-gap:6vh}.footer-grid p:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column}
}
@media(max-width:700px){
 .pour-scroll{height:2250px;min-height:0}
 .pour-upper{height:740px}
 .pour-stage h2{top:108px;left:20px;width:calc(100% - 40px);font-size:clamp(44px,11.3vw,75px);white-space:normal;line-height:1.06}
 .pour-line{max-width:100%}
 .pour-bankruptcy{top:385px;left:36%;font-size:clamp(50px,12vw,80px)}
 .pour-pot{top:430px;left:-140px;width:560px}
 .pour-letters{top:1035px;left:12%;font-size:88px}
 .pour-letters span{top:calc(var(--i) * 95px)}
}

/* One continuous, scroll-driven opening. All changes happen on the same pinned stage. */
html{scroll-behavior:auto}
.hero-scroll{height:500svh;background:#f8f8f6}
.hero-stage{min-height:0}
.hero-paper,.orbit-stage.paper{background-color:#f8f8f6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
.orbit-scroll{background:#f8f8f6}
.hero-wordmark{top:25%;font-size:clamp(55px,8vw,110px);color:#d1d1d1}
.hero-thread{top:32%;height:25vh;border-color:#222}
.hero-story{top:38%;width:min(32vw,400px);aspect-ratio:1200/882}
.hero-intro,.hero-idea,.hero-feature,.hero-route{position:absolute;z-index:4;pointer-events:none}
.hero-intro{top:72%;left:50%;width:min(80vw,850px);transform:translate(-50%,var(--intro-y,50px));opacity:var(--intro-opacity,0);text-align:center;color:#1a1a1a;font:400 clamp(20px,2.8vw,38px)/1.25 'DM Sans',Arial,sans-serif;letter-spacing:-.05em}
.hero-idea{top:16%;left:50%;margin:0;transform:translate(-50%,var(--idea-y,40px));opacity:var(--idea-opacity,0);white-space:nowrap;color:#161616;font:500 clamp(36px,3.1vw,50px)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.055em}
.hero-feature{top:22%;left:50%;width:min(calc(100vw - 48px),800px);height:auto;aspect-ratio:1920/1118;margin:0;overflow:hidden;border-radius:3px;background:#0a0a0a;transform:translate(-50%,var(--feature-y,160px)) scale(var(--feature-scale,.72));opacity:var(--feature-opacity,0);color:#fff}
.hero-feature img,.hero-feature video{width:100%;height:100%;object-fit:cover}
.hero-feature figcaption{position:absolute;left:5%;right:5%;top:50%;transform:translateY(-50%);text-align:center;font:500 clamp(24px,2.35vw,32px)/1.15 'DM Sans',Arial,sans-serif;letter-spacing:-.04em;text-shadow:0 2px 14px #000}
.hero-route{left:50%;top:48%;width:min(36vw,420px);height:50vh;opacity:var(--route-opacity,0);transform:translateX(-50%)}
.hero-route svg{display:block;width:100%;height:auto;overflow:visible;transform:scale(var(--route-scale,.5));transform-origin:226px 0}
.hero-route path{fill:none;stroke:#171717;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.hero-route circle{fill:#171717}
.hero-route .route-ring{fill:none;stroke:#171717;stroke-width:2;stroke-dasharray:5 5}

/* A separate Newmix gallery follows the two looping BrandStory films. */
.gallery-scroll{height:auto;background:#060606;color:#fff}
.gallery-stage{display:block;position:relative;height:auto;min-height:0;padding:90px var(--edge) 150px;background:#060606}
.gallery-label{position:relative;top:auto;left:auto;text-align:center;opacity:.5;margin:0 auto 42px}
.gallery-stage h2{position:relative;text-align:center;font:700 clamp(55px,11vw,170px)/.8 'Space Grotesk',sans-serif;letter-spacing:-.11em;margin:0 auto 100px;white-space:nowrap}
.gallery-stage h2 span{font-weight:400}
.gallery-track{display:flex;flex-direction:column;align-items:center;gap:0;max-width:1000px;margin:auto}
.gallery-item{position:relative;width:65%;aspect-ratio:16/9;overflow:hidden;clip-path:inset(0 20% round 2px);transform:translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0) scale(var(--gallery-scale,1));opacity:var(--gallery-opacity,.4);will-change:transform,clip-path,opacity}
.gallery-item+.gallery-item{margin-top:-30px}
.gallery-item img{width:100%;height:100%;object-fit:cover;transform:scale(var(--gallery-image-scale,1.5));filter:grayscale(1)}
.gallery-item:nth-child(5n+2){align-self:flex-start}
.gallery-item:nth-child(5n+4){align-self:flex-end}
.gallery-index{position:absolute;bottom:12px;right:14px;color:#fff;font-size:10px;letter-spacing:.08em;text-shadow:0 1px 6px #000}

@media(max-width:700px){
 .hero-scroll{height:440svh}.hero-wordmark{font-size:9vw;top:27%}.hero-thread{top:34%;height:20vh}.hero-story{width:62vw;top:42%}
 .hero-intro{font-size:clamp(19px,5vw,30px);width:88vw;top:68%}.hero-idea{font-size:clamp(35px,9vw,55px);top:24%}
 .hero-feature{width:calc(100vw - 48px);top:32%}.hero-feature figcaption{font-size:clamp(16px,4vw,24px)}.hero-route{width:66vw}
 .gallery-stage{padding:95px 20px 100px}.gallery-stage h2{font-size:18vw;margin-bottom:70px}.gallery-track{gap:0}.gallery-item{width:88%}.gallery-item+.gallery-item{margin-top:30px}
}

/* The paper chapters stay in document flow, so the film, copy, montage and
   dotted route cross the viewport at the same speed as the user's scroll. */
.hero-scroll{height:300svh;background:#f8f8f6}
.hero-stage{background:#050505}
.paper-sequence{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;min-height:0;margin-top:-100svh;padding:26vh var(--edge) 0;background-color:#f8f8f6;text-align:center}
.paper-brand{font:700 clamp(58px,8vw,116px)/.9 'Space Grotesk',Arial,sans-serif;letter-spacing:-.105em;color:#242424;white-space:nowrap}
.paper-brand span{font-weight:400}
.paper-thread{width:0;border-left:1px dashed #282828;margin-inline:auto}
.paper-thread--short{height:clamp(105px,18vh,175px);margin-top:4vh}
.paper-thread--long{height:clamp(190px,31vh,310px);margin-top:25px}
.paper-sequence .hero-story{position:relative;z-index:1;left:auto;top:auto;width:min(31.25vw,400px);min-width:0;aspect-ratio:1200/882;margin:0;opacity:1;transform:none;pointer-events:none}
.paper-sequence .hero-story video{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.paper-sequence .hero-intro{position:relative;z-index:1;left:auto;top:auto;width:min(900px,100%);margin:24px auto 0;transform:none;opacity:1;color:#161616;font:400 clamp(22px,2.45vw,37px)/1.28 'DM Sans',Arial,sans-serif;letter-spacing:-.048em}
.paper-sequence .hero-idea{position:relative;z-index:1;left:auto;top:auto;margin:0 auto clamp(28px,5vh,50px);transform:none;opacity:1;white-space:normal;color:#161616;font:400 clamp(35px,3.4vw,54px)/1.08 'DM Sans',Arial,sans-serif;letter-spacing:-.05em}
.paper-sequence .hero-feature{position:relative;z-index:1;left:auto;top:auto;width:min(63vw,800px);aspect-ratio:1920/1118;height:auto;margin:0;opacity:1;transform:none;overflow:hidden;border-radius:3px;background:#111}
.paper-sequence .hero-feature video{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.paper-sequence .hero-feature figcaption{font-size:clamp(24px,2.4vw,34px);font-weight:500}
.paper-connector{position:relative;width:2px;height:clamp(180px,31vh,320px);margin:20px auto 0;border-left:2px dashed #222}
.paper-connector span{position:absolute;left:-6px;top:-18px;width:12px;height:12px;border-radius:50%;background:#222}
.orbit-scroll{margin-top:0}
.orbit-stage{background-color:#f8f8f6}
.orbit-ring{border-width:2px}

/* A quieter moka study: the title leaves as the object rises and rotates. */
.moka-scroll{height:260svh;background:#f8f8f6}
.moka-stage{background:#f8f8f6;color:#f4f0e8}
.moka-top-band{top:0;bottom:auto;height:55%;background:#2d1b14}
.moka-stage>.section-label{color:#f4f0e8;top:12vh}
.moka-stage h2{z-index:4;left:var(--edge);top:23vh;max-width:none;margin:0;color:#f4f0e8;font:700 clamp(66px,8.5vw,130px)/.9 'Space Grotesk',Arial,sans-serif;letter-spacing:-.09em;text-transform:uppercase;transform:translateY(var(--moka-title-y,0px));opacity:var(--moka-title-opacity,1);will-change:transform,opacity}
.moka-stage h2 span{display:block}
.moka-stage h2 span:nth-child(2){transform:translateX(var(--moka-second-x,0px))}
.moka-subtitle{z-index:4;left:var(--edge);bottom:11vh;max-width:18ch;margin:0;color:#25201b;font:400 clamp(20px,2vw,30px)/1.15 'DM Sans',sans-serif;letter-spacing:-.04em;opacity:var(--moka-subtitle-opacity,0)}
.moka-top{z-index:3;width:min(52vw,700px);height:min(52vw,700px);left:53%;top:54%;filter:drop-shadow(16px 26px 25px #150d0d38);transform:translate(-50%,calc(-50% + var(--moka-y,0px))) rotate(var(--moka-turn,-75deg)) scale(var(--moka-scale,.62))}
.moka-guide{z-index:2;width:min(53vw,715px);left:53%;top:54%;border-color:#2017145c;transform:translate(-50%,calc(-50% + var(--moka-y,0px)))}
.moka-guide--two{width:min(61vw,820px)}
.moka-stage>.scene-no{color:#2d1b14}

@media(max-width:700px){
 .hero-scroll{height:300svh}
 .paper-sequence{padding:26vh 22px 0}
 .paper-brand{font-size:clamp(32px,8vw,55px)}
 .paper-thread--short{height:15vh;margin-top:5vh}
 .paper-thread--long{height:27vh;margin-top:23px}
 .paper-sequence .hero-story{width:min(58vw,430px)}
 .paper-sequence .hero-intro{width:100%;margin-top:24px;font-size:clamp(21px,5.4vw,29px);line-height:1.31}
 .paper-sequence .hero-intro .desktop-break{display:none}
 .paper-sequence .hero-idea{font-size:clamp(35px,9.2vw,54px);margin-bottom:22px}
 .paper-sequence .hero-feature{width:calc(100vw - 44px)}
 .paper-sequence .hero-feature figcaption{font-size:clamp(17px,4.7vw,25px);padding-inline:12px}
 .paper-connector{height:24vh}
 .moka-scroll{height:235svh}
 .moka-stage h2{top:24vh;font-size:clamp(50px,12vw,85px);line-height:.93}
 .moka-top{width:94vw;height:94vw;left:52%;top:57%}
 .moka-guide{width:94vw;left:52%;top:57%}
 .moka-guide--two{width:108vw}
 .moka-subtitle{left:var(--edge);bottom:9vh;max-width:13ch;font-size:22px}
 .moka-top-band{height:54%}
}

/* The moka crosses a moving red/green boundary; the pour starts at its spout. */
.moka-scroll{height:160svh;background:#2c7048}
.moka-stage{background:#2c7048;color:#f7f6f3}
.moka-top-band{top:0;bottom:auto;height:var(--moka-band-height,86vh);background:#dc1741}
.moka-top{left:70%;top:52%;width:min(36vw,500px);height:min(36vw,500px);filter:drop-shadow(7px 12px 14px #15261930);transform:translate(-50%,calc(-50% + var(--moka-y,34vh))) rotate(var(--moka-turn,45deg)) scale(var(--moka-scale,.88))}
.pour-stage h2,.pour-bankruptcy{display:none}
.pour-scroll{height:max(2250px,150vw);min-height:0}
.pour-pot{left:19.5vw;transform:translate3d(0,var(--pour-y,-300px),0) rotate(var(--pour-turn,-140deg));transform-origin:center center}
.pour-letters{top:var(--spout-y,1015px);left:var(--spout-x,50%);width:120px;transform:translateX(-50%);pointer-events:none}
.pour-letters span{top:calc(var(--i) * min(6.8vw,94px));left:50%;transform:translateX(-50%) rotate(var(--tilt));will-change:transform,opacity}
@media(max-width:700px){
 .moka-scroll{height:160svh}
 .moka-top{left:67%;top:52%;width:88vw;height:88vw}
 .pour-pot{left:calc(50% - 280px)}
 .pour-letters{font-size:88px}
 .pour-letters span{top:calc(var(--i) * 94px)}
}

/* The first two gestures use the reference's discrete hero/brand transition. */
.hero-scroll{height:100svh;background:#050505}
.hero-stage{height:100svh;min-height:0;background:#050505}
.hero-paper{z-index:1;opacity:1;transform:translate3d(0,var(--paper-y,100%),0);will-change:transform}
#particle-canvas{z-index:2;mix-blend-mode:difference}
.hero-wordmark{z-index:3;top:var(--wordmark-top,76%);transform:translate(-50%,-50%);font:700 clamp(58px,8vw,116px)/.9 'Space Grotesk',Arial,sans-serif;letter-spacing:-.105em;color:#242424;will-change:top,opacity}
.hero-drag-cue{position:absolute;z-index:4;left:50%;top:90%;transform:translateX(-50%);margin:0;color:#aaa;font:400 12px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:-.01em;white-space:nowrap;opacity:var(--cue-opacity,1);pointer-events:none}
.paper-sequence{margin-top:0;padding-top:26vh}
@media(max-width:700px){
  .hero-scroll{height:100svh}
  .hero-wordmark{font-size:clamp(32px,8vw,55px)}
  .hero-drag-cue{top:79%}
  .paper-sequence{padding-top:26vh}
}

/* Keep the local study visually coherent while the production destination is decided. */
.grinder-scroll,.grinder-stage{background:#050505}
.pour-scroll,.pour-stage{background:#f8f8f6}
.pour-upper{background:#f8f8f6}
.pour-letters{color:#242424}
.hero-drag-cue{display:inline-flex;align-items:center;gap:8px}
.cue-icon{position:relative;display:inline-block;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;opacity:.8}
.cue-icon::before,.cue-icon::after,.cue-icon i{content:"";position:absolute;left:50%;top:50%;width:5px;height:1px;background:currentColor;transform-origin:left center}
.cue-icon::before{transform:translate(-1px,-1px) rotate(35deg)}
.cue-icon::after{transform:translate(-1px,0) rotate(-35deg)}
.cue-icon i{transform:translate(-1px,0) rotate(90deg);opacity:.55}

/* The bean is one traveling object: position, axis rotation and roast are scrubbed together. */
.roast-scroll{height:290svh;background:#f8f8f6}
.roast-stage{min-height:0;background:#f8f8f6;color:#171717;isolation:isolate;perspective:1100px}
.roast-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 60%,#e4b989 0%,#f0d8b7 36%,transparent 72%);opacity:calc(var(--heat-opacity,0)*.48);pointer-events:none}
.roast-stage>.section-label{position:absolute;z-index:3;left:var(--edge);top:14vh;margin:0;color:#706e67}
.roast-stage h2{position:absolute;z-index:3;left:var(--edge);top:23vh;margin:0;font:500 clamp(36px,5.5vw,88px)/1.01 'Space Grotesk',Arial,sans-serif;letter-spacing:-.075em;opacity:var(--roast-title-opacity,1)}
.roast-track{position:absolute;z-index:1;left:50%;top:52%;height:1px;width:min(68vw,980px);transform:translateX(-50%);background:#c8c4bc;opacity:.55}
.roast-track span{display:block;height:100%;width:var(--roast-line,0%);background:#543220}
.bean-traveler{position:absolute;z-index:2;left:50%;top:50%;width:clamp(190px,29vw,410px);aspect-ratio:1;transform:translate(-50%,-50%) translate3d(var(--bean-x,-17vw),var(--bean-y,23vh),0);filter:drop-shadow(0 27px 22px #26170d2c);will-change:transform}
.bean-traveler canvas,.bean-fallback{position:absolute;inset:0;display:block;width:100%;height:100%}
.bean-fallback{object-fit:contain}
.roast-stage.has-roast-webgl .bean-fallback{display:none}
.bean-steam{position:absolute;left:50%;top:-16%;width:50%;height:33%;transform:translateX(-50%);opacity:var(--steam-opacity,0);pointer-events:none}
.bean-steam i{position:absolute;bottom:0;left:20%;width:2px;height:75%;border-radius:50%;background:linear-gradient(to top,#7b746575,transparent);filter:blur(3px);transform:rotate(-14deg)}
.bean-steam i:nth-child(2){left:51%;height:100%;transform:rotate(9deg)}
.bean-steam i:nth-child(3){left:76%;height:68%;transform:rotate(21deg)}
.roast-note{position:absolute;z-index:3;left:var(--edge);top:25vh;margin:0;font:400 clamp(18px,2.2vw,28px)/1.2 'DM Sans',Arial,sans-serif;letter-spacing:-.04em;opacity:var(--roast-note-opacity,0)}

/* The blade gets a quiet paper setting and one short thought. */
.grinder-scroll{height:220svh;background:#f8f8f6}
.grinder-stage{min-height:0;background:#f8f8f6;color:#171717}
.grinder-stage>.section-label{display:block;position:absolute;z-index:4;left:var(--edge);top:14vh;margin:0;color:#706e67}
.grinder-stage h2{position:absolute;z-index:4;left:var(--edge);top:23vh;margin:0;max-width:13ch;font:500 clamp(36px,5.3vw,82px)/1.03 'Space Grotesk',Arial,sans-serif;letter-spacing:-.075em;opacity:var(--grinder-copy-opacity,1)}
.grinder-orbit{position:absolute;left:50%;top:61%;width:min(63vw,680px);aspect-ratio:1;border:1px solid #cfcac3;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--outer-turn,0deg));opacity:calc(.72 * var(--grinder-orbit-opacity,1))}
.grinder-orbit::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;background:#4f443c}
.grinder-orbit--inner{width:min(45vw,480px);border-style:dashed;transform:translate(-50%,-50%) rotate(var(--inner-turn,0deg));opacity:calc(.36 * var(--grinder-orbit-opacity,1))}
.grinder-letters{position:absolute;z-index:5;left:50%;top:61%;width:0;height:0;color:#282624;font:400 clamp(64px,9vw,132px)/1 'Druk Bialetti',Impact,sans-serif;pointer-events:none}
.grinder-letters span{position:absolute;left:0;top:0;display:block;opacity:0;will-change:transform,opacity}
.blade,.grinder-stage .blade{left:50%;top:61%;width:min(55vw,560px);max-width:none;filter:drop-shadow(0 18px 22px #1b171132);transform:translate(-50%,-50%) rotate(var(--blade-turn,-35deg)) scale(var(--blade-scale,.68));opacity:var(--blade-opacity,0)}
.grinder-aside{display:block;z-index:4;right:var(--edge);bottom:9vh;max-width:none;color:#171717;font:400 clamp(17px,2vw,24px)/1.2 'DM Sans',Arial,sans-serif;opacity:var(--grinder-note-opacity,0)}
.site-header.is-hidden{visibility:hidden}

@media(max-width:700px){
 .roast-scroll{height:260svh}
 .roast-stage h2{top:23vh;max-width:11ch;font-size:clamp(38px,9vw,58px)}
 .roast-track{top:56%;width:90vw}
 .bean-traveler{width:min(55vw,300px)}
 .roast-note{top:25vh;font-size:20px}
 .grinder-scroll{height:195svh}
 .grinder-stage h2{top:22vh;max-width:10ch;font-size:clamp(37px,9vw,57px)}
 .grinder-orbit{top:64%;width:91vw}
 .grinder-orbit--inner{width:72vw}
 .grinder-letters{top:64%;font-size:clamp(54px,17vw,84px)}
 .blade,.grinder-stage .blade{left:50%;top:64%;width:80vw}
 .grinder-aside{right:6vw;bottom:8vh;font-size:18px}
}