/* Flyposter collage: diagonal torn surfaces, overprinted ink, xerox wear. */
.home{--ink:#0a0a08;--line:#373731;background:#0a0a08 url('assets/xerox-grit.svg') repeat;font-family:'Courier New',monospace}
.home .header{height:85px;border:0;padding-left:30px;padding-right:30px}.home .brand{transform:rotate(-2deg)}.home .entry-intro{height:46px;padding:0 30px;transform:rotate(-.5deg)}.home .entry-intro h1{font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:-.3px}.home .entry-intro p{font-size:8px;letter-spacing:0}
.collage-split{height:clamp(690px,calc(100svh - 250px),1000px);position:relative;isolation:isolate;margin:0;overflow:hidden;background:#0a0a08}
.collage-side{position:absolute;top:0;bottom:0;display:block;overflow:hidden;min-width:0}
.still-side{--side-accent:var(--lime);left:0;width:64%;background:transparent;z-index:2}
.moving-side{--side-accent:var(--red);left:38%;width:62%;background:transparent;z-index:3}
.collage-side:before{content:'';position:absolute;inset:0;background-image:url('assets/xerox-grit.svg');background-size:650px 520px;opacity:.9;z-index:5;pointer-events:none;mix-blend-mode:multiply}
.collage-side:after{content:'';position:absolute;inset:0;background:none;z-index:4;pointer-events:none}
.photo-mosaic,.video-pile{position:absolute;inset:0 0 25px}
.scrap{margin:0;position:absolute;background:#deded8;border:0;box-shadow:none;transition:translate .3s;clip-path:polygon(2% 1%,25% 0,41% 2%,67% 0,98% 2%,100% 25%,98% 51%,100% 78%,97% 100%,69% 98%,44% 100%,23% 98%,0 99%,2% 75%,0 48%,1% 21%)}
.scrap img{height:100%;object-fit:cover;filter:contrast(1.18) saturate(.65)}
.scrap figcaption{position:absolute;bottom:6px;left:8px;right:auto;background:#080808;color:#e9e9e0;padding:3px 5px;font-size:7px;line-height:1;transform:rotate(-2deg)}
.scrap:after{content:'';position:absolute;inset:0;background:url('assets/xerox-grit.svg') 0 0/350px 280px;opacity:.65;mix-blend-mode:multiply;pointer-events:none}
.depth-photo-1{left:-4%;top:7%;width:48%;height:75%;transform:rotate(-12deg);z-index:1;padding:0}
.scrap-1 img{object-position:50% 32%}
.depth-photo-2{left:40%;top:-6%;width:53%;height:40%;transform:rotate(10deg);z-index:1;border:8px solid #e5e5dd}
.scrap-2 img{filter:grayscale(1) contrast(1.5)}
.depth-photo-3{left:34%;top:30%;width:45%;height:47%;transform:rotate(-9deg);z-index:3;border:4px solid #12120f}
.depth-photo-4{left:-8%;top:70%;width:60%;height:30%;transform:rotate(11deg);z-index:4;border:5px solid #d9d9d1}
.depth-photo-5{left:56%;top:66%;width:32%;height:30%;transform:rotate(16deg);z-index:4}
.side-tag{position:absolute;top:22px;left:26px;background:#090909;color:var(--lime);padding:8px 10px;z-index:7;font-size:10px;font-weight:700;letter-spacing:-.3px;transform:rotate(-7deg);clip-path:polygon(1% 6%,98% 0,100% 94%,0 100%)}
.moving-side .side-tag{left:auto;right:29px;top:29px;background:var(--white);color:#111;transform:rotate(6deg)}
.paper-note{position:absolute;left:43%;top:20%;z-index:6;background:#e5e5dc;color:#0a0a08;padding:8px 10px;font-size:clamp(18px,2.4vw,36px);font-family:Flyposter,Impact,sans-serif;font-weight:700;line-height:.83;letter-spacing:-.5px;transform:rotate(12deg);clip-path:polygon(0 7%,93% 0,100% 89%,7% 100%);mask-image:url('assets/worn-ink.svg');mask-size:400px 180px}
.marker-cross{position:absolute;left:59%;top:31%;font-size:180px;font-family:'Courier New',monospace;line-height:.7;z-index:6;transform:rotate(-17deg);color:var(--lime);text-shadow:3px 1px #111;pointer-events:none}
.loop-card{margin:0;position:absolute;box-shadow:none;background:#0a0a08;padding:0;border:0;transition:translate .3s;clip-path:polygon(1% 4%,28% 0,61% 2%,97% 0,100% 37%,98% 64%,100% 97%,63% 100%,37% 97%,0 100%,2% 66%,0 28%)}
.loop-card video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:contrast(1.22) saturate(.62)}
.loop-card:after{content:'';position:absolute;inset:0;background:url('assets/xerox-grit.svg') 50%/480px 380px;opacity:.62;mix-blend-mode:multiply;pointer-events:none}
.loop-card figcaption{position:absolute;bottom:8px;left:9px;font-size:7px;background:#090909;color:var(--white);padding:4px 5px;z-index:1}
.depth-loop-1{left:26%;top:3%;width:76%;height:46%;transform:rotate(11deg);z-index:1;border:6px solid #111}
.depth-loop-2{left:8%;top:41%;width:69%;height:45%;transform:rotate(-12deg);z-index:3;border:7px solid #d8d8cc}
.loop-2 video{object-position:20% 50%}
.depth-loop-3{left:70%;top:54%;width:37%;height:39%;transform:rotate(14deg);z-index:4;border:5px solid #111}
.loop-3 video{object-position:75% 50%}
.cut-sticker{position:absolute;left:64%;top:32%;background:var(--red);color:#111;padding:10px 8px;z-index:6;font-family:Flyposter,Impact,sans-serif;font-size:32px;font-weight:700;letter-spacing:-1px;line-height:.85;transform:rotate(-13deg);border:3px solid #111;clip-path:polygon(2% 0,100% 5%,96% 100%,0 96%)}
.cut-title{position:absolute;left:4%;right:29%;bottom:33px;z-index:8;transform:rotate(-5deg)}
.cut-title h2{display:flex;align-items:baseline;width:max-content;font-family:Flyposter,Impact,'Arial Narrow',sans-serif;font-weight:700;font-size:clamp(130px,17.5vw,310px);line-height:.8;letter-spacing:-.055em;color:var(--lime);position:relative;isolation:isolate;padding:10px 10px 4px 6px}
.cut-title h2:before{content:'';position:absolute;inset:3% -7% -4% -4%;background:#0a0a08;clip-path:polygon(0 8%,24% 0,41% 3%,65% 0,100% 6%,98% 43%,100% 91%,70% 100%,44% 95%,13% 100%,0 91%,2% 51%);z-index:-1}
.ink-letter{display:inline-block;mask-image:url('assets/worn-ink.svg');mask-size:330px 150px;transform:scaleY(1.14) rotate(-2deg);transform-origin:bottom center}
.letter-1{transform:scaleY(1.21) rotate(3deg);translate:0 -2px}.letter-2{transform:scaleY(.96) rotate(-5deg);translate:0 -3px}.letter-3{transform:scaleY(1.1) rotate(2deg)}.letter-4{transform:scaleY(1.21) rotate(-2deg);translate:0 -2px}.letter-5{transform:scaleY(1.04) rotate(4deg)}
.moving-side .cut-title{left:30%;right:4%;bottom:48px;transform:rotate(6deg)}
.moving-side .cut-title h2{font-size:clamp(96px,13.3vw,235px);color:var(--red);letter-spacing:-.065em;padding-right:10px}
.moving-side .cut-title h2:before{background:#0a0a08;inset:-8% -2% -7% -4%;clip-path:polygon(0 7%,33% 0,65% 8%,100% 2%,98% 54%,100% 96%,65% 100%,25% 95%,0 100%,2% 40%)}
.moving-side .letter-2{color:var(--white)}
.cut-action{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--white);font-size:10px;font-weight:700;letter-spacing:-.3px;padding:9px 10px;background:#0a0a08;clip-path:polygon(0 7%,100% 0,98% 100%,1% 94%)}
.cut-action>span:last-child{font-size:25px;line-height:1;color:var(--side-accent)}
.collage-side:hover .cut-action>span:first-child{text-decoration:underline;text-underline-offset:4px}
.collage-side:focus-visible{outline:0}.collage-side:focus-visible .cut-action{background:white;color:#111;outline:3px solid white}
.collage-side:hover .scrap-3,.collage-side:hover .depth-loop-2{translate:0 -5px}
.ripped-seam{position:absolute;inset:-1px;z-index:7;pointer-events:none;background:#121210 url('assets/xerox-grit.svg');background-size:350px 280px}
.ripped-seam:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 43%,#e8e8dc 44%,#e8e8dc 46%,transparent 47%);opacity:.65}
.poster-scuff{position:absolute;inset:0;z-index:9;background:url('assets/xerox-grit.svg') 13% 40%/900px 720px;pointer-events:none;opacity:.6;mix-blend-mode:multiply}
.loop-toggle{position:absolute;top:83px;right:29px;z-index:12;min-height:36px;background:#111;color:var(--white);border:0;font-size:9px;font-family:'Courier New',monospace;font-weight:700;padding:10px 12px;transform:rotate(-4deg);clip-path:polygon(2% 0,99% 7%,97% 100%,0 94%)}.loop-toggle:hover{background:white;color:#111}
.loop-status{position:absolute;bottom:26px;right:27px;z-index:12;max-width:230px;background:#0a0a08;color:white;padding:6px 8px;font-size:8px;line-height:1.5}.loop-status:empty{display:none}
.home .entry-bottom{padding:18px 30px;min-height:63px;transform:rotate(-.3deg)}.home .entry-bottom>span{font-size:9px;font-weight:700;letter-spacing:-.2px}.home .entry-bottom p,.home .entry-bottom button{font-family:'Courier New',monospace;font-size:9px}.home .footer{padding:18px 30px;border:0}
@media(min-width:1800px){.collage-split{min-height:800px}.cut-title{bottom:50px}.moving-side .cut-title{bottom:65px}}
@media(max-width:1000px) and (min-width:701px){.collage-split{min-height:650px}.cut-title{right:30%;left:4%}.cut-title h2{font-size:17.5vw}.moving-side .cut-title h2{font-size:13.1vw}.cut-action{font-size:8px}.side-tag{font-size:8px}.loop-toggle{right:20px;font-size:8px}.paper-note{font-size:24px}.marker-cross{font-size:130px}}
@media(max-width:700px){.home .header{height:80px;padding:0 20px}.home .entry-intro{padding:0 20px;height:45px}.home .entry-intro h1{font-size:8px}.home .entry-intro p{font-size:6px}.collage-split{height:1100px;margin:0;min-height:0}.collage-side{width:100%;left:0;bottom:auto}.still-side{top:0;height:610px;clip-path:polygon(0 0,100% 0,100% 79%,94% 81%,91% 79%,86% 84%,82% 82%,77% 86%,74% 84%,68% 89%,64% 86%,58% 91%,54% 89%,48% 93%,44% 91%,38% 95%,33% 93%,27% 98%,22% 96%,17% 100%,0 100%)}.moving-side{top:480px;height:620px;clip-path:polygon(0 21%,17% 21%,22% 17%,27% 19%,33% 14%,38% 16%,44% 12%,48% 14%,54% 10%,58% 12%,64% 7%,68% 10%,74% 5%,77% 7%,82% 3%,86% 5%,91% 0,100% 0,100% 100%,0 100%)}.ripped-seam{display:none}.photo-mosaic,.video-pile{bottom:10px}.depth-photo-1{left:-7%;top:13%;width:57%;height:64%;transform:rotate(-13deg)}.depth-photo-2{left:46%;top:0;width:63%;height:33%;transform:rotate(11deg)}.depth-photo-3{left:39%;top:33%;width:53%;height:39%;transform:rotate(-11deg)}.depth-photo-4{left:-10%;top:72%;width:62%;height:24%;transform:rotate(13deg)}.depth-photo-5{left:69%;top:67%;width:36%;height:29%;transform:rotate(15deg)}.scrap figcaption{font-size:6px;bottom:6px}.side-tag{top:20px;left:18px;font-size:8px}.moving-side .side-tag{top:110px;right:16px;font-size:8px}.paper-note{top:22%;left:48%;font-size:25px}.marker-cross{left:69%;top:35%;font-size:110px}.cut-title{left:5%;right:18%;bottom:91px;transform:rotate(-7deg)}.cut-title h2{font-size:39vw;padding-left:4px}.cut-action{font-size:8px;margin-top:15px;padding:9px 8px;max-width:280px}.cut-action>span:last-child{font-size:22px}.depth-loop-1{left:26%;top:13%;width:83%;height:36%;transform:rotate(13deg)}.depth-loop-2{left:-4%;top:43%;width:77%;height:38%;transform:rotate(-14deg)}.depth-loop-3{left:73%;top:55%;width:38%;height:36%;transform:rotate(16deg)}.loop-card{border-width:4px}.loop-card figcaption{font-size:6px;left:6px;bottom:6px}.cut-sticker{left:66%;top:41%;font-size:27px;padding:8px 6px;border-width:2px}.moving-side .cut-title{left:7%;right:5%;bottom:36px;transform:rotate(5deg)}.moving-side .cut-title h2{font-size:31vw}.moving-side .cut-action{max-width:none}.loop-toggle{top:647px;right:19px;font-size:8px;min-height:34px}.loop-status{bottom:8px;right:18px;max-width:270px;font-size:7px}.home .entry-bottom{padding:18px 20px;display:block}.home .entry-bottom>span{font-size:7px}.home .entry-bottom p,.home .entry-bottom button{font-size:8px}.home .footer{padding:15px 20px}}
@media(max-width:370px){.collage-split{height:1030px}.still-side{height:570px}.moving-side{top:450px;height:580px}.cut-title{bottom:85px}.loop-toggle{top:607px}.moving-side .cut-title{bottom:36px}.side-tag,.moving-side .side-tag{font-size:7px}.paper-note{font-size:22px}.cut-sticker{font-size:24px}.home .header{padding:0 15px}}
@media(prefers-reduced-motion:reduce){.collage-side:hover .scrap-3,.collage-side:hover .depth-loop-2{translate:none}}
/* Keep the five frames visible around the overprinted titles. */
.ink-letter,.paper-note{mask-mode:luminance}
.cut-title h2{font-size:clamp(125px,15vw,270px)}
.moving-side .cut-title h2{font-size:clamp(95px,11.6vw,210px)}
.scrap-3 img{object-position:50% 85%}
.depth-photo-4{top:59%;height:27%;width:52%;left:-5%}
.depth-photo-5{left:49%;top:56%;width:28%;height:27%;transform:rotate(16deg)}
@media(max-width:1000px) and (min-width:701px){.cut-title h2{font-size:15vw}.moving-side .cut-title h2{font-size:11.6vw}}
@media(max-width:700px){.cut-title h2{font-size:35vw}.moving-side .cut-title h2{font-size:28.5vw}.depth-photo-4{left:-8%;top:62%;width:57%;height:24%}.depth-photo-5{left:62%;top:54%;width:35%;height:27%}}
.scrap-4 img,.scrap-5 img{object-position:50% 100%}
.ink-letter{line-height:1.06}