/* Bespoke project worlds, within the Thrudaruf portfolio. */
.immersive{--max:1760px;--world:#1c291f;--accent:#f3bf46;--tint:#f2eddf;--paper:#f6f2e9;background:var(--paper)}
.immersive.cube{--world:#151713;--accent:#d6dc26;--tint:#eef0dc;--paper:#f2f3ea}
.immersive.vlncy{--world:#29241d;--accent:#b2975e;--tint:#e9dfcb;--paper:#f4eee3}
.immersive.curly{--world:#3c2924;--accent:#ed8d6e;--tint:#f6e1d2;--paper:#faf0e5}
.immersive.hamleys{--world:#9c142c;--accent:#ffcf42;--tint:#fae0dd;--paper:#fff5ec}
.immersive .wrap{max-width:var(--max);padding-inline:clamp(22px,5vw,100px)}
.immersive .nav{position:relative;background:transparent}
.immersive .story-topline{padding-top:20px;margin-bottom:30px;font-size:12px}
.immersive .story-hero{position:relative;min-height:min(800px,85svh);padding-block:35px 75px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:35px}
.immersive .story-hero h1{font-size:clamp(58px,6.8vw,118px);line-height:.98;letter-spacing:-.055em;margin-bottom:30px;max-width:780px}
.immersive .story-deck{font-size:clamp(18px,1.6vw,24px);max-width:600px;line-height:1.45}
.immersive .project-logo{height:45px;width:auto;max-width:200px;object-fit:contain;margin-bottom:35px}
.immersive .story-hero .case-tags{margin:25px 0}
.immersive .brand-art{min-height:600px;position:relative;isolation:isolate;display:grid;place-items:center;border-radius:35% 35% 15px 15px;background:var(--world);overflow:hidden}
.brand-art:before{content:'';position:absolute;width:80%;aspect-ratio:1;border:1px solid var(--accent);border-radius:50%;opacity:.5}
.brand-art .art-piece{position:absolute;object-fit:cover;border-radius:14px;box-shadow:0 25px 45px #0004;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.brand-art .piece-1{width:48%;height:64%;left:7%;top:12%;transform:rotate(-9deg);z-index:2}
.brand-art .piece-2{width:43%;height:57%;right:7%;top:25%;transform:rotate(9deg);z-index:3}
.brand-art .piece-3{width:46%;height:35%;left:26%;bottom:9%;transform:rotate(-4deg);z-index:4}
.brand-art.visual-in-view .piece-1{transform:rotate(-5deg) translateY(-8px)}
.brand-art.visual-in-view .piece-2{transform:rotate(6deg) translateY(8px)}
.art-caption{position:absolute;bottom:22px;left:28px;color:white;font-size:12px;letter-spacing:.05em;z-index:5}
.cube .brand-art{border-radius:10px;background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 75px),var(--world)}
.cube .brand-art .piece-1{object-fit:contain;background:#e1e3d6;width:67%;height:62%;left:3%;top:9%;transform:rotate(-6deg)}
.cube .brand-art .piece-2{width:25%;height:70%;object-fit:cover;object-position:top;right:8%;top:17%;border:7px solid #252923;border-radius:25px}
.cube .brand-art .piece-3{width:66%;height:26%;left:6%;bottom:10%;object-fit:cover;object-position:top}
.vlncy .brand-art{border-radius:50% 50% 12px 12px;background:radial-gradient(ellipse at 50% 25%,#7c6b4b,#29241d 80%)}
.vlncy .brand-art .piece-1{height:59%;object-fit:contain;background:#eee3ce;left:6%;width:43%;top:17%}
.vlncy .brand-art .piece-2{height:54%;object-fit:contain;right:8%;width:43%;top:24%;background:#eee3ce}
.vlncy .brand-art .piece-3{height:39%;width:30%;left:36%;bottom:8%;object-fit:cover}
.curly .brand-art{border-radius:45% 45% 10px 10px;background:#b14831}
.curly .brand-art .piece-1{width:58%;height:70%;object-fit:cover;left:2%;top:4%}
.curly .brand-art .piece-2{width:42%;height:55%;right:2%;top:32%}
.curly .brand-art .piece-3{width:37%;height:43%;left:26%;bottom:5%;border:8px solid #f6e1d2}
.hamleys .brand-art{border-radius:14px;background:radial-gradient(circle at 30% 50%,#f4475a,#9c142c 85%)}
.hamleys .brand-art:before{width:95%;border:35px dotted #ffcf4240;transform:rotate(-20deg)}
.hamleys .brand-art .piece-1{border:8px solid #fff1e6;border-radius:90px 90px 10px 10px}
.hamleys .brand-art .piece-2{border:8px solid #ffcf42;border-radius:10px}
.hamleys .brand-art .piece-3{width:35%;height:40%;left:34%;border:7px solid #fff1e6}
.immersive .case-meta{border-color:color-mix(in srgb,var(--world) 20%,transparent);padding-block:25px 40px}
.immersive .chapter-nav{background:var(--world);color:white;border:0;z-index:15;top:0}
.immersive .chapter-nav a{color:#fff9e9;opacity:.65;border:0;padding:23px 0}
.immersive .chapter-nav a[aria-current=true]{opacity:1;color:var(--accent);box-shadow:inset 0 -3px var(--accent)}
.immersive .story-chapter{padding-block:clamp(65px,9vw,145px);scroll-margin-top:65px}
.immersive .chapter-head{grid-template-columns:1.25fr .75fr;gap:clamp(25px,6vw,110px);align-items:start;margin-bottom:50px}
.immersive .chapter-head h2{font-size:clamp(42px,5.3vw,83px);max-width:900px;letter-spacing:-.04em;line-height:1.02}
.immersive .chapter-number{border-color:var(--world);color:var(--world);font-size:13px;letter-spacing:.08em}
.immersive .chapter-head>div:last-child>p:first-child{font-size:clamp(18px,1.6vw,24px);line-height:1.5;margin-top:0}
.immersive .decision-label{display:none}
.immersive .decision-copy{font-size:16px!important;color:var(--forest);border-left:3px solid var(--accent);padding-left:18px;line-height:1.5}
.immersive .wide-statement{padding-block:clamp(65px,9vw,140px)}
.immersive .wide-statement h2{font-size:clamp(45px,6.7vw,110px);max-width:1400px;letter-spacing:-.045em}
.immersive .wide-statement p{font-size:22px;max-width:780px}
.immersive .creative-switch{grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,100px)}
.immersive .creative-art{min-height:650px;background:var(--world);border-radius:15px}
.immersive .creative-art img{height:auto;max-height:600px;width:auto;max-width:85%;transform:rotate(-3deg);border-radius:8px;box-shadow:18px 18px 0 var(--accent)}
.immersive .creative-copy h3{font-size:clamp(36px,4.2vw,64px);letter-spacing:-.035em}
.immersive .creative-copy p{font-size:19px}
.immersive .switch-controls button{font-size:15px;border-color:var(--world);color:var(--world)}
.immersive .switch-controls button[aria-pressed=true]{background:var(--world);color:white}
.immersive .results-row{gap:3px;border-radius:18px;overflow:hidden}
.immersive .result-tile{border-radius:0;padding:clamp(25px,3vw,55px);background:var(--world);color:#fff9ee}
.immersive .result-tile strong{font-size:clamp(65px,7.5vw,120px);color:var(--accent)}
.immersive .result-tile h3{font-size:24px}.immersive .result-tile p{color:#eee5d5}
.immersive .feature-figure{padding:clamp(20px,4vw,65px);background:var(--tint)}
.immersive .feature-figure img{max-height:800px}.immersive .decision-stack b{font-size:32px}
.immersive .campaign-stage{grid-template-columns:1.35fr .65fr;gap:55px}
.immersive .campaign-mosaic{padding:35px;border-radius:14px;min-height:600px;align-items:center}
.immersive .campaign-mosaic img{height:480px;border:7px solid #fff2e5;transform:rotate(-5deg)}
.immersive .campaign-mosaic img:nth-child(2){transform:rotate(6deg);margin-top:55px}
.immersive .campaign-stage h3{font-size:clamp(44px,4.8vw,76px)}
.immersive .campaign-results strong{color:var(--world);font-size:clamp(48px,5vw,85px)}
.immersive .flow-step{background:var(--tint);border:0;padding:35px;min-height:220px}
.immersive .flow-step:before{color:var(--world);font-size:60px}
/* A native range control is both the gesture surface and the keyboard control. */
.wipe-block{margin:25px 0}
.wipe-stage{position:relative;background:#fff;border:12px solid var(--world);border-top-width:35px;border-radius:15px;aspect-ratio:1.9;overflow:hidden;--reveal:50%;isolation:isolate}
.wipe-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wipe-stage .wipe-after{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.wipe-stage .wipe-label{position:absolute;top:15px;padding:8px 14px;background:var(--world);color:#fff;border-radius:22px;font-size:12px;z-index:3;pointer-events:none}
.wipe-label.before{right:15px}.wipe-label.after{left:15px}
.wipe-line{position:absolute;left:var(--reveal);top:0;height:100%;width:3px;background:var(--accent);pointer-events:none;z-index:4;transform:translateX(-50%)}
.wipe-line b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;background:var(--accent);border:3px solid var(--world);border-radius:50%;color:var(--world);font-size:27px;box-shadow:0 3px 25px #0003}
.wipe-stage input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;touch-action:pan-y}
.wipe-stage:focus-within{outline:4px solid var(--accent);outline-offset:6px}.wipe-instruction{font-size:13px;color:var(--forest);margin:15px 0 0}
.audience-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;background:var(--world);border-radius:20px;padding:60px;min-height:600px;color:#fff3dc}
.audience-orbit{border:1px solid var(--accent);border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 90px #b2975e22}
.audience-orbit>span{font-size:13px;letter-spacing:.06em}.audience-orbit strong{font:700 clamp(55px,6vw,100px) var(--display);letter-spacing:-.05em;color:#e3c589}.audience-orbit p{font-size:17px}
.audience-pictures{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.audience-pictures img{width:100%;max-height:460px;object-fit:contain;border-radius:10px;transform:rotate(-6deg)}.audience-pictures img:last-child{transform:rotate(7deg) translateY(35px)}
.signal-journey{display:grid;grid-template-columns:.8fr .7fr 1.3fr;gap:40px;align-items:center;background:var(--tint);padding:50px;border-radius:20px}
.signal-creative img{width:100%;border-radius:12px;max-height:370px;object-fit:contain}.signal-creative span{display:block;font-size:12px;margin-top:20px}
.signal-route{display:grid;gap:13px;text-align:center}.signal-route span{border:1px solid var(--world);border-radius:28px;padding:14px 8px;font-size:13px}.signal-route b{font-size:30px;font-weight:400;color:var(--world)}
.signal-outcome>span{font:600 23px var(--display)}.signal-outcome small{display:block;font-size:11px;line-height:1.5;margin-top:16px}
.mix-chart{height:260px;display:flex;gap:20px;align-items:end;border-bottom:1px solid var(--world);margin-top:25px;padding-bottom:28px}.mix-chart>div{position:relative;height:var(--bar);background:var(--world);flex:1;min-height:45px;border-radius:12px 12px 0 0;display:flex;justify-content:center;padding-top:18px;color:#f5ead4}.mix-chart b{font:600 26px var(--display)}.mix-chart span{position:absolute;top:100%;padding-top:8px;color:var(--world);font-size:12px}
.immersive .story-close{padding-block:100px}.immersive .story-close h2{font-size:clamp(40px,5vw,80px);line-height:1.05}
.immersive .story-twin figure{background:var(--tint);padding:25px;border-radius:15px}.immersive .inspection-board{border:18px solid var(--world);border-radius:18px}.immersive .story-twin{gap:30px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s ease both page-out}::view-transition-new(root){animation:.6s cubic-bezier(.2,.7,.2,1) both page-in}
@keyframes page-out{to{opacity:0;transform:scale(.97)}}@keyframes page-in{from{opacity:0;transform:translateY(35px) scale(1.02)}to{opacity:1;transform:none}}
@media(max-width:1100px){.immersive .brand-art{min-height:470px}.immersive .story-hero{gap:25px}.immersive .creative-art{min-height:480px}.immersive .creative-art img{max-height:450px}.immersive .campaign-stage{grid-template-columns:1.1fr .9fr;gap:30px}.immersive .campaign-mosaic{padding:20px;min-height:480px}.immersive .campaign-mosaic img{height:350px}.audience-stage{padding:35px;min-height:450px;gap:25px}.signal-journey{padding:30px;gap:22px}}
@media(max-width:700px){.immersive .story-hero{grid-template-columns:1fr;min-height:0;padding-top:20px;padding-bottom:45px}.immersive .story-hero h1{font-size:clamp(53px,12vw,78px)}.immersive .story-deck{font-size:18px}.immersive .brand-art{min-height:470px;margin-top:20px}.immersive .chapter-head{grid-template-columns:1fr;gap:15px;margin-bottom:30px}.immersive .chapter-head h2{font-size:43px}.immersive .chapter-head>div:last-child>p:first-child{font-size:18px}.immersive .chapter-nav a{padding:19px 0;white-space:nowrap;font-size:12px}.immersive .chapter-nav .wrap{overflow:auto;flex-wrap:nowrap}.immersive .creative-switch,.immersive .campaign-stage{grid-template-columns:1fr}.immersive .creative-art{min-height:470px}.immersive .creative-art img{max-height:450px}.immersive .creative-copy h3{font-size:40px}.immersive .campaign-mosaic{min-height:0;padding:20px}.immersive .campaign-mosaic img{height:340px;width:100%;min-width:0}.immersive .campaign-stage h3{font-size:45px}.immersive .flow-steps{grid-template-columns:1fr 1fr}.immersive .flow-step{padding:20px;min-height:0}.immersive .flow-step b{font-size:22px}.immersive .flow-step:before{font-size:42px}.immersive .results-row{grid-template-columns:1fr}.immersive .result-tile{padding:35px}.audience-stage{grid-template-columns:1fr;padding:28px;gap:30px}.audience-orbit{width:85%;margin:auto}.audience-pictures{margin-bottom:30px}.signal-journey{grid-template-columns:1fr;padding:28px}.signal-creative img{max-height:330px}.signal-route{grid-template-columns:1fr;gap:10px}.signal-outcome{margin-top:20px}.mix-chart{height:260px}.wipe-stage{border-width:6px;border-top-width:23px;aspect-ratio:1.45}.wipe-line b{width:48px;height:48px;font-size:22px}.wipe-stage .wipe-label{top:8px;font-size:10px;padding:5px 9px}.immersive .story-close{padding-block:65px}.immersive .story-twin{grid-template-columns:1fr}.immersive .story-founders{max-width:100%}}
@media(prefers-reduced-motion:reduce){.brand-art .art-piece{transition:none;transform:none!important}::view-transition-old(root),::view-transition-new(root){animation:none}.immersive [data-story-chapter]{animation:none!important}}
.vlncy .wide-statement{background:linear-gradient(90deg,#29241df5 0%,#29241dd9 40%,#29241d20 100%),url('assets/cases/vlncy/connection-concept-v1.png') center/cover;min-height:600px;display:flex;align-items:center}
.vlncy .wide-statement h2{max-width:900px}.vlncy .wide-statement p{max-width:620px}
@media(max-width:700px){.vlncy .wide-statement{background-position:60%;min-height:520px;background-image:linear-gradient(90deg,#29241deb,#29241d80),url('assets/cases/vlncy/connection-concept-v1.png')}}
.food-journey{display:grid;grid-template-columns:.8fr 80px 1.2fr;gap:30px;align-items:center;background:#3c2924;padding:50px;border-radius:20px;color:#ffefdf}.food-journey figure{margin:0;transform:rotate(-4deg)}.food-journey figure img{max-height:530px;width:100%;object-fit:contain;border:8px solid #ffefdf;border-radius:12px}.food-journey figcaption{font-size:13px;margin-top:20px}.journey-arrow{font-size:75px;color:#ed8d6e}.channel-label{font-size:12px;color:#efb89c}.enquiry-card h3{font:700 clamp(32px,3.5vw,55px)/1.1 var(--display);margin:20px 0 30px;letter-spacing:-.03em}.journey-node{padding:18px 0;border-top:1px solid #e3c9b84d;font-size:18px;display:flex;justify-content:space-between}.journey-node span{color:#ed8d6e}.enquiry-card small{display:block;color:#e9c7b2;font-size:11px;margin-top:22px;max-width:440px}
@media(max-width:700px){.food-journey{grid-template-columns:1fr;padding:28px;gap:25px}.food-journey figure img{max-height:390px}.journey-arrow{font-size:40px;line-height:1}.enquiry-card h3{font-size:38px}}

@media(prefers-reduced-motion:no-preference){.entered-from-cover main{animation:world-enter .65s cubic-bezier(.2,.7,.2,1) both}@keyframes world-enter{from{opacity:.3;transform:translateY(28px) scale(.985);clip-path:inset(0 1% 0 1% round 25px)}to{opacity:1;transform:none;clip-path:inset(0 round 0)}}}