/* DZN scroll direction: large type, cinematic product footage, pinned reveals. */
.story{padding:0;position:relative;background:#11130f;isolation:isolate}
.story-pin{position:relative;padding:58px 6vw 70px;min-height:760px;overflow:hidden}
.story-film{position:absolute;inset:0;z-index:-1;background:#11130f}
.story-film video{width:100%;height:100%;object-fit:cover;display:block;opacity:.76}
.story-film:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#11130f35,#11130f40 45%,#11130fb5),linear-gradient(0deg,#11130f,transparent 35%)}
.story .section-label{position:relative;border-color:#f4ead740;z-index:2}
.story-grid>div{min-width:0}
.story-grid{position:relative;align-items:center;gap:5vw;margin-top:60px;min-height:510px}
.story h2{font-size:clamp(90px,10vw,160px);line-height:.94}
.story h2 span{color:var(--orange)}
.story-body{padding:30px;background:#11130fb8;border-left:2px solid var(--orange)}
.story-body p{color:#ece5d8}.story-body .lead{color:var(--paper)}
.story .facts{gap:35px}.story .brush-note{margin-top:30px}
.story .facts span{color:#d3cebf}
.flavors{position:relative;padding:0}.product-pin{padding:60px 5vw 80px;overflow:hidden}
.flavor-grid{min-height:620px}.flavor-copy{position:relative;z-index:2}
.bottle-stage{overflow:visible;isolation:isolate;border:0}
.bottle-stage:before{border-color:#d9460b75;transform:rotate(-8deg);transition:none}
.bottle-stage #bottle{transition:none}
.manifesto{position:relative;z-index:3;isolation:isolate}
.manifesto .mascot-panel img{will-change:transform}
.manifesto-copy{position:relative;z-index:2}
.manifesto h2{overflow:hidden}
.soon h2 span{display:inline-block}
.brand-banner{overflow:hidden;position:relative}
.brand-banner img{will-change:transform}
.section-label{position:relative}
.section-label:after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--orange);transform:scaleX(var(--section-progress,1));transform-origin:left}
@media(min-width:1000px) and (min-height:700px){
 body.cinematic .story{height:190vh;overflow:visible}
 body.cinematic .story-pin{position:sticky;top:0;height:100vh;min-height:700px;padding-top:5vh;padding-bottom:5vh}
 body.cinematic .story-grid{height:calc(100vh - 150px);min-height:0;margin-top:40px;grid-template-columns:1fr 1fr}
 body.cinematic .story h2{font-size:clamp(75px,min(8vw,13vh),125px)}
 body.cinematic .story-grid>div:first-child{transform:none}
 body.cinematic .story-body{opacity:1;transform:none;padding:24px 30px}
 body.cinematic .story-body p{font-size:clamp(16px,1.25vw,20px);line-height:1.5}
 body.cinematic .story-body .lead{font-size:clamp(23px,2vw,30px);line-height:1.25}
 body.cinematic .story-film{clip-path:none;transform:none}
 body.cinematic .flavors{height:170vh;overflow:visible}
 body.cinematic .product-pin{position:sticky;top:0;height:100vh;min-height:700px;padding-top:5vh;padding-bottom:5vh}
 body.cinematic .flavor-grid{height:calc(100vh - 130px);min-height:0;padding-top:20px}
 body.cinematic .bottle-stage{height:100%;max-height:740px}
 body.cinematic .bottle-stage #bottle{transform:translate3d(var(--product-x,0px),0,0) rotate(var(--product-rotate,-7deg)) scale(var(--product-scale,1));will-change:transform}
 body.cinematic .bottle-stage:before{transform:rotate(var(--frame-rotate,-8deg)) scale(var(--frame-scale,1));will-change:transform}
 body.cinematic .flavor-copy{transform:translate3d(var(--product-copy-x,0px),0,0);opacity:var(--product-copy-opacity,1);will-change:transform,opacity}
 body.cinematic .flavor-copy h2{font-size:clamp(58px,6.2vw,98px)}
 body.cinematic .ghost-word{transform:rotate(180deg) translateY(var(--ghost-y,0px));color:#34291824}
 body.cinematic .manifesto .mascot-panel img{transform:scale(var(--mascot-scale,1)) translateY(var(--mascot-y,0px))}
 body.cinematic .brand-banner img{transform:scale(var(--banner-scale,1));transform-origin:65% 50%}
}
@media(max-width:999px),(max-height:699px){
 .story-pin{padding:45px 6vw 60px;min-height:0}.story-grid{min-height:0;margin-top:40px;gap:36px}.story h2{font-size:clamp(72px,12vw,130px)}
 .story-film video{object-position:64% center;opacity:.5}.story-body{padding:22px;background:#11130fc9}
 .product-pin{padding:45px 6vw 60px}.flavor-grid{min-height:0}.story .facts{gap:25px}
}
@media(max-width:800px){
 .story-grid{grid-template-columns:1fr}.story h2{font-size:clamp(44px,15vw,86px)}.story-body .lead{font-size:23px}
 .story-film:after{background:linear-gradient(0deg,#11130f 5%,#11130f30 90%)}.story-film video{height:650px;object-position:70% center}
 .story .facts strong{font-size:28px}.product-pin .flavor-grid{gap:35px}.product-pin .bottle-stage{height:510px}
 .story .brush-note{margin-top:20px}.manifesto .mascot-panel{height:360px}.manifesto .mascot-panel img{object-position:center 35%}
}
@media(prefers-reduced-motion:reduce){.story-film video{opacity:.65}.section-label:after{transform:none}.brand-banner img,.manifesto .mascot-panel img{will-change:auto}}
@media(min-width:1000px) and (min-height:700px){body.cinematic .bottle-stage{height:calc(100vh - 180px)}body.cinematic .flavor-grid>div{min-height:0}}
@media(min-width:1000px) and (min-height:700px) and (max-height:849px){
 body.cinematic .product-pin{padding-top:30px;padding-bottom:30px}
 body.cinematic .flavor-grid{height:calc(100vh - 110px);padding-top:15px}
 body.cinematic .flavor-copy h2{font-size:clamp(54px,5.2vw,74px);line-height:1.08}
 body.cinematic .flavor-copy>p{font-size:16px;line-height:1.45;margin:14px 0}
 body.cinematic .flavor-copy>.eyebrow{font-size:13px;margin-top:0}
 body.cinematic .product-specs{padding:16px 0;margin:18px 0 14px}
 body.cinematic .product-specs strong{font-size:55px}
 body.cinematic .product-specs strong span{font-size:23px}
 body.cinematic .flavor-copy>.chocolate-tag{font-size:25px}
 body.cinematic .flavor-copy .button{min-height:46px;padding:12px 20px;margin-top:0}
}
/* The existing story heading becomes the zoom-through mask. */
.story h2 .portal-line{display:block;color:inherit;white-space:nowrap;line-height:inherit;font-size:inherit}
.story h2 .portal-line:last-child{color:var(--orange)}
.word-portal{display:none;visibility:hidden;opacity:0;pointer-events:none}
body.story-portal .word-portal{display:block;position:fixed;inset:0;z-index:10}
.portal-stage{position:absolute;inset:0;overflow:hidden;background:var(--paper);isolation:isolate}
.portal-letter-mask{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
body.story-portal .portal-preview.flavors{position:absolute;inset:0;height:100%;margin:0;overflow:hidden}
body.story-portal .portal-preview .product-pin{position:relative;top:0}
body.story-portal .story{height:330vh;overflow:visible}
body.story-portal .story-pin{position:sticky;top:0;height:100vh;min-height:0}
body.story-portal .story + .flavors{margin-top:-100vh}
body.story-portal .story-pin>.section-label,body.story-portal .story-grid,body.story-portal .story-film{opacity:var(--story-scene-opacity,1)}
.portal-preview .flavor-copy{transform:none!important;opacity:1!important}
.portal-preview .portal-bottle{transform:rotate(-4deg)!important;transition:none!important}
.portal-preview .bottle-stage:before{transform:rotate(4deg) scale(1)!important}
.portal-preview .ghost-word{transform:rotate(180deg) translateY(-65px)!important}
.portal-preview .section-label:after{transform:scaleX(.08)}
@media(max-width:999px),(max-height:699px){
 body.story-portal .story-pin{padding:24px 6vw;overflow:hidden}
 body.story-portal .story-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px;min-height:0}
 body.story-portal .story h2{font-size:clamp(40px,12vw,66px);line-height:.95}
 body.story-portal .story .brush-note{font-size:22px;margin:10px 0 0}
 body.story-portal .story-body{padding:12px 16px}
 body.story-portal .story-body p{font-size:16px;line-height:1.4;margin:10px 0}
 body.story-portal .story-body .lead{font-size:18px;line-height:1.3;margin-top:0}
 body.story-portal .story .facts{margin-top:12px;padding-top:12px;gap:24px}
 body.story-portal .story .facts strong{font-size:22px}
 body.story-portal .story .facts span{font-size:11px;margin-top:7px}
 .portal-preview .portal-bottle{transform:rotate(-7deg)!important}
 .portal-preview .bottle-stage:before{transform:rotate(-8deg)!important}
 .portal-preview .ghost-word{transform:rotate(180deg)!important}
 .portal-preview .section-label:after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){body.story-portal .word-portal{display:none}body.story-portal .story + .flavors{margin-top:0}}
/* Leave room for Road Rage's overhanging brush strokes at every breakpoint. */
h1,h2,.manifesto h2{overflow:visible;padding:.12em .22em .16em;box-sizing:border-box}
.hero-copy,.flavor-copy,.manifesto-copy,.soon-grid>div:first-child{min-width:0}
.story-grid>div:first-child{container-type:inline-size}
.story h2,body.cinematic .story h2{font-size:clamp(40px,17cqw,115px)}
.hero .feathers-title{line-height:1.13}
.hero .feathers-title em{line-height:1.13}
.manifesto h2{line-height:1.25}
@media(max-width:999px),(max-height:699px){body.story-portal .story h2{font-size:clamp(40px,12vw,66px)}}
@media(max-width:800px){
 .hero .feathers-title{font-size:clamp(34px,11.5vw,70px)}
 .manifesto h2{font-size:clamp(30px,9.7vw,65px)}
}
/* Extra clearance for the opening B and the tilted headline's upper strokes. */
.hero .feathers-title{font-size:clamp(62px,6.6vw,100px);padding:.25em .45em .2em;line-height:1.15;transform:rotate(-2deg);margin-top:14px;margin-bottom:20px}
.hero .feathers-title em{line-height:1.15}
@media(max-width:800px){.hero .feathers-title{font-size:clamp(30px,10.6vw,66px);margin-top:14px;margin-bottom:18px}}

/* Larger header brand lockup. */
header{height:120px}
header .logo{width:200px}
@media(max-width:800px){header{height:98px}header .logo{width:150px}}

/* Travel through the live scene, with no opaque transition curtain. */
.story-scene{position:relative;isolation:isolate}
body.story-portal .story-scene{position:absolute;inset:0;padding:inherit;transform-origin:0 0;will-change:transform}
.portal-stage{background:transparent}
.portal-clip-defs{position:absolute;pointer-events:none}
body.story-portal .portal-preview.flavors{clip-path:url(#dzn-letter-window)}
body.story-portal .story{z-index:2}
body.story-portal .story + .flavors{z-index:1}
body.story-portal .story{background:transparent}

@media(max-width:800px){header .launch-link{max-width:122px;flex-shrink:0;text-align:center;line-height:1.35}header .launch-link span{display:none}}

/* Vector separators retain the brand ink color on every device. */
.ticker-asterisk{width:.85em;height:.85em;flex:0 0 .85em;align-self:center;color:var(--ink)}

/* Mobile: keep the hero in normal flow so copy cannot leave a fixed empty gap. */
@media(max-width:800px){
 .hero{height:auto;min-height:0;padding:18px 6vw 58px;display:flex;flex-direction:column;gap:8px}
 .hero-copy{width:100%;padding-top:0}
 .hero .eyebrow{margin:0 0 4px}
 .hero .feathers-title{margin:4px 0 8px;padding:.25em .3em .2em;line-height:1.13}
 .hero .intro{margin:8px 0 12px;font-size:16px;line-height:1.45;max-width:100%}
 .hero-copy>.button{margin-top:0;min-height:48px;padding:13px 18px}
 .hero .hero-art{position:relative;top:auto;bottom:auto;right:auto;width:100%;height:clamp(340px,103vw,450px);flex:none;margin:0 auto}
 .hero .hero-bottle.bottle-center{height:100%;width:100%;left:0;bottom:0;transform:none;object-fit:contain}
 .hero .hero-rooster{right:-8%;bottom:0;height:86%;max-width:90%}
 .hero .launch-sticker{top:10%;right:-1%;font-size:18px;padding:10px;width:120px}
 .hero .art-note{bottom:-15px;right:0;font-size:9px}
 .hero:after{height:38px}
 .flavor-grid{gap:24px;padding-top:24px}
 .bottle-stage{height:clamp(360px,110vw,480px)}
 .soon-grid{gap:32px}
}