:root{--blue:#06177e;--ink:#07103c;--orange:#f05a22;--ivory:#f3ead6;--acid:#ffba32;--mono:"DM Mono",monospace;--display:"Unbounded",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--mono);overflow-x:hidden}.grain{position:fixed;z-index:90;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.boot{position:fixed;z-index:200;inset:0;background:var(--blue);display:grid;place-items:center;overflow:hidden}.boot-orbit{width:min(34vw,390px);aspect-ratio:1;border:1px solid #f3ead685;border-radius:50%;display:grid;place-items:center;animation:orbitIn 1.4s cubic-bezier(.7,0,.2,1) both}.boot-orbit:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--orange);transform:translateY(calc(min(34vw,390px) / -2))}.boot span{font:500 clamp(5rem,14vw,13rem)/1 var(--display)}.boot p{position:absolute;bottom:8vh;margin:0;font:400 .65rem var(--mono);letter-spacing:.2em;text-transform:uppercase}@keyframes orbitIn{from{transform:scale(.1) rotate(-120deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.topbar{position:fixed;z-index:70;left:0;top:0;width:100%;height:78px;padding:0 2.4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.24);color:#fff;mix-blend-mode:difference}.brand{color:inherit;text-decoration:none;font:500 1.05rem var(--display);letter-spacing:.08em}.topbar>p{margin:0;font:400 .56rem var(--mono);letter-spacing:.14em;text-transform:uppercase}.topbar>p span{margin:0 .8rem}.sound{justify-self:end;color:inherit;background:none;border:0;padding:.5rem 0;display:flex;align-items:center;gap:.8rem;cursor:pointer;font:400 .58rem var(--mono);letter-spacing:.13em;text-transform:uppercase}.sound-icon{width:25px;height:15px;display:flex;gap:3px;align-items:center}.sound-icon i{width:3px;height:3px;background:currentColor;border-radius:50%}.sound.active .sound-icon i{animation:signal .8s ease-in-out infinite alternate}.sound.active .sound-icon i:nth-child(2){animation-delay:.15s}.sound.active .sound-icon i:nth-child(3){animation-delay:.3s}.sound.active .sound-icon i:nth-child(4){animation-delay:.45s}@keyframes signal{to{height:14px;border-radius:2px}}
.story{height:640vh;position:relative}.viewport{height:100svh;position:sticky;top:0;overflow:hidden;background:#040823}.frame{position:absolute;inset:-2%;margin:0;opacity:0;visibility:hidden;will-change:transform,clip-path,filter}.frame.is-visible{opacity:1;visibility:visible}.frame img{width:100%;height:100%;object-fit:cover;will-change:transform}.frame-0 img{object-position:center}.frame-1 img{object-position:center}.frame-2 img{object-position:center}.frame-3 img{object-position:center}.shade{position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,rgba(2,7,32,.5),transparent 46%),linear-gradient(0deg,rgba(0,4,20,.6),transparent 42%);pointer-events:none}.iris{position:absolute;z-index:8;inset:-30%;pointer-events:none;border-radius:50%;transform:scale(0)}.iris-a{background:var(--orange);mix-blend-mode:multiply}.iris-b{background:var(--blue);mix-blend-mode:screen}.split{position:absolute;z-index:9;left:0;width:100%;height:51%;background:var(--ivory);pointer-events:none}.split-top{top:0;transform:translateY(-101%)}.split-bottom{bottom:0;transform:translateY(101%)}.rings{position:absolute;z-index:7;left:50%;top:62%;width:10vw;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.rings i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.6);border-radius:50%;transform:scale(.2)}
.chapter{position:absolute;z-index:12;inset:0;visibility:hidden;pointer-events:none}.intro{visibility:visible}.kicker{position:absolute;left:3vw;top:14%;margin:0;font:400 .63rem var(--mono);letter-spacing:.18em;text-transform:uppercase}.intro h1{position:absolute;left:2.3vw;top:20%;margin:0;width:58vw;font:500 clamp(7rem,15.5vw,16rem)/.72 var(--display);letter-spacing:-.095em}.intro h1 span{display:block}.intro h1 span:last-child{margin-left:12vw;color:transparent;-webkit-text-stroke:1px var(--ivory)}.intro-copy{position:absolute;left:3vw;bottom:14%;margin:0;font:300 clamp(1.05rem,1.45vw,1.45rem)/1.5 var(--display);letter-spacing:-.03em}.formula{position:absolute;right:3vw;bottom:14%;margin:0;text-align:right;font:300 .62rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}.chapter h2{position:absolute;margin:0;font:500 clamp(4.5rem,9.8vw,10.5rem)/.82 var(--display);letter-spacing:-.075em}.chapter h2 span{display:block}.chapter-copy{position:absolute;margin:0;max-width:29rem;font:300 clamp(.9rem,1vw,1.05rem)/1.7 var(--mono)}.bitter{color:#fff}.bitter .kicker{left:auto;right:3vw}.bitter h2{right:2.5vw;top:18%;text-align:right;text-transform:uppercase}.bitter h2 span:nth-child(2){color:transparent;-webkit-text-stroke:1px #fff}.bitter .chapter-copy{right:3vw;bottom:12%;text-align:right}.note{position:absolute;left:3vw;display:grid;grid-template-columns:2rem 1fr;gap:.8rem;padding-top:.7rem;border-top:1px solid currentColor;width:12rem;font:300 .58rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}.note b{font-weight:500}.note-a{top:19%}.note-b{top:33%}.depth .kicker{left:50%;transform:translateX(-50%);text-align:center}.depth h2{left:50%;top:18%;transform:translateX(-50%);text-align:center;text-transform:uppercase}.depth h2 span:nth-child(2){font-size:.24em;line-height:2.2;letter-spacing:.3em}.depth h2 span:last-child{color:var(--acid)}.depth .chapter-copy{left:3vw;bottom:12%}.temperature{position:absolute;right:3vw;bottom:12%;width:22rem;text-align:right}.temperature span{font:400 3.6rem/1 var(--display)}.temperature i{display:block;width:100%;height:1px;background:currentColor;margin:.8rem 0;transform:scaleX(0);transform-origin:right}.temperature small{font:300 .56rem var(--mono);letter-spacing:.14em;text-transform:uppercase}.serve{color:var(--ink)}.serve .kicker{color:var(--ink)}.serve h2{left:3vw;top:21%;text-transform:uppercase}.serve h2 span:last-child{margin-left:8vw;color:var(--blue)}.serve .chapter-copy{left:3vw;bottom:16%;color:var(--ink)}.serve a{position:absolute;left:3vw;bottom:9%;pointer-events:auto;color:var(--ink);text-decoration:none;width:19rem;border-bottom:1px solid var(--ink);padding-bottom:.8rem;font:400 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase}.serve a span{float:right}
.progress{position:absolute;z-index:25;left:2.5vw;top:50%;width:52px;height:52px;transform:translateY(-50%)}.progress svg{position:absolute;inset:0;transform:rotate(-90deg)}.progress circle{fill:none;stroke-width:1}.track{stroke:rgba(255,255,255,.25)}.progress-circle{stroke:#fff;stroke-dasharray:144.5;stroke-dashoffset:144.5}.progress>span{position:absolute;inset:0;display:grid;place-items:center;font:400 .57rem var(--mono)}.chapters{position:absolute;z-index:28;right:2.5vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:1rem}.chapters button{border:0;background:none;color:#fff;padding:.3rem 0;display:flex;align-items:center;gap:.8rem;cursor:pointer;font:400 .56rem var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.4}.chapters button:after{content:"";width:0;height:1px;background:currentColor;transition:.35s}.chapters button.active{opacity:1}.chapters button.active:after{width:28px}.chapters em{font-style:normal}.scroll-cue{position:absolute;z-index:20;left:50%;bottom:3vh;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:.8rem;font:400 .53rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.scroll-cue i{display:block;width:42px;height:1px;background:#fff}.batch{position:absolute;z-index:20;right:2.5vw;bottom:3vh;margin:0;font:300 .51rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.invite{min-height:100svh;background:var(--orange);color:var(--ink);padding:7rem 3vw 2rem;display:grid;grid-template-columns:1fr 2.3fr 1fr;align-content:center;column-gap:3vw}.invite-index{align-self:start;margin:0;font:400 .62rem var(--mono);letter-spacing:.16em}.invite-copy p{margin:0 0 3rem;font:300 1rem/1.55 var(--mono)}.invite h2{margin:0;font:500 clamp(4.5rem,9vw,9rem)/.82 var(--display);letter-spacing:-.075em;text-transform:uppercase}.invite h2 span{color:transparent;-webkit-text-stroke:1px var(--ink)}.serve-card{align-self:end;border-top:1px solid;padding-top:1rem}.serve-card>span{font:400 .58rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.serve-card p{font:300 .88rem/1.65 var(--mono);margin:4rem 0}.serve-card a{display:block;color:inherit;text-decoration:none;border-bottom:1px solid;padding-bottom:.7rem;font:400 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.serve-card a span{float:right}.invite footer{grid-column:1/-1;margin-top:7rem;border-top:1px solid;padding-top:1rem;display:flex;justify-content:space-between;font:400 .55rem var(--mono);letter-spacing:.13em;text-transform:uppercase}
@media(max-width:800px){.topbar{height:66px;padding:0 5vw;grid-template-columns:1fr 1fr}.topbar>p{display:none}.story{height:580vh}.frame{inset:0}.frame-0 img{object-position:65% center}.frame-1 img{object-position:32% center}.frame-2 img{object-position:center}.frame-3 img{object-position:48% center}.kicker{left:6vw;top:13%}.intro h1{left:5vw;top:25%;font-size:24vw;width:90vw}.intro h1 span:last-child{margin-left:0}.intro-copy{left:6vw;bottom:18%;font-size:1rem}.formula{display:none}.chapter h2{font-size:15vw}.bitter .kicker{right:6vw}.bitter h2{right:5vw;top:22%}.bitter .chapter-copy{right:6vw;bottom:17%;max-width:78vw}.note{left:6vw;width:9rem}.note-a{top:55%}.note-b{top:66%}.depth .kicker{left:6vw;transform:none}.depth h2{top:21%;width:90vw}.depth .chapter-copy{left:6vw;bottom:18%;max-width:76vw}.temperature{right:6vw;bottom:9%;width:62vw}.temperature span{font-size:2.4rem}.serve h2{left:6vw;top:22%}.serve h2 span:last-child{margin-left:0}.serve .chapter-copy{left:6vw;bottom:18%;max-width:77vw}.serve a{left:6vw;bottom:10%;width:70vw}.progress{left:5vw;top:83px;width:44px;height:44px}.chapters{left:6vw;right:6vw;top:auto;bottom:3vh;transform:none;flex-direction:row;justify-content:space-between}.chapters button{gap:.3rem}.chapters button:after{display:none}.chapters em{display:none}.scroll-cue,.batch{display:none}.invite{grid-template-columns:1fr;padding:6rem 7vw 2rem}.invite-copy,.serve-card{grid-column:1}.invite-copy{margin-top:5rem}.invite h2{font-size:16vw}.serve-card{margin-top:6rem}.serve-card p{margin:2.5rem 0}.invite footer{flex-wrap:wrap;gap:1rem;margin-top:6rem}.boot-orbit{width:72vw}.boot-orbit:after{transform:translateY(-36vw)}}
@media(prefers-reduced-motion:reduce){.sound.active .sound-icon i{animation:none!important}}

/* Preserve a true edge-to-edge film viewport and invert utility UI over bright scenes. */
.viewport{height:100vh;height:100dvh;transform:translateZ(0)}
.canvas{position:relative;width:100%;height:100%;overflow:hidden;transform:translateZ(0)}
.canvas>.frame,.canvas>.shade,.canvas>.iris,.canvas>.split,.canvas>.rings,.canvas>.chapter,.canvas>.progress,.canvas>.chapters,.canvas>.scroll-cue,.canvas>.batch{position:fixed}

/* The relative canvas owns every film layer; avoid fixed-position drift on mobile browsers. */
.viewport,.canvas{transform:none}
.viewport{position:relative;top:auto}
.canvas>.frame,.canvas>.shade,.canvas>.iris,.canvas>.split,.canvas>.rings,.canvas>.chapter,.canvas>.progress,.canvas>.chapters,.canvas>.scroll-cue,.canvas>.batch{position:absolute}

/* Give the two-row MIRRA hero lockup a clear visual pause. */
.intro h1{line-height:.86}
.chapters,.progress,.batch{mix-blend-mode:difference}
.serve .kicker,.serve .chapter-copy,.serve a{color:#fff;mix-blend-mode:difference}
.serve a{border-color:currentColor}

/* Interactive MIRRA chapters */
.lab{position:relative;min-height:110svh;padding:8rem 4vw;overflow:hidden}.lab-heading{position:relative;z-index:3}.lab-index{margin:0 0 2.5rem;font:400 .62rem var(--mono);letter-spacing:.16em;text-transform:uppercase}.lab-heading h2,.curve-title h2{margin:0;font:500 clamp(4rem,8.5vw,9rem)/.84 var(--display);letter-spacing:-.075em;text-transform:uppercase}.lab-heading h2 span,.curve-title h2 span{color:transparent}.botanicals .lab-heading h2 span,.pour-lab .lab-heading h2 span{-webkit-text-stroke:1px var(--ink)}.night-curve .curve-title h2 span{-webkit-text-stroke:1px var(--ivory)}.lab-heading>p:last-child{max-width:31rem;margin:2.5rem 0 0;font:300 clamp(.88rem,1vw,1rem)/1.75 var(--mono)}
.botanicals{background:var(--ivory);color:var(--ink);display:grid;grid-template-columns:.95fr 1fr .85fr;gap:4vw;align-items:center}.botanical-orbit{position:relative;aspect-ratio:1;max-width:650px;width:100%;justify-self:center}.orbit-rings,.orbit-rings i{position:absolute;inset:10%;border:1px solid #07103c38;border-radius:50%}.orbit-rings i:nth-child(1){inset:16%}.orbit-rings i:nth-child(2){inset:28%}.orbit-rings i:nth-child(3){inset:40%;background:var(--orange);border:0}.botanical-core{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border-radius:50%;background:var(--blue);color:var(--ivory);display:grid;place-items:center}.botanical-core span{font:500 clamp(3rem,6vw,6rem)/1 var(--display)}.botanical-core small{position:absolute;bottom:15%;font:400 .5rem var(--mono);letter-spacing:.12em}.botanical-orbit button{--radius:clamp(95px,9vw,125px);position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--radius)) rotate(var(--counter));width:8rem;padding:.8rem;border:1px solid #07103c47;background:var(--ivory);color:var(--ink);font:400 .56rem var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.botanical-orbit button span{margin-right:.5rem;color:var(--orange)}.botanical-orbit button.active{background:var(--ink);color:var(--ivory);border-color:var(--ink)}.botanical-readout{align-self:end;border-top:1px solid;padding-top:1rem}.botanical-readout>p{display:flex;align-items:flex-start;margin:0 0 2rem}.botanical-readout>p span{font:400 4.8rem/.75 var(--display)}.botanical-readout>p small{font:400 .5rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.botanical-readout h3,.pour-panel h3,.curve-meta h3{margin:0 0 2.5rem;font:400 clamp(1.8rem,2.8vw,3rem)/1 var(--display);letter-spacing:-.06em}.botanical-readout>div{display:grid;grid-template-columns:1fr 1.4fr;gap:1rem;padding:1rem 0;border-top:1px solid #07103c33}.botanical-readout div span,.mix-chart span,.curve-values span{font:400 .52rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.botanical-readout div strong{font:400 .67rem var(--mono);text-align:right}.botanical-readout .intensity{grid-template-columns:auto 1fr auto;align-items:center}.intensity i{height:3px;background:#07103c24}.intensity b{display:block;width:84%;height:100%;background:var(--orange);transform-origin:left}
.pour-lab{background:var(--acid);color:var(--ink);display:grid;grid-template-columns:.85fr 1fr .85fr;gap:5vw;align-items:center}.pour-stage{position:relative;height:75svh;display:grid;place-items:center}.pour-halo{position:absolute;width:min(38vw,520px);aspect-ratio:1;border:1px solid var(--ink);border-radius:50%}.pour-halo:before,.pour-halo:after{content:"";position:absolute;inset:14%;border:1px solid var(--ink);border-radius:50%}.pour-halo:after{inset:31%;background:var(--orange);border:0}.glass{position:relative;z-index:2;width:min(15vw,190px);height:58%;border:2px solid var(--ink);border-top:0;border-radius:0 0 45% 45%;overflow:hidden}.liquid{position:absolute;left:0;right:0;bottom:0;height:72%;background:var(--blue);transition:height .65s cubic-bezier(.2,.8,.2,1),background .5s}.ice{position:absolute;z-index:2;width:42%;aspect-ratio:1;border:1px solid var(--ivory);transform:rotate(18deg)}.ice-a{left:14%;bottom:28%}.ice-b{right:10%;bottom:48%;transform:rotate(-12deg)}.garnish{position:absolute;z-index:3;width:72%;height:7%;left:48%;top:10%;background:var(--orange);border:1px solid var(--ink);transform:rotate(-18deg);transform-origin:left}.pour-volume{position:absolute;z-index:4;bottom:8%;right:4%;font:500 clamp(3rem,6vw,6rem)/1 var(--display)}.pour-volume small{display:block;text-align:right;font:400 .56rem var(--mono);letter-spacing:.15em}.pour-panel{align-self:end;margin-bottom:5vh}.pour-tabs{display:flex;flex-direction:column;border-top:1px solid;margin-bottom:3rem}.pour-tabs button{padding:1rem 0;border:0;border-bottom:1px solid #07103c3d;background:none;color:inherit;text-align:left;font:400 .58rem var(--mono);letter-spacing:.13em;text-transform:uppercase;cursor:pointer;opacity:.45}.pour-tabs button.active{opacity:1;padding-left:1rem;background:#07103c0d}.pour-panel>p{min-height:4.5rem;margin:0 0 2rem;font:300 .85rem/1.7 var(--mono)}.mix-chart>div{display:grid;grid-template-columns:4rem 1fr 3.5rem;gap:1rem;align-items:center;margin:.9rem 0}.mix-chart i{height:8px;border:1px solid var(--ink);padding:2px}.mix-chart b{display:block;height:100%;background:var(--blue);transform-origin:left}.mix-chart strong{font:400 .57rem var(--mono);text-align:right}
.night-curve{min-height:115svh;background:var(--blue);color:var(--ivory);display:grid;grid-template-columns:.75fr 1.6fr;gap:6vw;align-content:center}.curve-title{align-self:start}.curve-interface{align-self:center}.curve-meta{display:grid;grid-template-columns:.55fr 1fr;column-gap:3rem;align-items:end;margin-bottom:2rem}.curve-meta>p:first-child{grid-row:1/3;margin:0}.curve-meta>p:first-child span{display:block;font:500 clamp(3rem,6vw,6.5rem)/.8 var(--display)}.curve-meta small{font:400 .53rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.curve-meta h3{margin-bottom:.8rem}.curve-meta>p:last-child{margin:0;font:300 .75rem/1.6 var(--mono)}.taste-curve{display:block;width:100%;height:auto;overflow:visible}.curve-grid{fill:none;stroke:#f3ead629;stroke-width:1}.curve-path{fill:none;stroke:var(--acid);stroke-width:3}.curve-guide{stroke:var(--ivory);stroke-width:1;opacity:.55}.curve-dot{fill:var(--orange);stroke:var(--ivory);stroke-width:3}.curve-labels{fill:var(--ivory);font:400 12px var(--mono);text-anchor:middle;opacity:.7}.curve-control{display:grid;grid-template-columns:1fr auto;gap:1rem;margin-top:1.3rem;font:400 .55rem var(--mono);letter-spacing:.13em;text-transform:uppercase}.curve-control input{grid-column:1/-1;width:100%;accent-color:var(--orange)}.curve-values{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:4rem;border-top:1px solid #f3ead642}.curve-values div{display:flex;justify-content:space-between;padding:1.2rem;border-right:1px solid #f3ead642}.curve-values div:last-child{border-right:0}.curve-values strong{font:400 1.3rem var(--display)}
.invite footer{font-size:clamp(.72rem,.85vw,.9rem)}.invite footer a{color:inherit;text-decoration:none}.invite footer a:hover{text-decoration:underline}
@media(max-width:900px){.lab{min-height:auto;padding:7rem 7vw}.botanicals,.pour-lab,.night-curve{grid-template-columns:1fr;gap:4rem}.botanical-orbit{width:min(86vw,560px)}.botanical-readout{align-self:auto}.pour-stage{height:62svh}.glass{width:min(34vw,170px)}.pour-panel{margin:0}.night-curve{min-height:100svh}.curve-interface{grid-row:2}.curve-values{grid-column:1;grid-template-columns:1fr 1fr;margin-top:0}.curve-values div:nth-child(2){border-right:0}.curve-values div{border-bottom:1px solid #f3ead642}.invite footer{display:grid;grid-template-columns:1fr 1fr}.invite footer span:nth-child(even){text-align:right}.invite footer a{grid-column:1/-1;margin:1rem 0}}
@media(max-width:600px){.lab-heading h2,.curve-title h2{font-size:14vw}.botanical-orbit{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.orbit-rings,.botanical-core{display:none}.botanical-orbit button{position:static;transform:none;width:auto}.botanical-orbit button:last-child{grid-column:1/-1}.pour-stage{height:54svh}.pour-volume{right:0}.curve-meta{grid-template-columns:1fr;gap:1.2rem}.curve-meta>p:first-child{grid-row:auto}.curve-meta>p:first-child span{font-size:15vw}.taste-curve{margin-left:-5vw;width:110%}.curve-values div{padding:1rem 0}.curve-values div:nth-child(odd){padding-right:1rem}.curve-values div:nth-child(even){padding-left:1rem}.invite footer{grid-template-columns:1fr}.invite footer span:nth-child(even){text-align:left}}