/* Photographic cut-paper hero, inspired by the Libriccino print treatment. */
.home:not(.menu-is-open) .header:not(.scrolled){background:#e7e4da;color:#171714}
.home .header:not(.scrolled) .logo img{filter:invert(1)}
.home:not(.menu-is-open) .header:not(.scrolled) .nav-cta{background:#171714;color:#fff}
.collage-hero{--paper:#e7e4da;position:relative;isolation:isolate;overflow:hidden;background:var(--paper);color:#171714;min-height:760px;min-height: min(900px,100svh);padding:152px var(--gutter) 90px;display:flex;align-items:center}
.collage-hero::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.095;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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.collage-copy{position:relative;z-index:5;width:57%;max-width:760px}
.collage-copy h1{font-family:var(--font-brand);font-size:clamp(64px,7.8vw,128px);font-weight:500;line-height:.98;letter-spacing:-.065em;margin:0 0 44px;text-align:left}
.collage-copy h1>span{position:relative;display:inline-block;padding:0 .1em .075em;margin-left:-.1em;isolation:isolate}
.collage-copy h1>span::before{content:"";position:absolute;inset:7% -2% -2%;background:#fff200;z-index:-1;transform:rotate(-2deg);clip-path:polygon(0 5%,28% 2%,47% 5%,76% 0,99% 4%,100% 95%,72% 99%,52% 96%,22% 100%,1% 96%)}
.collage-intro{max-width:390px}
.collage-intro p{font-size:20px;line-height:1.5;font-weight:400;margin:0 0 24px;letter-spacing:-.015em}
.collage-intro .button{font-size:16px;min-height:52px;padding:15px 22px;gap:28px}
.collage-scene{position:absolute;right:0;top:95px;bottom:0;width:55%;pointer-events:none}
.collage-disc{position:absolute;width:78%;aspect-ratio:1;top:4%;left:8%;background:#fff200;border-radius:50%;clip-path:polygon(50% 0,73% 4%,88% 17%,99% 40%,97% 64%,83% 86%,62% 98%,36% 99%,14% 87%,2% 65%,0 40%,12% 17%,31% 4%);transform:rotate(-12deg)}
.collage-city{position:absolute;bottom:-5%;left:-10%;width:115%;height:auto;max-width:none;filter:grayscale(1);mix-blend-mode:multiply;transform:rotate(-3deg);opacity:.75}
.collage-mic{position:absolute;right:-9%;bottom:-3%;width:94%;height:auto;max-width:none;transform:rotate(7deg);transform-origin:85% 95%;filter:grayscale(1)}
.collage-print{position:absolute;z-index:4;right:6%;top:13%;transform:rotate(8deg);font-size:clamp(18px,2.1vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.06}
.collage-print span{display:table;background:#171714;color:var(--paper);padding:5px 13px 8px;clip-path:polygon(0 4%,98% 0,100% 96%,3% 100%)}
.collage-print span+span{margin-top:3px;margin-left:17px}
.collage-tape{position:absolute;bottom:8%;right:7%;height:34px;width:150px;background:#fff200;opacity:.9;transform:rotate(-18deg);clip-path:polygon(0 8%,5% 0,13% 9%,29% 1%,62% 5%,96% 0,100% 100%,85% 94%,41% 100%,9% 93%,0 100%);z-index:4}
.collage-hero.is-playing .collage-mic{animation:collage-voice 4.6s both}
.collage-hero.is-playing .collage-city{animation:collage-city 2.2s both}
.collage-hero.is-playing .collage-disc{animation:collage-disc 3.4s both}
.collage-hero.is-playing .collage-print{animation:collage-label 3.8s both}
.collage-hero.is-playing .collage-tape{animation:collage-tape 3.8s both}
@keyframes collage-voice{0%{transform:translate(14%,32%) rotate(24deg)}24%{transform:translate(0,0) rotate(4deg)}36%{transform:rotate(9deg)}50%,64%{transform:rotate(7deg)}74%{transform:rotate(4deg)}88%,100%{transform:rotate(7deg)}}
@keyframes collage-city{0%{transform:translateY(35%) rotate(-6deg);opacity:0}65%,100%{transform:translateY(0) rotate(-3deg);opacity:.75}}
@keyframes collage-disc{0%{transform:translate(15%,10%) rotate(-32deg);opacity:0}20%{opacity:1}65%,100%{transform:rotate(-12deg)}}
@keyframes collage-label{0%,30%{opacity:0;transform:translateY(-22px) rotate(14deg)}42%,100%{opacity:1;transform:rotate(8deg)}}
@keyframes collage-tape{0%,65%{opacity:0;transform:translateY(16px) rotate(-12deg)}78%,100%{opacity:.9;transform:rotate(-18deg)}}
@media(min-width:1600px){.collage-scene{width:52%}.collage-mic{width:88%}}
@media(max-width:1050px){.collage-hero{min-height:750px;padding-top:132px}.collage-copy{width:62%}.collage-copy h1{font-size:clamp(64px,8.6vw,90px)}.collage-scene{width:56%;top:150px}.collage-mic{width:114%;right:-24%}.collage-print{right:8%;top:6%;font-size:23px}.collage-disc{width:100%;left:2%;top:12%}.collage-city{width:140%;left:-15%;bottom:-3%}}
@media(max-width:640px){.collage-hero{display:block;min-height:0;padding:112px 22px 0}.collage-copy{width:100%;max-width:none}.collage-copy h1{font-size:clamp(48px,12.6vw,72px);line-height:1;letter-spacing:-.06em;margin-bottom:26px}.collage-intro{max-width:100%;position:relative;z-index:7}.collage-intro p{font-size:17px;line-height:1.45;margin-bottom:20px}.collage-intro .button{font-size:15px;min-height:50px;padding:14px 19px;gap:23px}.collage-scene{position:relative;top:auto;right:auto;bottom:auto;width:calc(100% + 44px);margin:26px -22px 0;height:330px}.collage-mic{width:89%;right:-1%;bottom:-6%;transform:rotate(7deg)}.collage-disc{width:70%;left:12%;top:9%}.collage-city{width:120%;left:-13%;bottom:-7%}.collage-print{font-size:19px;right:6%;top:8%}.collage-tape{right:8%;bottom:6%;height:24px;width:100px}}
@media(max-width:360px){.collage-hero{padding-top:102px}.collage-scene{height:285px}.collage-print{font-size:16px}.collage-copy h1{font-size:46px}.collage-intro p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.collage-hero.is-playing .collage-scene>*{animation:none!important}}