.experience-world[data-scene=smart]{--accent:#93bfff}.experience-world[data-scene=moves]{--accent:#a3ef8d}.experience-world[data-scene=failed]{--accent:#72c5c9}.experience-world[data-scene=surprise]{--accent:#e7ef73}
.story-prologue{position:relative;min-height:83svh;display:flex;flex-direction:column;justify-content:center;isolation:isolate;padding:0 0 8vh}
.experience-world .story-prologue h1{font-size:clamp(48px,7.9vw,125px);line-height:.97;max-width:1100px;z-index:2;position:relative;margin:40px 0}
.story-prologue>.kicker{color:var(--accent);letter-spacing:2px}.story-intro{position:relative;z-index:2;font-size:clamp(18px,2vw,27px);line-height:1.45;max-width:550px;background:#11120fc9;padding:16px 20px;border-left:1px solid var(--accent);margin:0 0 0 4vw}
.story-hero-art{position:absolute;right:-4vw;top:0;width:47vw;height:47vw;max-height:670px;margin:0;z-index:0;transform:rotate(-8deg);overflow:hidden;border-radius:50% 50% 10px 50%;opacity:.7;background:#20251f}
.story-hero-art img{display:block;width:100%;height:100%;object-fit:cover}.story-prologue .scroll-cue{position:relative;z-index:2}
#smart .story-hero-art img{object-position:55% center}#moves .story-hero-art{width:35vw;height:48vw;border-radius:45% 45% 5px 5px}#moves .story-hero-art img{object-fit:contain}#failed .story-hero-art{opacity:.3;border-radius:50%}#surprise .story-hero-art img{object-position:62% center}
.experience-world .story-art{background:#f2f0e7;color:#111}.experience-world .story-art figcaption{color:#4a4a43}.experience-world #smart .craft-row:first-of-type .story-art{background:#065bb7}
.experience-world #smart .craft-row:first-of-type .story-art figcaption{color:#fff}.experience-world .story-art img{max-height:650px}
.story-interaction{position:relative;margin:10vh 0 16vh}.story-interaction>.kicker{color:var(--accent);letter-spacing:2px}.story-interaction>h2{font-size:clamp(42px,6vw,94px);letter-spacing:-.055em;line-height:1.02;font-weight:400;margin:25px 0 30px}.interaction-intro{font-size:19px;line-height:1.6;color:#bdbcb2;max-width:650px;margin-bottom:45px}
.story-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 20px}.story-tabs button,.motion-modes button{border:1px solid #ffffff40;background:none;color:#f2f0e7;padding:12px 17px;font-size:10px;letter-spacing:1px;border-radius:30px;transition:background .2s,color .2s}
.story-tabs button.active,.motion-modes button.active{background:var(--accent);color:#111;border-color:var(--accent)}.story-tabs button:hover,.motion-modes button:hover{border-color:var(--accent)}
.step-explanation{border-left:1px solid var(--accent);padding-left:20px;margin-top:25px;min-height:120px}.step-explanation h3{font-size:22px;font-weight:400;letter-spacing:-.5px;line-height:1.2;margin:0 0 14px}.step-explanation p{font-size:15px;line-height:1.6;color:#bdbcb2}
.experience-world .story-phone{border-radius:50%!important;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#273a4c;box-shadow:none;min-height:650px}.story-phone .clean-phone{max-width:240px;background:#1c2027;transform:rotate(5deg)}.experience-world .story-phone figcaption{color:#bdcedc;max-width:70%;line-height:1.8;margin-top:35px}
.video-finale{max-width:1100px;margin-left:auto;margin-right:auto}.video-finale video{width:100%;max-height:80vh;display:block;background:#e8ebef;border-radius:12px 120px 12px 12px}
.motion-screen{min-width:0}.motion-modes{display:flex;gap:12px;margin:0 0 20px}.motion-screen .player{min-height:400px}.motion-screen .player img{display:block;width:100%;max-height:70vh;object-fit:contain}.motion-screen .caption{margin-bottom:0}
.experience-world .sequence-art{background:#141b27}.experience-world .sequence-art figcaption{color:#a8b4c7}.experience-world .sequence-art img{max-height:620px}.experience-world .b3-art{background:#071351;max-width:600px;justify-self:center;width:100%;border-radius:50% 50% 4px 4px!important}.experience-world .b3-art figcaption{color:#a5c8ee}.b3-art img{image-rendering:auto}
.experience-world .tomigo-art{background:#5eaab0;padding:12px;border-radius:10px 140px 10px 10px;transform:rotate(3deg)}.tomigo-art video{display:block;width:100%;max-height:70vh;background:#12282b}.experience-world .tomigo-art figcaption{color:#163b3e}
.reflection-options{display:grid;margin:30px 0}.reflection-options button{display:block;text-align:left;background:none;color:#aaa99e;border:0;border-top:1px solid #ffffff25;padding:18px 0;font-size:10px;letter-spacing:1px}.reflection-options button span{display:block;font-size:20px;color:#f2f0e7;letter-spacing:-.5px;margin-top:10px}.reflection-options button.active{color:var(--accent)}.reflection-options button.active span{color:var(--accent)}
.reflection-note{position:relative;margin:0;background:#70c5c8;color:#102829;padding:55px 45px 75px;border-radius:5px 100px 5px 5px;transform:rotate(4deg);min-height:450px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 35px 70px #0004}
.reflection-mark{font:120px/.6 Georgia,serif;opacity:.4}.reflection-note>p{font:italic clamp(30px,3.8vw,59px)/1.1 Georgia,serif;letter-spacing:-1px;margin:15px 0 25px}.reflection-note figcaption{font-size:15px;line-height:1.7;max-width:430px}.reflection-note>span{position:absolute;right:30px;bottom:20px;font-size:13px;letter-spacing:2px;opacity:.6}.reflection-finale{max-width:900px}.reflection-finale .interaction-intro{font-size:25px}.reflection-finale #lesson{max-width:650px}
.discovery-panel{display:grid;grid-template-columns:.6fr 1.4fr;gap:4vw;align-items:center;margin:60px 0;padding:35px 0;border-top:1px solid #ffffff25}.discovery-panel img{display:block;width:100%;border-radius:8px 80px 8px 8px;transform:rotate(-2deg);box-shadow:0 30px 60px #0005}.discovery-caption>p:not(.kicker){font-size:20px;line-height:1.5;color:#bdbcb2}.discovery-caption .kicker{color:var(--accent)}
#coffee-stop,#book-stop{cursor:pointer}#coffee-stop:focus-visible,#book-stop:focus-visible{outline:3px solid #ff5736;outline-offset:6px}.experience-world .route-canvas{border-radius:40% 40% 8px 8px}.experience-world .route-canvas .caption{color:#53564e}
.experience-world .neighbourhood-art{background:#f2f0e7;border-radius:0!important}.experience-world .neighbourhood-art img{max-height:none}.experience-world #surprise .craft-row:nth-of-type(2) .craft-visual{border-radius:8px;transform:rotate(-3deg)}
.story-row .text-link{display:inline-block;white-space:normal;line-height:1.5;margin:20px 0;color:var(--accent)}
@media(max-width:750px){.story-prologue{min-height:80svh}.experience-world .story-prologue h1{font-size:clamp(40px,8.5vw,64px)}.story-intro{margin-left:0;font-size:19px;max-width:95%;padding:12px 15px}.story-hero-art{width:85vw;height:85vw;right:-20vw;top:9vh;opacity:.4}#moves .story-hero-art{width:67vw;height:85vw;opacity:.4}.story-interaction{margin:8vh 0 10vh}.story-interaction>h2{font-size:45px}.interaction-intro{font-size:17px;margin-bottom:30px}.experience-world .story-phone{min-height:530px;border-radius:80px!important}.story-phone .clean-phone{max-width:210px}.story-tabs{gap:8px}.story-tabs button{padding:12px 14px;letter-spacing:.5px}.video-finale video{border-radius:8px 55px 8px 8px}.motion-screen .player{min-height:250px}.reflection-note{width:100%;min-height:380px;padding:40px 28px 60px;transform:rotate(2deg)}.reflection-note>p{font-size:38px}.reflection-finale .interaction-intro{font-size:21px}.discovery-panel{grid-template-columns:1fr;gap:20px;margin:35px 0}.discovery-panel img{border-radius:5px 50px 5px 5px}.experience-world .tomigo-art{border-radius:8px 60px 8px 8px}.step-explanation{min-height:0}.experience-world .craft-row .story-art{max-width:100%}}
@media(prefers-reduced-motion:reduce){.story-hero-art,.reflection-note,.discovery-panel img{transform:none!important}}
/* Get Lost artwork stays complete, rectangular and at its original aspect ratio. */
.experience-world #surprise .story-hero-art{position:relative;right:auto;top:auto;width:100%;height:auto;max-height:none;margin:35px 0;border-radius:0;overflow:visible;opacity:1;background:none;transform:none!important}
.experience-world #surprise .story-hero-art img{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center}
.experience-world #surprise .craft-row .craft-visual{border-radius:0!important;overflow:visible;padding:0;background:none;margin-left:0;margin-right:0;transform:none!important;box-shadow:none}
.experience-world #surprise .craft-row .craft-visual img{width:100%;height:auto;max-height:none;object-fit:contain}
.experience-world #surprise .craft-visual figcaption{color:var(--muted)}
.experience-world #surprise .discovery-panel img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0;transform:none!important}
.spotify-case-opening{margin-top:18vh}.spotify-case-opening>h2 em{font-family:Georgia,serif;font-style:italic;color:#1ed760}.spotify-campaign-copy{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin:65px 0 30px;align-items:start}
.spotify-campaign-copy h3{font-size:clamp(35px,4.5vw,70px);font-weight:400;line-height:1.05;letter-spacing:-.05em;margin:20px 0}.spotify-campaign-copy>div>p:not(.kicker):not(.caption){font-size:17px;line-height:1.7;color:#bdbcb2}
.spotify-original{margin:35px 0 0}.spotify-original img{display:block;width:100%;height:auto;object-fit:contain;border-radius:0}.spotify-original figcaption{font-size:9px;letter-spacing:1.5px;color:var(--muted);line-height:1.6;margin:20px 0}
.experience-world #surprise .spotify-app-art{max-width:460px;justify-self:center;width:100%;align-self:center}.spotify-app-art figcaption{text-align:center}.spotify-flow .active{color:#1ed760}.spotify-flow button.active span{color:#1ed760}
@media(max-width:750px){.spotify-case-opening{margin-top:10vh}.spotify-campaign-copy{grid-template-columns:1fr;gap:15px;margin-top:35px}.experience-world #surprise .spotify-app-art{max-width:350px}.spotify-campaign-copy h3{font-size:42px}}

/* The Batman continues the Warner/DC journey after The Suicide Squad. */
.batman-chapter{margin-top:16vh;padding-top:8vh;border-top:1px solid var(--line)}
.batman-opening{max-width:1050px;margin-bottom:70px}.batman-opening h2{font-size:clamp(50px,7.8vw,125px);line-height:.95;letter-spacing:-.065em;font-weight:400;margin:35px 0}.batman-opening h2 em{font-family:Georgia,serif;color:#e51b30}.batman-opening>p:not(.kicker){font-size:21px;line-height:1.6;max-width:640px;color:var(--muted)}
.experience-world #beautiful .batman-row .batman-art{padding:0;border-radius:0;overflow:visible;background:#000;box-shadow:none}
.experience-world #beautiful .batman-art img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.experience-world #beautiful .batman-art figcaption{color:var(--muted);padding:18px 0;margin:0}
.experience-world #beautiful .batman-comparison{background:#000;max-width:1000px;margin-left:auto;margin-right:auto;height:auto;aspect-ratio:8/5;transform:none;border-radius:0;touch-action:pan-y}
.experience-world #beautiful .batman-comparison .compare-base,.experience-world #beautiful .batman-comparison .compare-reveal{background:#000}
.experience-world #beautiful .batman-comparison img{width:100%;height:100%;padding:20px 5%;object-fit:contain;object-position:center}
.experience-world #beautiful .batman-comparison .image-label{color:#000;background:#f3f2ee;padding:8px 12px}
.experience-world #beautiful .batman-comparison .compare-line{background:#e51b30}.batman-comparison .compare-handle{background:#e51b30;color:white}
.batman-final-art{margin:70px 0 0}.batman-final-art img{width:100%;height:auto;display:block}.batman-final-art figcaption{font-size:10px;letter-spacing:1px;margin-top:20px;color:var(--muted)}
@media(max-width:750px){.batman-chapter{margin-top:10vh;padding-top:6vh}.batman-opening h2{font-size:clamp(43px,10vw,70px)}.batman-opening>p:not(.kicker){font-size:18px}.experience-world #beautiful .batman-comparison{aspect-ratio:1/1}.experience-world #beautiful .batman-comparison img{padding:20px 12px}.batman-final-art{margin-top:40px}}