#perspectives-journey{height:850vh;position:relative;background:#222;color:#f8f5e9}
#perspectives-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;font-family:Arial,sans-serif}
.perspective-paper{background-color:#eed477;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.12' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.perspective-bar,.perspective-footer{position:absolute;z-index:20;left:3%;right:3%;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.perspective-bar{top:12%;border-top:1px solid #eed47766;padding-top:12px}.perspective-footer{bottom:3%}.perspective-footer a{color:inherit;text-decoration:none;padding:14px 0}
.perspective-backdrop{position:absolute;inset:50% 0 0;opacity:.4}
.collage-disc{position:absolute;width:min(76vh,78vw);aspect-ratio:1;left:50%;top:52%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #eee5;background:#f6f2e5;color:#222}
.collage-disc>small{position:absolute;left:5%;top:49%;font-size:10px}.collage-disc>small:last-child{left:auto;right:5%}
.collage-pieces{position:absolute;inset:16%;transform:rotate(-18deg)}.collage-pieces img{position:absolute;object-fit:cover;width:43%;height:53%;border:7px solid #f6f2e5;box-shadow:0 1px 3px #0002}.collage-pieces img:nth-child(1){left:1%;top:2%;transform:rotate(-18deg)}.collage-pieces img:nth-child(2){right:0;top:0;transform:rotate(14deg)}.collage-pieces img:nth-child(3){left:2%;bottom:-2%;transform:rotate(-7deg)}.collage-pieces img:nth-child(4){right:1%;bottom:-5%;transform:rotate(9deg)}
.collage-hub{position:absolute;left:43%;top:43%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 27%,#fff5c6,#c5a941 43%,#28251a 79%);box-shadow:8px 10px 24px #0005}
.perspective-triptych{position:absolute;left:12%;top:24%;width:76%;height:58%;display:grid;grid-template-columns:1fr .86fr 1fr;background:#f5f1e5;color:#222;padding:2%;gap:3%;opacity:0}.perspective-triptych>img{width:100%;height:100%;object-fit:cover}.triptych-type{display:flex;flex-direction:column;justify-content:space-between;padding:8% 0;font-size:10px}.triptych-type h2{font-size:clamp(20px,3.8vw,70px);line-height:.93;font-weight:400;letter-spacing:-.065em}.triptych-type em{font-style:normal;color:#8a690c}
.perspective-triangle{position:absolute;left:50%;top:16%;width:min(65vw,83vh);height:73vh;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%);display:flex;align-items:center;flex-direction:column;color:#24211a;padding-top:5vh;opacity:0}.perspective-triangle small{font-size:10px}.perspective-triangle h2{text-align:center;font-size:clamp(20px,3.3vw,59px);font-weight:400;line-height:.98;letter-spacing:-.055em;margin:4vh 0 0}.perspective-triangle b{font-size:25px;margin-top:2vh}
.perspective-wheels{position:absolute;inset:0;opacity:0}.perspective-wheel{position:absolute;width:90vw;aspect-ratio:1;top:48%;border-radius:50%;border:15vw solid #f6f2e5;color:#222;left:-49%;box-sizing:border-box}.perspective-wheel.right{left:auto;right:-49%;border-color:#eed477}.perspective-wheel span{position:absolute;left:50%;top:50%;font-size:12px;white-space:nowrap;transform:translate(-50%,-50%) rotate(calc(var(--n)*45deg)) translateY(-36vw)}.perspective-wheel span:nth-child(odd){font-size:clamp(20px,3vw,55px)}.perspective-seed{position:absolute;width:5vw;aspect-ratio:1;left:47.5%;top:48%;border-radius:50%;background:#eed477}
.perspective-type-scene{position:absolute;inset:0;opacity:0}.perspective-headline{position:absolute;left:5%;top:20%;width:74%;font-size:clamp(38px,6.5vw,118px);font-weight:400;line-height:.95;letter-spacing:-.055em;margin:0}.perspective-headline .word{display:inline-block;white-space:nowrap}.perspective-headline .letter{display:inline-block}.perspective-ball{position:absolute;left:32%;top:51%;width:23vw;aspect-ratio:1;border-radius:50%;background:#eed477}.perspective-notes{position:absolute;right:5%;top:24%;font-size:11px;line-height:1.7;color:#e0d8be}.perspective-notes p{margin-bottom:25px}.perspective-colour-photo{position:absolute;left:4%;bottom:-30%;width:35%;height:44%;object-fit:cover;border:14px solid #f5f1e5}
.perspective-poster-scene{position:absolute;inset:0;opacity:0;background:linear-gradient(30deg,transparent 49.9%,#eee2 50%,transparent 50.1%),linear-gradient(-30deg,transparent 49.9%,#eee2 50%,transparent 50.1%)}.perspective-poster{position:absolute;left:50%;top:50%;width:50vw;height:68vh;transform:translate(-50%,-50%);border:1px solid #f5f1e5;padding:2%;background:#222}.perspective-poster h2{font-size:4vw;line-height:.92;letter-spacing:-.055em;font-weight:400;margin:0}.perspective-poster img{position:absolute;left:4%;bottom:5%;width:51%;height:47%;object-fit:cover}.perspective-poster .poster-dot{position:absolute;right:6%;bottom:5%;width:30%;aspect-ratio:1;border-radius:50%}.perspective-poster small{position:absolute;right:6%;top:10%;font-size:10px;line-height:1.6}.perspective-endline{position:absolute;bottom:12%;left:5%;font-size:8vw;letter-spacing:-.06em;line-height:.9;transform:translateY(180%)}
@media(max-width:700px){.perspective-bar{font-size:7px;top:13%}.perspective-footer{font-size:8px}.collage-disc{width:94vw}.collage-pieces img{border-width:4px}.collage-disc>small{font-size:7px}.perspective-triptych{left:4%;width:92%;top:30%;height:44%;gap:2%;padding:3%}.triptych-type{font-size:8px}.triptych-type h2{font-size:6vw}.perspective-triangle{width:96vw;height:58vh;top:25%;padding-top:4vh}.perspective-triangle h2{font-size:7vw;line-height:1.03;margin-top:4vh}.perspective-triangle b{margin-top:1vh}.perspective-wheel{width:160vw;border-width:25vw;left:-118%;top:48%}.perspective-wheel.right{right:-118%}.perspective-wheel span{transform:translate(-50%,-50%) rotate(calc(var(--n)*45deg)) translateY(-66vw);font-size:9px}.perspective-wheel span:nth-child(odd){font-size:20px}.perspective-headline{width:92%;font-size:10vw;top:24%}.perspective-notes{top:auto;bottom:18%;font-size:9px}.perspective-notes p{margin-bottom:10px}.perspective-ball{width:42vw;left:16%;top:46%}.perspective-colour-photo{width:53%;height:32%;border-width:7px}.perspective-poster{width:86vw;height:58vh;padding:5%}.perspective-poster h2{font-size:8vw}.perspective-poster small{top:36%;font-size:8px}.perspective-endline{font-size:12vw;bottom:17%}}
@media(prefers-reduced-motion:reduce){html:not(.force-motion) #perspectives-journey{height:100svh}}
/* Continuous vertical sequence: the geometry stays connected between frames. */
.collage-disc{width:min(94vh,78vw);top:54%}.collage-pieces{inset:13%}
.collage-pieces img:nth-child(1){clip-path:polygon(0 0,90% 6%,100% 70%,30% 100%,0 92%)}
.collage-pieces img:nth-child(2){clip-path:polygon(25% 0,80% 10%,100% 80%,0 100%,6% 32%)}
.collage-pieces img:nth-child(3){clip-path:polygon(0 20%,72% 0,100% 75%,54% 100%,0 75%)}
.perspective-triptych{top:23%;height:62%;left:13%;width:74%;gap:2%;padding:2.5%}.triptych-type h2{font-size:clamp(20px,3.2vw,60px)}
.perspective-gallery{position:absolute;inset:19% 1.5% 14%;display:grid;grid-template-columns:1.4fr .5fr 1fr;background:#f6f2e5;color:#222;opacity:0;overflow:hidden}.perspective-gallery img{width:100%;height:100%;object-fit:cover}.perspective-gallery>div{padding:12% 8%;display:flex;flex-direction:column;justify-content:space-between}.perspective-gallery small{font-size:10px}.perspective-gallery h3{font-size:3vw;line-height:.93;letter-spacing:-.06em;font-weight:400}.perspective-gallery p{font-size:12px}
.perspective-triangle{top:14%;height:83vh;clip-path:polygon(0 0,100% 0,54% 100%,46% 100%)}
.perspective-wheels{inset:0}.perspective-wheel{width:100vw;top:53%;left:0;border-width:18vw;transform:translate(-50%,-50%)}.perspective-wheel.right{right:auto;left:100%;transform:translate(-50%,-50%);border-color:#f3e3ac}.perspective-wheel span{transform:translate(-50%,-50%) rotate(calc(var(--n)*45deg)) translateY(-40vw)}
.wheel-pointer{position:absolute;top:53%;left:0;width:29vw;height:1px;background:#f6f2e566;transform:rotate(-15deg);transform-origin:0 0}.wheel-pointer.right{left:auto;right:0;transform:rotate(15deg);transform-origin:100% 0}.wheel-pointer:before{content:'';position:absolute;left:-2.5vw;top:-2.5vw;width:5vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#333 12%,#e5dfc7 15%,#fff 60%,#eee 65%)}.wheel-pointer.right:before{left:auto;right:-2.5vw}
.perspective-seed{width:3vw;left:48.5%;top:51%;background:#f3e3ac}
.perspective-headline{left:1.5%;top:25%;width:62%;font-size:6.2vw;line-height:.97}.perspective-headline .letter{will-change:transform}.perspective-ball{left:20%;top:50%;width:23vw;will-change:transform}.perspective-notes{right:8%;top:28%}.perspective-colour-photo{left:1.5%;bottom:5%;width:48%;height:52%;opacity:0;border-width:20px}
.perspective-poster{width:52vw;height:86vh;top:52%;padding:1%;}.perspective-poster h2{font-size:3.4vw;width:70%}.perspective-poster small{font-size:8px;right:5%;top:8%}.perspective-poster img{left:2%;bottom:3%;width:49%;height:48%}.perspective-poster .poster-dot{width:23%;right:3%;bottom:3%}.perspective-poster:after{content:'MAKE ROOM FOR IDEAS.       GIVE THEM A NEW SHAPE.';position:absolute;font-size:1.35vw;line-height:1;left:53%;width:43%;top:50%}.perspective-endline{font-size:6vw;bottom:10%}
@media(max-width:700px){.collage-disc{width:96vw}.perspective-triptych{left:4%;width:92%;top:27%;height:49%}.triptych-type h2{font-size:5.4vw}.perspective-gallery{inset:24% 2% 19%;grid-template-columns:1fr .65fr 1fr}.perspective-gallery h3{font-size:5vw}.perspective-gallery small{font-size:7px}.perspective-gallery p{font-size:9px}.perspective-triangle{top:24%;height:60vh}.perspective-wheel{width:170vw;left:-36%;top:52%;border-width:29vw}.perspective-wheel.right{left:136%;right:auto}.perspective-wheel span{transform:translate(-50%,-50%) rotate(calc(var(--n)*45deg)) translateY(-68vw)}.perspective-seed{width:6vw;left:47%}.perspective-headline{width:95%;top:23%;font-size:9vw}.perspective-ball{width:39vw;left:20%;top:49%}.perspective-notes{right:5%;top:auto;bottom:14%}.perspective-colour-photo{width:51%;height:40%;border-width:7px}.perspective-poster{width:90vw;height:63vh;top:50%;padding:2%}.perspective-poster h2{font-size:6.5vw}.perspective-poster small{font-size:6px;top:28%}.perspective-poster:after{font-size:2.4vw}.perspective-endline{font-size:10vw;bottom:14%}}

@media(min-width:701px){.perspective-wheel{left:-4%}.perspective-wheel.right{left:104%}}

/* One bounded artboard gives every frame the same coordinate system. */
.perspective-artboard{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:min(100%,calc((100svh - 150px)*2));aspect-ratio:2;container-type:size;overflow:hidden;background:#222}
.perspective-bar{position:absolute;top:0;left:2%;right:2%;padding:8px 0;color:#f7f2dc;mix-blend-mode:difference;font-size:9px}
.collage-disc{width:48cqw;top:50%;border:1px solid #111;overflow:hidden}.collage-pieces{inset:15%;transition:none}.collage-pieces img{border-width:4px;box-shadow:none}.collage-hub{width:13%;left:43.5%;top:43.5%}
.perspective-backdrop{opacity:.12}
.perspective-triptych{left:13%;top:18%;width:74%;height:64%;padding:2.5%;gap:3%;grid-template-columns:1fr 1fr 1fr}
.triptych-type{padding:0;justify-content:space-between;font-size:10px}.triptych-type h2{font-size:3cqw;line-height:.96;letter-spacing:-.045em;margin:0}.triptych-type small{font-size:max(7px,.7cqw)}
.perspective-gallery{inset:12% 1.5%;grid-template-columns:1.2fr .6fr 1fr}.perspective-gallery h3{font-size:3cqw}
.perspective-triangle{width:48cqw;height:46cqw;top:2%;padding-top:5cqw}.perspective-triangle h2{font-size:3cqw;line-height:.98;margin-top:3cqw}.perspective-triangle small{font-size:.8cqw}.perspective-triangle b{font-size:2cqw;margin-top:1cqw}
.perspective-wheel{width:98cqw;left:-2%;top:52%;border-width:18cqw}.perspective-wheel.right{left:102%;right:auto;border-color:#f2e9c9}.perspective-wheel span{transform:translate(-50%,-50%) rotate(calc(var(--n)*45deg)) translateY(-39cqw);font-size:.9cqw}.perspective-wheel span:nth-child(odd){font-size:3cqw}
.perspective-seed{width:3cqw;left:48.5%;top:49%}.wheel-pointer{width:29cqw}.wheel-pointer:before{width:5cqw;left:-2.5cqw;top:-2.5cqw}.wheel-pointer.right:before{right:-2.5cqw}
.perspective-headline{left:1.5%;top:35%;width:64%;font-size:5.8cqw;line-height:.97;letter-spacing:-.045em;z-index:2}.perspective-headline .type-line{white-space:nowrap}.perspective-headline .letter{position:relative}.perspective-headline .word{position:relative}
.perspective-ball{width:19cqw;top:0;left:0;z-index:1;background:#f2e4aa}.perspective-notes{top:39%;bottom:auto;right:9%;font-size:max(8px,.9cqw);line-height:1.4}.perspective-notes p{margin-bottom:1.8cqw}
.perspective-colour-photo{width:48%;height:60%;bottom:0;left:1.5%;border:2cqw solid #eee4c1;z-index:0}
.perspective-poster{width:51cqw;height:48cqw;top:50%;padding:1cqw}.perspective-poster h2{font-size:3.2cqw}.perspective-poster small{top:7%;font-size:.6cqw}.perspective-poster:after{font-size:1.3cqw}.perspective-endline{font-size:6cqw;bottom:4%}
@media(max-width:600px){.perspective-artboard{width:100%;aspect-ratio:1.25}.collage-disc{width:86cqw}.perspective-triptych{left:4%;width:92%;height:50%;top:25%;gap:2%}.triptych-type h2{font-size:4cqw}.perspective-triangle{width:80cqw;height:72cqw;top:5%;padding-top:7cqw}.perspective-triangle h2{font-size:4.8cqw;margin-top:4cqw}.perspective-triangle small{font-size:1.6cqw}.perspective-wheel{width:160cqw;left:-33%;border-width:28cqw}.perspective-wheel.right{left:133%}.perspective-wheel span{transform:translate(-50%,-50%) rotate(calc(var(--n)*45deg)) translateY(-64cqw);font-size:1.8cqw}.perspective-wheel span:nth-child(odd){font-size:4cqw}.perspective-headline{font-size:6cqw;width:80%;top:34%}.perspective-notes{top:auto;bottom:3%;font-size:7px;right:3%}.perspective-ball{width:28cqw}.perspective-poster{width:75cqw;height:72cqw}.perspective-poster h2{font-size:5cqw}.perspective-poster small{font-size:1.3cqw}.perspective-poster:after{font-size:2cqw}}

/* Photo reveal follows the departing headline, with its own clear space. */
.perspective-colour-photo{left:3%;width:47%;height:74%;bottom:10%;border:1cqw solid #eee7d1;object-position:center}
.perspective-notes{left:82%;right:3%;top:32%;font-family:Arial,sans-serif;font-size:clamp(11px,1cqw,16px);line-height:1.5;color:#e8e4d9}
.perspective-notes p{margin-bottom:2cqw}
@media(max-width:600px){.perspective-colour-photo{left:3%;width:50%;height:64%;bottom:14%;border-width:1.5cqw}.perspective-notes{left:65%;right:3%;top:63%;bottom:auto;font-size:8px;line-height:1.3}.perspective-notes p{margin-bottom:1.5cqw}}

/* Four equal photo windows replace the jagged, overlapping cutouts. */
.collage-pieces{inset:18%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7%;transform:rotate(0deg)}
.collage-pieces img:nth-child(n){position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;clip-path:none;transform:none;border:0;border-radius:2px;object-fit:cover;object-position:50% 55%;box-shadow:none}
.collage-pieces img:nth-child(1){object-position:50% 72%}
.collage-pieces img:nth-child(2){object-position:50% 60%}
.collage-pieces img:nth-child(3){object-position:50% 48%}
.collage-pieces img:nth-child(4){object-position:50% 58%}
.collage-hub{width:7%;left:46.5%;top:46.5%;box-shadow:0 3px 8px #0002}
.collage-disc>small{left:3%;font-size:clamp(7px,.7cqw,11px)}.collage-disc>small:last-child{left:auto;right:3%}

/* The chapter fills the viewport; individual compositions retain their proportions. */
.perspective-artboard{inset:0;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
.perspective-bar{top:11%;left:3%;right:3%}
.collage-disc{width:min(76cqh,80cqw);top:54%}
.perspective-triptych{top:23%;height:60%}
.perspective-triangle{top:16%;height:76cqh;width:min(76cqh,80cqw);padding-top:6cqh}
.perspective-triangle h2{font-size:min(5cqh,4.5cqw);margin-top:4cqh}.perspective-triangle small{font-size:clamp(8px,1cqh,12px)}
.perspective-poster{width:min(60cqw,78cqh);height:76cqh;top:53%}
.perspective-headline{font-size:min(5.8cqw,9cqh)}
@media(max-width:600px){.perspective-artboard{width:100%;height:100%;aspect-ratio:auto}.collage-disc{width:92cqw}.perspective-triptych{top:28%;height:44%;left:4%;width:92%}.perspective-triangle{top:23%;width:92cqw;height:62cqh;padding-top:5cqh}.perspective-triangle h2{font-size:min(6cqw,4cqh);margin-top:4cqh}.perspective-colour-photo{height:42%;bottom:27%}.perspective-poster{width:86cqw;height:60cqh}.perspective-notes{top:64%}}