/* Framed Quiet Stem study. Existing MAX brand colours; natural colour belongs to the imagery. */
body.is-portfolio-gate{overflow:hidden}
.portfolio-gate{--paper:#f2f0ec;--ink:#171715;--red:#c93626;--rule:#17171530;--gutter:8px;--pad:12px;--seam:32%;position:fixed;inset:0;height:100dvh;z-index:100;background:var(--paper);color:var(--ink);font-family:'Inter Tight',Arial,sans-serif;isolation:isolate}
.portfolio-gate[hidden]{display:none}
.portfolio-gate *{box-sizing:border-box}
.gate-sheet{position:absolute;inset:var(--gutter);border:1px solid var(--rule);--unzip:0;--zip-x:0px;--mx:0px;transform-origin:15% 100%;transition:transform 1s cubic-bezier(.5,0,.8,.35),opacity .85s ease}
.gate-sheet:before,.gate-sheet:after{content:'';position:absolute;z-index:12;pointer-events:none;width:34px;height:3px;background:var(--red)}
.gate-sheet:before{left:-1px;top:-2px}.gate-sheet:after{right:-1px;bottom:-2px}
.frame-index{position:absolute;bottom:-6px;left:var(--pad);z-index:12;padding:0 8px;background:var(--paper);font:8px/1 'Courier New',monospace;letter-spacing:.12em}
.gate-sheet.is-falling{transform:translateY(115vh) rotate(5deg);opacity:.3;pointer-events:none}
.gate-upper{position:absolute;inset:0 0 calc(100% - var(--seam));background:var(--paper);overflow:hidden}
.botanical-nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px var(--pad);border-bottom:1px solid var(--rule)}
.botanical-brand{display:flex;align-items:center;gap:10px;color:var(--ink)!important;font-family:Georgia,serif;font-size:27px;letter-spacing:-1.3px;line-height:1;min-height:44px;text-decoration:none}
.botanical-brand svg{width:23px;height:32px}
.concept-label,.gate-skip,.botanical-kicker,.gate-edition,.product-caption,.gate-bottom-note,.zip-caption{font:10px/1.5 'Courier New',monospace;letter-spacing:.05em}
.concept-label{color:#656460}
.gate-skip{display:flex;gap:24px;min-height:44px;align-items:center;color:var(--ink);text-decoration:none}
.gate-skip span{font-size:21px;color:var(--red)}
.botanical-heading{margin:var(--pad)}
.botanical-kicker{display:block;margin-bottom:14px;color:var(--red)}
.botanical-heading h1{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0;color:var(--ink);font:400 clamp(32px,8.8vw,144px)/.9 'Inter Tight',Arial,sans-serif;letter-spacing:-.055em}
.botanical-heading h1>span{white-space:nowrap}
.gate-edition{display:none}
.gate-lower{position:absolute;inset:var(--seam) 0 0;background:var(--paper);overflow:hidden;transform:translateY(calc(var(--unzip)*46px)) rotate(calc(var(--unzip)*.3deg));transform-origin:0 0;transition:transform .2s ease-out}
.balm-copy{position:absolute;z-index:5;top:42px;left:var(--pad);width:27%;max-width:330px}
.balm-copy>.botanical-kicker{font-size:9px;margin-bottom:18px}
.balm-copy h2{font:400 clamp(26px,2.8vw,43px)/1.05 'Inter Tight',Arial,sans-serif;letter-spacing:-.045em;margin:0}
.balm-copy h2 em{font:italic 400 1.05em Georgia,serif}
.balm-copy>p:not(.balm-status){font-size:14px;line-height:1.5;max-width:27ch;color:#66645f;margin:18px 0}
.scent-picks{display:flex;gap:10px;margin:16px 0}
.scent-picks button{padding:5px 4px 5px 0;min-height:36px;display:flex;align-items:center;gap:5px;background:transparent;font-size:11px;color:var(--ink);border:0;border-bottom:1px solid transparent;cursor:pointer}
.scent-picks button[aria-pressed=true]{border-bottom-color:var(--red)}
.scent-picks i{width:9px;height:9px;border-radius:50%;background:#aaa;border:1px solid #17171530}
.scent-picks button:nth-child(2) i{background:#62645d}.scent-picks button:nth-child(3) i{background:var(--red)}
.balm-buy{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:265px;min-height:46px;padding:10px 16px;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:0;font-size:13px;transition:background .3s,transform .3s;cursor:pointer}
.balm-buy:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.balm-buy span{font-size:20px}
.botanical-text{display:block;background:none;border:0;color:var(--ink);font-size:12px;min-height:40px;padding:10px 0;cursor:pointer;text-align:left}
.botanical-notes{position:absolute;left:0;bottom:40px;width:300px;max-width:calc(100vw - 64px);padding:22px;background:var(--paper);box-shadow:0 12px 32px #17171518;border:1px solid var(--ink);z-index:8}
.botanical-notes p{font:14px/1.5 'Inter Tight',sans-serif;color:var(--ink)}
.botanical-notes span{display:block;font:9px monospace;margin-top:12px;color:var(--red)}
.balm-status{font:10px/1.4 monospace;color:#66645f;min-height:15px;margin:0}
.botanical-world{position:absolute;inset:0 0 0 29%;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 98%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 98%)}
.growing-product{position:absolute;width:clamp(260px,22vw,380px);left:29%;bottom:12%;transform:rotate(-12deg);transform-origin:50% 100%;animation:product-grow 5.5s cubic-bezier(.22,.61,.36,1) both;z-index:2;filter:drop-shadow(12px 16px 12px #17171522)}
.product-sway{transform:translateX(var(--mx));transition:transform 1.8s ease-out}
.balm-tube{display:block;width:100%;height:auto;transition:filter 1s}
.botanical-world[data-scent=sage] .balm-tube{filter:hue-rotate(22deg) saturate(.68)}
.botanical-world[data-scent=clay] .balm-tube{filter:hue-rotate(-42deg) saturate(.8)}
.meadow-back{position:absolute;width:114%;bottom:-12%;left:-7%;z-index:1;transform:translateX(calc(var(--mx)*-.4));transition:transform 2s ease-out;mask-image:linear-gradient(to right,transparent,#000 18%);-webkit-mask-image:linear-gradient(to right,transparent,#000 18%)}
.meadow-photo{display:block;width:100%;height:auto;user-select:none}
.meadow-back .meadow-photo{transform-origin:70% 100%;animation:meadow-emerge 4.8s cubic-bezier(.22,.61,.36,1) both,meadow-breathe 12s 4.8s ease-in-out infinite}
.meadow-front{position:absolute;width:104%;left:16%;bottom:-55%;z-index:3;transform:scaleX(-1) rotate(-3deg);filter:blur(1px);mask-image:linear-gradient(to right,transparent,#000 20%);-webkit-mask-image:linear-gradient(to right,transparent,#000 20%)}
.meadow-front .meadow-photo{transform-origin:65% 100%;animation:meadow-emerge 5.4s .2s cubic-bezier(.22,.61,.36,1) both,meadow-breathe 10s 5.6s ease-in-out infinite alternate-reverse}
.product-caption{position:absolute;right:var(--pad);top:45px;color:#656460;writing-mode:vertical-rl;font-size:8px}
.tube-scent{font-size:10px;color:var(--ink)}
.botanical-orbit{display:none}
.hero-last-word{position:absolute;right:var(--pad);bottom:60px;z-index:4;font:400 clamp(50px,8.8vw,144px)/.9 'Inter Tight',Arial,sans-serif;letter-spacing:-.065em;pointer-events:none;color:var(--ink)}
.gate-bottom-note{position:absolute;bottom:max(15px,env(safe-area-inset-bottom));left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:center;gap:14px;z-index:6;color:var(--ink);font-size:9px}
.gate-bottom-note a{min-height:36px;display:flex;align-items:center;color:inherit;text-decoration:none}
.gate-bottom-note>span{white-space:nowrap}
.gate-bottom-note b{font-weight:400;display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--rule);border-radius:50%;height:25px;width:25px;margin-left:7px}
.portfolio-zip{position:absolute;left:0;right:0;top:var(--seam);height:44px;transform:translateY(-50%);z-index:10;--handle-width:64px;touch-action:none}
.zip-teeth{position:absolute;top:21px;left:0;right:0;height:1px;background:var(--ink);opacity:.4}
.zip-open{position:absolute;top:21px;left:0;width:calc(var(--unzip)*100%);height:2px;background:var(--red)}
.zip-handle{position:absolute;left:var(--zip-x);top:0;width:64px;height:44px;padding:0;background:none;border:0;cursor:grab;touch-action:none;z-index:2}
.zip-handle:active{cursor:grabbing}
.zip-handle svg{width:100%;height:100%;display:block}
.zip-caption{position:absolute;right:var(--pad);top:29px;font-size:8px;color:#656460;pointer-events:none}
.zip-caption b{font-weight:400;margin-left:15px;color:var(--red)}
.gate-sheet.is-dragging .zip-caption{opacity:0}
.gate-sheet.is-dragging .gate-lower{transition:none}
.gate-sheet.is-returning .zip-handle,.gate-sheet.is-returning .zip-open{transition:all .4s cubic-bezier(.22,.61,.36,1)}
.portfolio-gate :focus-visible{outline:2px solid var(--red);outline-offset:4px}
.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}
/* Annotations appear after the actual growth animation, and reset on re-entry. */
.growth-callouts{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .7s ease-in-out}
.portfolio-gate.has-grown .growth-callouts{opacity:1}
.growth-callout{position:absolute;padding:9px 12px;background:#f2f0eced;border:1px solid #17171545;font:10px/1.2 'Courier New',monospace;letter-spacing:.035em;white-space:nowrap}
.growth-callout i{display:inline-block;width:5px;height:5px;margin-right:8px;background:var(--red);vertical-align:2px}
.growth-callout--tube{right:12%;top:12%}
.growth-callout--meadow{left:37%;top:55%}
.callout-leader{position:absolute;right:100%;top:50%;width:34px;height:30px;border-top:1px solid #17171570;border-left:1px solid #17171570;transform:skewY(-24deg);transform-origin:100% 0}
.growth-callout--meadow .callout-leader{right:auto;left:100%;top:50%;transform:rotate(180deg);transform-origin:50% 0}
.flower-pop{position:absolute;z-index:4;width:clamp(100px,10vw,150px);aspect-ratio:3/2;pointer-events:none;overflow:hidden;transform-origin:42% 100%;animation:flower-popup .8s cubic-bezier(.16,1,.3,1) both,flower-float 6s 1.1s ease-in-out infinite}
.flower-pop img{display:block;width:100%;height:100%;object-fit:cover;clip-path:polygon(53% 24%,57% 31%,64% 34%,61% 39%,70% 45%,62% 48%,67% 56%,57% 52%,54% 48%,51% 57%,47% 70%,43% 84%,40% 100%,37% 100%,41% 82%,45% 67%,49% 53%,52% 44%,47% 43%,50% 39%,47% 35%,51% 35%);filter:saturate(.78) brightness(1.06)}
.flower-pop--one{left:60%;bottom:-12px;animation-delay:.65s,1.8s}
.flower-pop--two{right:4%;bottom:0;width:105px;animation-delay:1.05s,2.2s}
.flower-pop--three{left:37%;bottom:9%;width:120px;animation-delay:1.35s,2.5s}
@keyframes product-grow{from{transform:translate(40px,110%) rotate(14deg) scale(.7)}to{transform:translate(0,0) rotate(-12deg) scale(1)}}
@keyframes meadow-emerge{from{transform:translateY(24%) scaleY(.6);opacity:0}to{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes meadow-breathe{0%,100%{transform:rotate(-.55deg) translateX(-3px)}50%{transform:rotate(.65deg) translateX(3px)}}
@keyframes flower-popup{from{opacity:0;transform:translateY(28px) scale(.45) rotate(-7deg)}to{opacity:.92;transform:translateY(0) scale(1) rotate(0)}}
@keyframes flower-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:2px -4px;rotate:1.5deg}}
@media(min-width:640px){.portfolio-gate{--gutter:12px;--pad:16px}}
@media(min-width:768px){.portfolio-gate{--gutter:16px;--pad:24px}}
@media(min-width:1024px){.portfolio-gate{--gutter:20px;--pad:32px}}
@media(max-width:900px){.concept-label{display:none}.botanical-heading h1{font-size:8.4vw}.balm-copy{width:31%}.balm-copy h2{font-size:30px}.balm-copy>p:not(.balm-status){font-size:12px}.scent-picks{gap:5px}.botanical-world{left:29%;right:-8%}.growing-product{width:340px;left:22%}.growth-callout{font-size:8px;padding:7px}.growth-callout--tube{right:9%;top:12%}.growth-callout--meadow{left:42%;top:59%}}
@media(max-width:600px){.portfolio-gate{--seam:28%}.botanical-nav{height:66px;gap:8px}.botanical-brand{font-size:23px}.botanical-brand svg{width:18px}.gate-skip{font-size:9px;gap:9px}.botanical-heading{margin-top:20px}.botanical-heading h1{font-size:8.2vw;gap:8px}.botanical-heading .botanical-kicker{font-size:8px;margin-bottom:16px}.balm-copy{top:41px;width:44%;max-width:none}.balm-copy>.botanical-kicker{font-size:7px;max-width:20ch;margin-bottom:15px}.balm-copy h2{font-size:clamp(24px,6.4vw,36px)}.balm-copy>p:not(.balm-status){font-size:11px;line-height:1.45;margin:14px 0}.scent-picks{gap:5px;flex-wrap:wrap;margin:10px 0}.scent-picks button{font-size:10px;min-height:36px}.scent-picks i{width:7px;height:7px}.balm-buy{font-size:11px;min-height:44px;padding:9px}.botanical-text{font-size:10px;min-height:40px}.balm-status{font-size:8px}.botanical-world{left:32%;right:-34%}.growing-product{width:clamp(255px,70vw,355px);left:16%;bottom:23%}.meadow-back{width:160%;left:-26%;bottom:5%;mask-image:linear-gradient(to right,transparent 20%,#000 53%);-webkit-mask-image:linear-gradient(to right,transparent 20%,#000 53%)}.meadow-front{width:155%;left:0;bottom:-19%}.product-caption{display:none}.hero-last-word{font-size:13.3vw;bottom:70px}.gate-bottom-note{font-size:7px;gap:5px;bottom:max(13px,env(safe-area-inset-bottom))}.gate-bottom-note a{max-width:23ch}.gate-bottom-note b{width:21px;height:21px;margin-left:3px}.zip-caption{font-size:7px}.zip-caption{color:transparent}.zip-caption b{color:var(--red);margin-left:0}.growth-callout--tube{right:4%;top:11%;font-size:7px;padding:6px}.growth-callout--meadow{display:none}.callout-leader{width:18px;height:20px}.flower-pop--one{left:53%;width:82px;bottom:-6px}.flower-pop--two{right:1%;width:70px;bottom:0}.flower-pop--three{left:38%;bottom:24%;width:80px}}
@media(max-height:700px) and (orientation:portrait){.portfolio-gate{--seam:27%}.botanical-nav{height:58px}.botanical-heading{margin-top:12px}.botanical-heading .botanical-kicker{margin-bottom:10px;font-size:7px}.balm-copy{top:31px}.balm-copy>.botanical-kicker{display:none}.balm-copy h2{font-size:24px}.balm-copy>p:not(.balm-status){font-size:10px;margin:10px 0}.scent-picks{margin:4px 0;gap:3px}.scent-picks button{font-size:9px}.botanical-text{font-size:9px}.hero-last-word{font-size:12vw;bottom:46px}.growing-product{bottom:21%}.gate-bottom-note{bottom:8px;font-size:6px}.gate-bottom-note a{min-height:28px}.growth-callout--tube{top:12%;font-size:6px}}
@media(max-height:600px) and (orientation:landscape){.portfolio-gate{--seam:32%;--gutter:8px;--pad:16px}.botanical-nav{height:48px;padding:3px var(--pad)}.botanical-brand{font-size:21px}.botanical-heading{margin:12px var(--pad)}.botanical-heading .botanical-kicker{display:none}.botanical-heading h1{font-size:48px}.balm-copy{top:24px;width:36%;max-width:330px}.balm-copy>.botanical-kicker{display:none}.balm-copy h2{font-size:24px}.balm-copy h2 br{display:none}.balm-copy>p:not(.balm-status){font-size:10px;line-height:1.3;margin:7px 0;max-width:40ch}.scent-picks{margin:0;gap:10px}.scent-picks button{min-height:36px;font-size:9px}.balm-buy{width:160px;min-height:36px;padding:6px 10px;font-size:11px}.botanical-text{position:absolute;left:172px;bottom:15px;width:125px;font-size:9px;min-height:36px}.balm-status{font-size:7px;min-height:10px}.botanical-world{left:39%;right:0}.growing-product{width:170px;left:33%;bottom:-2%}.meadow-back{bottom:-52%;width:104%}.meadow-front{bottom:-115%}.hero-last-word{font-size:55px;bottom:32px}.product-caption{display:none}.gate-bottom-note{bottom:4px;font-size:7px}.gate-bottom-note a{min-height:26px}.growth-callout--tube{top:14%;right:7%;font-size:7px}.growth-callout--meadow{display:none}.flower-pop--one{width:70px;left:60%}.flower-pop--two{width:65px;right:4%}.flower-pop--three{width:70px;left:38%}}
@media(prefers-reduced-motion:reduce){.growing-product,.meadow-photo,.flower-pop{animation:none!important}.gate-sheet,.gate-lower,.product-sway,.meadow-back,.balm-tube,.growth-callouts{transition:none}.gate-sheet.is-falling{opacity:0}.growth-callouts{opacity:1}.flower-pop{opacity:.92}}
