/* The homepage palette and raster paint kit, adapted to each page's content. */
html:has(.paint-page){overflow-x:hidden}
.paint-page{--page-paint:#f36aaa;--page-secondary:#527faa;--page-line:#62405d;position:relative;isolation:isolate;overflow-x:clip;background:#0e0e19}
.paint-page[data-paint-theme="stars"]{--page-paint:#a68ad1;--page-secondary:#537bb4;--page-line:#59486e}
.paint-page[data-paint-theme="swamp"]{--page-paint:#ffd05a;--page-secondary:#ff974d;--page-line:#6b5140}
.paint-page[data-paint-theme="about"]{--page-paint:#ff974d;--page-secondary:#8870be}
.paint-page[data-paint-theme="account"]{--page-paint:#aa79df;--page-secondary:#8082bd}
.page-paint-frame{position:absolute;inset:0 0 auto;overflow:hidden;pointer-events:none;z-index:-1}
.page-paint{position:absolute;display:block;width:clamp(220px,24vw,420px);aspect-ratio:1;background:var(--page-paint);mask:var(--paint-asset) center/contain no-repeat;-webkit-mask:var(--paint-asset) center/contain no-repeat;opacity:.8;pointer-events:none}
.page-paint-left{left:-18px}.page-paint-right{right:-18px;background:var(--page-secondary)}
.page-paint-impact.page-paint-left{left:calc(clamp(220px,24vw,420px) * -.52);transform:rotate(15deg)}
.page-paint-impact.page-paint-right{right:calc(clamp(220px,24vw,420px) * -.52);transform:rotate(-20deg)}
.page-paint-bottom.page-paint-left{left:-90px;transform:rotate(-25deg)}
.page-paint-bottom.page-paint-right{right:-90px;transform:rotate(20deg)}
.paint-page .site-header{position:relative;z-index:5}
.paint-page .eyebrow,.paint-page .step,.paint-page .tag{color:var(--page-paint)}
.paint-page>.page,.paint-page>.dashboard{max-width:1120px;margin-left:auto;margin-right:auto;width:calc(100% - 150px)}
.paint-page .about-page{min-height:calc(100vh - 190px);padding-top:76px}
.paint-page .about-page .page-intro{max-width:760px;position:relative}
.paint-page .page-intro h1,.paint-page .dashboard>h1{position:relative;isolation:isolate;width:fit-content}
.paint-page .page-intro h1:after,.paint-page .dashboard>h1:after{content:'';position:absolute;inset:4px -48px -12px -24px;background:linear-gradient(90deg,var(--page-paint),var(--page-secondary));opacity:.65;mask:var(--brush-asset,url('/images/paint/kit-straight-brush.webp')) center/100% 100% no-repeat;-webkit-mask:var(--brush-asset,url('/images/paint/kit-straight-brush.webp')) center/100% 100% no-repeat;z-index:-1;pointer-events:none}
.paint-page .page-intro>p{max-width:650px;font-size:1.05rem;line-height:1.85}
.paint-page .project-story{width:calc(100% - 150px);padding-top:85px;padding-bottom:85px;gap:60px}
.paint-page .project-story h2{position:relative;isolation:isolate;width:fit-content;max-width:100%}
.paint-page .project-story h2:after{content:'';position:absolute;inset:2px -40px -10px -22px;z-index:-1;background:linear-gradient(90deg,var(--page-paint),var(--page-secondary));opacity:.65;mask:var(--brush-asset,url('/images/paint/kit-straight-brush.webp')) center/100% 100% no-repeat;-webkit-mask:var(--brush-asset,url('/images/paint/kit-straight-brush.webp')) center/100% 100% no-repeat;pointer-events:none}
.paint-page .project-facts{width:calc(100% - 150px);position:relative;isolation:isolate;border-color:var(--page-line);background:#19182a}
.paint-page .project-facts:before{content:'';position:absolute;left:-85px;bottom:-60px;width:210px;aspect-ratio:1;z-index:-1;background:var(--page-paint);mask:var(--rear-paint-asset,url('/images/paint/kit-side-splash.webp')) center/contain no-repeat;-webkit-mask:var(--rear-paint-asset,url('/images/paint/kit-side-splash.webp')) center/contain no-repeat;pointer-events:none}
.paint-page .project-facts span{color:var(--page-paint)}
.hero-paint{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.hero-paint .page-paint{width:clamp(160px,19vw,330px);opacity:.8}
.hero-paint-top-left{top:-45px;left:-24px}
.hero-paint-top-right{top:-45px;right:-24px;background:var(--page-secondary)}
.hero-paint-bottom-left{bottom:-90px;left:-100px;transform:rotate(20deg)}
.hero-paint-bottom-right{bottom:-80px;right:-90px;background:var(--page-secondary);transform:rotate(-25deg)}
.paint-page .slideshow-controls,.paint-page .back-link,.paint-page .title-motion-control{z-index:4}
.paint-page .panel{border-color:var(--page-line);background:#1d1b30;position:relative;isolation:isolate}
.paint-page .panel:after{content:'';position:absolute;right:-42px;top:-40px;width:105px;aspect-ratio:1;pointer-events:none;background:var(--page-paint);mask:var(--panel-paint-asset,url('/images/paint/reference-stars.webp')) center/contain no-repeat;-webkit-mask:var(--panel-paint-asset,url('/images/paint/reference-stars.webp')) center/contain no-repeat;opacity:.8}
.paint-page .registration:after{top:auto;bottom:-42px;transform:rotate(45deg);background:var(--page-secondary)}
.paint-page .primary{background:var(--page-paint);color:#1b1829}
.paint-page footer{position:relative;z-index:1}
@media(max-width:850px){.page-paint{width:190px}.page-paint-impact.page-paint-left{left:-100px}.page-paint-impact.page-paint-right{right:-100px}.paint-page>.page,.paint-page>.dashboard,.paint-page .project-story,.paint-page .project-facts{width:calc(100% - 90px)}.paint-page .project-story{gap:28px;padding-left:0;padding-right:0}.paint-page .dashboard{padding-left:0;padding-right:0}.hero-paint .page-paint{width:180px}.paint-page .back-link{left:40px}}
@media(max-width:580px){.page-paint{width:125px}.page-paint-impact.page-paint-left{left:-65px}.page-paint-impact.page-paint-right{right:-65px}.paint-page>.page,.paint-page>.dashboard,.paint-page .project-story,.paint-page .project-facts{width:calc(100% - 56px)}.paint-page .about-page{padding-top:48px}.paint-page .dashboard>h1{font-size:3.15rem}.paint-page .panel:after{width:75px;right:-28px;top:-28px}.paint-page .registration:after{top:auto;bottom:-28px}.hero-paint .page-paint{width:125px}.hero-paint-top-left{left:-30px}.hero-paint-top-right{right:-30px}.hero-paint-bottom-left{left:-65px;bottom:-55px}.hero-paint-bottom-right{right:-60px;bottom:-55px}.paint-page .project-story{padding-top:60px;padding-bottom:60px}.paint-page .project-facts{margin-left:auto;margin-right:auto}.paint-page .back-link{left:32px}}
/* Keep peripheral paint clear of reading columns and footer labels. */
.page-paint-impact.page-paint-left{left:calc(clamp(220px,24vw,420px) * -.65)}
.page-paint-impact.page-paint-right{right:calc(clamp(220px,24vw,420px) * -.65)}
.paint-page footer{background:#0e0e19e8}
@media(max-width:850px){.page-paint-impact.page-paint-left{left:-125px}.page-paint-impact.page-paint-right{right:-125px}}
@media(max-width:580px){.page-paint-impact.page-paint-left{left:-85px}.page-paint-impact.page-paint-right{right:-85px}}
.page-paint{transform:scaleX(var(--paint-flip,1))}
.page-paint-impact.page-paint-left{transform:rotate(15deg) scaleX(var(--paint-flip,1))}
.page-paint-impact.page-paint-right{transform:rotate(-20deg) scaleX(var(--paint-flip,1))}
.page-paint-bottom.page-paint-left{transform:rotate(-25deg) scaleX(var(--paint-flip,1))}
.page-paint-bottom.page-paint-right{transform:rotate(20deg) scaleX(var(--paint-flip,1))}
.hero-paint-bottom-left{transform:rotate(20deg) scaleX(var(--paint-flip,1))}
.hero-paint-bottom-right{transform:rotate(-25deg) scaleX(var(--paint-flip,1))}
.paint-page .panel:after{width:var(--panel-mark-size,105px);top:var(--panel-mark-top,-40px);right:var(--panel-mark-right,-42px);transform:scaleX(var(--paint-flip,1))}
.paint-page .registration:after{top:auto;transform:rotate(45deg) scaleX(var(--paint-flip,1))}
@media(max-width:580px){.paint-page .panel{--panel-mark-size:75px}}

/* Native-ratio, feathered paint. Only the page background gets blur. */
.page-paint{background:none;mask:none;-webkit-mask:none}
.page-paint:before{content:'';position:absolute;inset:0;background:var(--page-paint);mask-image:var(--paint-asset),linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 90%,transparent);-webkit-mask-image:var(--paint-asset),linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 90%,transparent);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-composite:intersect,intersect;-webkit-mask-composite:source-in,source-in}
.page-paint-right:before,.hero-paint-top-right:before,.hero-paint-bottom-right:before{background:var(--page-secondary)}
.page-paint-frame .page-paint{filter:blur(3px);opacity:.48}
