@font-face{font-family:Inter;src:url('/assets/inter.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--scale:1;--page-bg:#fff;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page-bg);color:#000;font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img,svg{display:block}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #ffb800;outline-offset:4px}p{margin:0}iframe{border:0}.dark{color:#fff}.skip-link{position:fixed;top:-100px;left:12px;z-index:10000;background:#fff;color:#000;padding:12px}.skip-link:focus{top:12px}.site-header{position:absolute;z-index:1000;left:calc(27px * var(--scale));right:calc(25px * var(--scale));top:calc(10px * var(--scale));display:flex;align-items:center;justify-content:space-between}.site-header>nav:first-child{display:flex;align-items:center}.site-header .brand{width:calc(43px * var(--scale));height:calc(43px * var(--scale));transition:transform .2s}.brand:hover{transform:rotate(15deg)}.brand img{width:100%;height:100%}.pill{font-family:Arial,sans-serif;background:rgba(255,255,255,.71);color:#000;border:1px solid #000;border-radius:999px;min-width:calc(86px * var(--scale));height:calc(43px * var(--scale));display:inline-flex;align-items:center;justify-content:center;font-size:calc(14px * var(--scale));padding:0 calc(24px * var(--scale));transition:background .18s,color .18s}.pill:hover,.piece.button:hover{background:#1450ff;color:#fff}.socials{display:flex;gap:calc(38px * var(--scale));font-size:calc(10px * var(--scale));color:#000}.socials a:hover{transform:rotate(-5deg);text-decoration:underline}.page-playground .socials{position:absolute;right:0;top:calc(68px * var(--scale))}.stage{position:relative;width:100%;height:calc(var(--page-height) * var(--scale) * 1px);overflow:hidden}.canvas{position:relative;width:1024px;height:calc(var(--page-height) * 1px);transform:scale(var(--scale));transform-origin:top left}.piece{position:absolute;display:block}.piece img{width:100%;height:100%;object-fit:cover}.piece.image>.svg-scale-wrapper,.piece.image>.svg-scale-wrapper>svg{width:100%;height:100%}.piece.image svg{width:100%;height:100%}.piece.shape{pointer-events:none}.piece.text{font-size:18px;line-height:26px}.piece.button{display:flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50px;font:14px Arial,sans-serif;background:rgba(255,255,255,.4);transition:background .18s,color .18s}.dark .piece.button{background:rgba(0,0,0,.2);border-color:#fff}.piece.hoverable{transition:transform .25s}.piece.hoverable:hover{transform:rotate(-1deg) scale(1.025)}.piece.draggable{touch-action:none;cursor:grab}.piece.draggable:active{cursor:grabbing}.piece.embed iframe{width:100%;height:100%;border-radius:12px}.piece.video{overflow:hidden}.video-poster{position:relative;display:block;padding:0;width:100%;height:100%;border:0;cursor:pointer;background:#111}.video-poster img{width:100%;height:100%;object-fit:cover}.play-symbol{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#0009;color:white;font-size:20px;padding-left:3px}.video-poster:hover .play-symbol{background:#1450ff}.video iframe{position:absolute;width:100%;height:100%;inset:0}.mobile-content{display:none}.page-1 .piece.text{color:#000}.page-2 .piece.image img{border-radius:10px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.align-justify{text-align:justify}.link-style-89c0e031-4aa5-4b60-a2ed-9795f64ae7f5{color:#000}.link-style-e4fa12e6-4dae-498c-a711-bb4308eec500{color:#f2f2f2;text-decoration:underline;text-underline-offset:3px}.text-viewer a:hover{color:#356dff}.style-b2425585-62a1-421f-9af9-3f1fd79d05e1{font-size:42px;line-height:44px;color:#000;font-weight:400}.style-c3bd400b-9ffd-462e-bd67-788e64207921{font-size:42px;line-height:44px;color:#fff;font-weight:400}.style-83b59251-5722-44ed-a706-bb137762b601{font-size:42px;line-height:44px;color:#2356f6;font-weight:400}.style-04f83f3a-ac97-4248-8726-1fea1b1eb2c9{font-size:14px;line-height:20px;color:#707070}.style-c3ab5fd9-3f3f-47de-b69c-3500bcc2aef0{font-size:14px;line-height:16px;color:#fff}.unstyled{font-family:Inter,Arial,sans-serif;font-weight:400}.page-1 .stage{min-height:100vh}
@media(max-width:767px){:root{--scale:1!important}.site-header{position:relative;left:auto;right:auto;top:auto;padding:12px 16px;display:flex;flex-wrap:wrap;gap:22px;align-items:center}.site-header .brand{width:43px;height:43px}.site-header .pill{height:43px;min-width:86px;font-size:15px;padding:0 22px}.socials{font-size:14px;gap:0;width:100%;justify-content:space-between}.page-playground .socials{position:static}.stage{display:none}.mobile-content{display:block;padding:25px 16px 20px}.mobile-content h1{margin:0 0 36px;font-size:36px;line-height:1.1;letter-spacing:-1.1px;font-weight:400}.mobile-content h1 p{font:inherit;color:inherit}.mobile-content h1 span{font:inherit;color:inherit}.mobile-home{padding-top:72px;min-height:calc(100svh - 155px)}.mobile-home>.image{width:118px;aspect-ratio:1.35;margin:0 20% 24px auto}.mobile-home h1{font-size:clamp(30px,7.6vw,48px);line-height:1.08;letter-spacing:-.7px}.mobile-home h1 a{color:inherit}.mobile-home>.embed{margin-top:60px;width:100%;height:152px;max-width:400px}.mobile-item.image,.mobile-item.video{position:relative;display:block;aspect-ratio:var(--ratio);width:100%;overflow:hidden}.mobile-item.image img,.mobile-item.image svg,.mobile-item.image .svg-scale-wrapper{width:100%;height:100%;object-fit:contain}.mobile-item.embed iframe{width:100%;height:100%;border-radius:12px}.mobile-item.text{font-size:16px;line-height:1.45;margin-bottom:18px}.mobile-item.text p{margin-bottom:12px}.mobile-item.text span{font:inherit}.mobile-item.video iframe{position:absolute;inset:0;width:100%;height:100%}.case-grid{display:grid;gap:28px;margin-top:70px}.case-cover{position:relative;aspect-ratio:486/274;overflow:hidden;border-radius:10px}.case-cover>img,.case-cover>div:not(.card-overlay),.card-overlay img{width:100%;height:100%;object-fit:cover}.card-overlay{position:absolute}.case-card>span{display:block;font-size:14px;margin-top:12px}.case-card:active .case-cover{transform:scale(.98)}.case-intro{padding:30px 0 54px}.case-intro h1{font-size:40px;margin-bottom:24px}.case-actions{display:flex;gap:8px;flex-wrap:wrap}.mobile-item.button{border:1px solid currentColor;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;padding:8px 18px}.project-gallery{display:flex;flex-direction:column;gap:10px;margin:0 -16px}.project-gallery>.image,.project-gallery>.video{width:100%}.credits{padding-top:28px;text-align:center}.credits .text{font-size:13px}.playground-grid{columns:2;column-gap:12px;padding-top:30px}.playground-grid>.mobile-item{break-inside:avoid;margin-bottom:12px}.mobile-footer{display:flex;margin-top:34px;gap:0}.mobile-footer .pill{flex:1;min-width:0;font-size:16px;height:48px;padding:0 20px}.dark .mobile-footer .pill{background:#000;color:#fff;border-color:#fff}.mobile-home+.mobile-footer{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(hover:hover) and (pointer:fine){body{cursor:url('/assets/cursor.svg') 2 2,auto}a,button{cursor:url('/assets/cursor-hover.svg') 5 5,pointer}}

::selection{color:#2356f6;background:#f2f2f2}

@media(min-width:768px){.canvas{margin-left:calc(4px * var(--scale))}.site-header{left:calc(27.5px * var(--scale));right:calc(21px * var(--scale))}}

/* Keep the composition and player inside the viewport. */
html:has(body.page-1), body.page-1 { height:100%; overflow:hidden; }
.page-1 .stage { height:100svh; min-height:0; overflow:hidden; }
.page-1 > .piece.embed { position:fixed; left:calc(26px * var(--scale)) !important; bottom:calc(18px * var(--scale)); top:auto !important; width:calc(324px * var(--scale)) !important; height:calc(152px * var(--scale)) !important; z-index:308; }
@media(max-width:767px){
  .page-1 > .piece.embed{display:none}
  .page-1 .site-header{gap:clamp(8px,2vh,22px);padding:clamp(8px,1.5vh,12px) 16px}
  .page-1 .mobile-content{padding:0 16px}
  .page-1 .mobile-home{padding:clamp(12px,5vh,60px) 0 0;min-height:0}
  .page-1 .mobile-home>.image{width:clamp(70px,19vw,118px);margin:0 20% clamp(8px,2vh,24px) auto}
  .page-1 .mobile-home h1{font-size:min(7.6vw,5.2svh,48px);line-height:1.08;margin:0;letter-spacing:-.04em}
  .page-1 .mobile-home>.embed{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:16px;margin:0;width:min(400px,calc(100vw - 32px));height:clamp(80px,19svh,152px)}
}

.page-1 .socials{align-items:center;gap:calc(25px * var(--scale));}
.page-1 .socials a{display:flex;align-items:center;justify-content:center;width:calc(18px * var(--scale));height:calc(18px * var(--scale));color:#000;}
.page-1 .socials svg{width:100%;height:100%;display:block}
.page-1 .socials a:hover{transform:none;opacity:.65}
@media(max-width:767px){.page-1 .site-header{flex-wrap:nowrap;gap:0}.page-1 .socials{width:auto;margin-left:auto;gap:clamp(10px,3vw,20px)}.page-1 .socials a{width:18px;height:18px}.page-1 .site-header .pill{min-width:0;padding:0 clamp(10px,3vw,22px);font-size:clamp(12px,3.4vw,15px)}.page-1 .site-header .brand{width:38px;height:38px;flex-shrink:0}.page-1 .site-header .pill{height:38px}}

.nickname-reveal{position:fixed;z-index:4;right:calc(25px * var(--scale));top:calc(65px * var(--scale));font-size:calc(44px * var(--scale));font-weight:400;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease;}
body:has(.stage .piece.text:hover) .nickname-reveal,body:has(.stage .piece.text:focus-within) .nickname-reveal{opacity:1}
@media(max-width:767px){.nickname-reveal{right:16px;top:65px;font-size:min(5vw,25px);line-height:1.05}body:has(.mobile-home h1:hover) .nickname-reveal,body:has(.mobile-home h1:focus-within) .nickname-reveal{opacity:1}}

/* Expanded controls and type, aligned to the left edge. */
.page-1 .site-header .brand{height:calc(51px * var(--scale));width:calc(51px * var(--scale));border:1px solid #000;border-radius:50%;overflow:hidden;flex-shrink:0}
.page-1 .site-header .pill{height:calc(53px * var(--scale));font-size:calc(24px * var(--scale));min-width:calc(96px * var(--scale));padding:0 calc(24px * var(--scale))}
.page-1 .socials{font-size:calc(20px * var(--scale));gap:calc(25px * var(--scale))}
.page-1 .socials a{width:auto;height:auto;display:inline;color:#000}
.page-1 .socials a:hover{opacity:1;text-decoration:underline}
.page-1 .text-viewer a:hover,.page-1 .mobile-home h1 a:hover{color:#fff}
.page-1 .stage .piece.text{width:980px!important}
.page-1 .stage .piece.text p{font-size:52px!important;line-height:54px!important}
.page-1 .nickname-reveal{font-size:calc(54px * var(--scale))}
.page-1 .stage .piece.image{width:126.68px!important;height:96.49px!important}
.page-1 > .piece.embed{width:calc(334px * var(--scale))!important;height:calc(162px * var(--scale))!important}
@media(max-width:767px){
 .page-1 .site-header{flex-wrap:wrap;gap:10px;padding:10px 16px}
 .page-1 .site-header .brand{width:48px;height:48px}
 .page-1 .site-header .pill{height:50px;min-width:0;font-size:clamp(15px,4vw,21px);padding:0 clamp(12px,4vw,24px)}
 .page-1 .socials{width:100%;margin:0;justify-content:flex-end;gap:clamp(12px,4vw,24px);font-size:clamp(14px,4vw,20px)}
 .page-1 .socials a{width:auto;height:auto}
 .page-1 .mobile-home{padding-top:clamp(8px,2vh,25px)}
 .page-1 .mobile-home>.image{width:clamp(80px,21vw,128px)}
 .page-1 .mobile-home h1{font-size:min(8vw,4.4svh,52px);line-height:1.05}
 .page-1 .nickname-reveal{top:110px;font-size:min(5.5vw,28px)}
 .page-1 .mobile-home>.embed{width:min(410px,calc(100vw - 32px));height:clamp(80px,19svh,162px)}
}

/* Restore the original social-link typography and spacing. */
.page-1 .site-header .brand{border-width:2px}
.page-1 .socials{font-size:calc(10px * var(--scale));gap:calc(38px * var(--scale))}
.page-1 .socials a:hover{transform:rotate(-5deg);text-decoration:underline}
@media(max-width:767px){.page-1 .socials{font-size:14px;gap:0;justify-content:space-between}}

/* Restore the lower composition and match the control outlines. */
.page-1 .site-header .pill{border-width:2px}
.page-1 .socials{font-size:calc(14px * var(--scale))}
.page-1 .socials a{display:inline-block}
.page-1 .text-viewer a,.page-1 .mobile-home h1 a{display:inline-block;transform-origin:center;transition:transform .18s ease,color .18s ease}
.page-1 .text-viewer a:hover,.page-1 .mobile-home h1 a:hover{transform:rotate(-5deg);text-decoration:underline;text-underline-offset:3px;color:#fff}
@media(min-width:768px){
 .page-1 .stage .piece.text{top:calc(303px + 25px)!important}
 .page-1 .stage .piece.image{top:calc(206.59px + 25px)!important}
 .page-1 > .piece.embed{bottom:calc(-70px * var(--scale))}
}
@media(max-width:767px){
 .page-1 .socials{font-size:18px}
 .page-1 .mobile-home>.embed{bottom:calc(-70px + env(safe-area-inset-bottom))}
}
/* Shared navigation and a continuous player. */
html:has(body.page-1),body.page-1{height:auto;overflow:auto}
.page-1 .stage{height:max(100svh,700px);min-height:700px}
.site-header,.page-1 .site-header{position:fixed;z-index:2000;left:calc(27.5px * var(--scale));right:calc(21px * var(--scale));top:calc(10px * var(--scale));transition:transform .22s ease}
.site-header.header-hidden{transform:translateY(-150%)}
.site-header .brand,.page-1 .site-header .brand{height:calc(51px * var(--scale));width:calc(51px * var(--scale));border:2px solid #000;border-radius:50%;overflow:hidden;flex-shrink:0}
.site-header .pill,.page-1 .site-header .pill{height:calc(53px * var(--scale));font-size:calc(24px * var(--scale));min-width:calc(96px * var(--scale));padding:0 calc(24px * var(--scale));border-width:2px}
.socials,.page-1 .socials,.page-playground .socials{position:static;display:flex;align-items:center;gap:calc(38px * var(--scale));font-size:calc(14px * var(--scale));color:#000}
.socials a,.page-1 .socials a{display:inline-block;width:auto;height:auto}
.music-player{position:fixed;z-index:1900;left:clamp(16px,2.5vw,34px);bottom:16px;width:min(410px,calc(100vw - 32px));height:152px;transition:transform .25s ease}
.music-player iframe{width:100%;height:152px;border:0;border-radius:12px}
.music-toggle{position:absolute;z-index:2;right:0;top:-34px;border:1px solid #000;border-radius:50%;width:30px;height:30px;background:#fff;color:#000;font-size:22px;line-height:24px;cursor:pointer}
.music-player.collapsed{transform:translateY(calc(100% + 16px))}.music-player.collapsed .music-toggle{top:-38px}
.page-1 .stage .piece.text{height:auto!important}.page-1 .stage{overflow:visible}
.playground-intro{position:relative;padding:200px 3% 125px;min-height:420px}
.playground-intro h1{font-size:clamp(36px,5.1vw,70px);line-height:1.05;font-weight:400;margin:0;letter-spacing:-.02em}
.anteater{width:145px;height:auto;position:absolute;left:58%;top:235px;will-change:transform}
.work-grid{padding:0 2.5%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.grid-item{min-width:0;overflow:hidden}.grid-item img{width:100%;height:auto;display:block}.grid-item.wide{grid-column:span 2}
.video-card{position:relative;aspect-ratio:16/9;background:#000}.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.collage{position:relative;background:#000;aspect-ratio:577/332}.collage img{position:absolute;object-fit:cover}.collage img:nth-child(1){left:13%;top:3%;width:20%;height:45%}.collage img:nth-child(2){left:46%;top:10%;width:34%;height:44%}.collage img:nth-child(3){right:3%;top:42%;width:28%;height:48%}.collage img:nth-child(4){left:5%;bottom:4%;width:60%;height:47%}
.playground-footer{display:flex;padding:55px 2.5% 45px}.playground-footer .pill{width:50%;height:55px;font-size:20px;border:2px solid #000;background:#fff}
@media(max-width:767px){
 .site-header,.page-1 .site-header{position:fixed;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:10px;padding:10px 16px;background:var(--page-bg)}
 .site-header .brand,.page-1 .site-header .brand{width:48px;height:48px}.site-header .pill,.page-1 .site-header .pill{height:50px;font-size:clamp(15px,4vw,21px);padding:0 clamp(12px,4vw,24px)}
 .socials,.page-1 .socials,.page-playground .socials{width:100%;justify-content:space-between;margin:0;font-size:18px;gap:0}
 .page-1 .mobile-content{padding:0 16px}.page-1 .mobile-home{height:max(calc(100svh - 110px),520px);min-height:0;padding:0 0 198px;display:flex;flex-direction:column;justify-content:flex-end}
 .page-1 .mobile-home>.image{width:clamp(80px,21vw,128px);margin:0 20% 12px auto}.page-1 .mobile-home h1{margin:0}
 .playground-intro{padding:190px 16px 70px;min-height:360px}.playground-intro h1{font-size:clamp(32px,8vw,52px)}.anteater{width:100px;left:65%;top:275px}
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px}.grid-item.wide{grid-column:span 2}.playground-footer{padding:40px 16px 30px}
}
@media(max-width:360px){.socials,.page-1 .socials,.page-playground .socials{font-size:14px}}
@media(prefers-reduced-motion:reduce){.music-player,.site-header{transition:none}.anteater{transform:none!important}}

@media(min-width:768px){.anteater{left:72%;top:260px}}
.site-header .brand svg{width:100%;height:100%;display:block}.site-header .pill,.page-1 .site-header .pill{font-size:24px}
.music-drag{position:absolute;top:-34px;right:38px;z-index:2;width:30px;height:30px;border:1px solid #000;border-radius:50%;background:#fff;color:#000;font-size:20px;cursor:grab;touch-action:none;line-height:25px}.music-drag:active{cursor:grabbing}.music-player.collapsed .music-drag{top:-38px}
@media(min-width:768px){
 .page-playground .stage{height:calc(5495px * var(--gallery-scale));overflow:hidden}
 .page-playground .canvas{margin-left:16px;transform:scale(var(--gallery-scale))}
 .page-playground .stage .piece.text p{font-size:52px!important;line-height:54px!important;color:#000}
 .page-playground .stage .piece.video iframe{width:100%;height:100%}
 .page-playground .canvas .piece.image:has(.anteater){overflow:visible}
 .page-playground .anteater{position:static;left:auto;top:auto;width:100%;height:100%;object-fit:contain;will-change:transform}
 .page-playground .piece.button{border-width:2px;font-size:24px}
}
@media(max-width:767px){.site-header .pill,.page-1 .site-header .pill{font-size:24px;padding:0 12px}.page-playground .anteater{position:static;transform:none;left:auto;top:auto}.page-playground .mobile-footer .pill{font-size:24px}}
@media(min-width:768px){.page-playground .canvas .piece.image:has(.anteater){left:720px!important}}

/* Logo mirrors only while pressed; keep the navigation in place. */
.site-header .brand{transition:none}
.site-header .brand:where(.never-active){transform:scaleX(-1);width:calc(51px * var(--scale) - 4px);height:calc(51px * var(--scale) - 4px);margin:2px}
@media(max-width:767px){.site-header .brand:where(.never-active){width:44px;height:44px}}

/* Keep the badge stable and size both sets of controls alike. */
.page-playground .nickname-reveal{display:none!important}
.site-header .brand:where(.never-active),.page-1 .site-header .brand:where(.never-active){width:calc(51px * var(--scale));height:calc(51px * var(--scale));margin:0;transform:scaleX(-1) scale(var(--logo-press-scale));transition:none}
@media(min-width:768px){.page-playground .piece.button{font-size:var(--gallery-button-font);border-width:var(--gallery-border)}.page-1 .stage .piece.text{text-align:right}}
@media(max-width:767px){.site-header .brand:where(.never-active),.page-1 .site-header .brand:where(.never-active){width:48px;height:48px;margin:0;transform:scaleX(-1) scale(var(--logo-press-scale))}.page-playground .mobile-footer .pill{border-width:2px;font-size:24px}.page-1 .mobile-home h1{text-align:right}}

.site-header .brand:active,.page-1 .site-header .brand:active{transform:none!important}
body.page-press .site-header .brand{transform:scaleX(-1) scale(var(--logo-press-scale))!important;transition:none}
/* Show each artwork in full, without cropping. */
.page-playground .piece.image img,.page-playground .mobile-item.image img{object-fit:contain!important}
@media(max-width:767px){.page-playground .mobile-content{padding-top:calc(140px + env(safe-area-inset-top))}}

.page-1 .stage .piece.text,.page-1 .mobile-home h1{text-align:left}

/* Place the player at the right and bring the footer up to the final artwork. */
.music-player{left:auto;right:clamp(16px,2.5vw,34px)}
@media(min-width:768px){.page-playground .stage{height:calc(5205px * var(--gallery-scale))}}
/* Leave room to scroll the bottom controls above the fixed player. */
.page-playground main{padding-bottom:180px}
/* The cases gallery shares the same scaled canvas and header. */
.page-2 .nickname-reveal{display:none!important}.page-2 main{padding-bottom:180px}
@media(min-width:768px){
 .page-2 .stage{height:calc(2101px * var(--gallery-scale));overflow:hidden}
 .page-2 .canvas{margin-left:16px;transform:scale(var(--gallery-scale))}
 .page-2 .piece.button{border-width:var(--gallery-border);font-size:var(--gallery-button-font)}
 
}
@media(max-width:767px){.page-2 .mobile-content{padding-top:calc(140px + env(safe-area-inset-top))}.page-2 .mobile-footer .pill{border-width:2px;font-size:24px}}
/* The nickname is revealed by the surrounding text, not the Klad link. */
.page-1:has(.text-viewer a:hover) .nickname-reveal,.page-1:has(.mobile-home h1 a:hover) .nickname-reveal{opacity:0}

/* Rotate continuously while a pointer is held, then reset immediately. */
.site-header .brand:hover,.page-1 .site-header .brand:hover,body.page-press .site-header .brand{transform:none!important}
@keyframes logo-clockwise{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
body.page-press .site-header .brand svg{animation:logo-clockwise 2s linear infinite;transform-origin:center}
/* One hover target rotates the entire Avocado preview. */
.page-2 .avocado-card{background:rgb(215,218,94);border-radius:10px;overflow:hidden}
.page-2 .avocado-card .avocado-art{position:absolute;left:12.55%;top:6.57%;width:74.69%;height:88.32%;object-fit:contain!important;border-radius:0}
@media(hover:hover) and (pointer:fine){html,body,body *{cursor:url('/assets/cursor.svg') 2 2,auto!important}}
/* Keep the logo's edge blue, including antialiased border pixels. */
.site-header .brand{background:#0057ff}
.page-2 .piece.text[style*="top:145.56px"] p,.page-2 .piece.text[style*="top:145.56px"] span{font-size:52px!important;line-height:54px!important}
.case-detail .nickname-reveal{display:none!important}.case-detail main{padding-bottom:180px}.case-detail .socials{color:#fff}.case-detail .site-header .pill{background:#fff;color:#000}.case-detail .site-header .pill:hover{background:#1450ff;color:#fff}
@media(min-width:768px){
 .case-detail .stage{height:calc(var(--page-height) * var(--gallery-scale) * 1px);overflow:hidden}
 .case-detail .canvas{margin-left:16px;transform:scale(var(--gallery-scale))}
 .case-detail .piece.button[href^="/"]{border-width:var(--gallery-border);font-size:var(--gallery-button-font)}
}
@media(max-width:767px){.case-detail .mobile-content{padding-top:calc(140px + env(safe-area-inset-top))}.case-detail .mobile-footer .pill{font-size:24px;border-width:2px}}
/* The artwork and footer can pass underneath the collapsible player. */
.page-playground main,.page-2 main,.case-detail main{padding-bottom:0}
.music-toggle{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.music-toggle svg{display:block;width:16px;height:16px;flex:none}
.music-player.collapsed .music-toggle svg{transform:rotate(180deg)}
@media(min-width:768px){
 .page-playground .stage,.page-2 .stage,.case-detail .stage{height:calc((var(--footer-end) + 12px) * var(--gallery-scale) + 16px)}
}
@media(max-width:767px){
 .page-playground .mobile-content,.page-2 .mobile-content,.case-detail .mobile-content{padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .page-1 .mobile-content{padding:0}
 .page-1 .mobile-home{position:fixed;inset:0;height:100svh;min-height:0;padding:0 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
 .page-1 .mobile-home h1,.page-1 .mobile-home>.image{pointer-events:auto}
 .page-1 .mobile-home h1{font-size:min(8vw,4.4svh,52px);line-height:1.05;text-align:left;margin:0}
 .page-1 .nickname-reveal{display:block!important;position:fixed;top:calc(var(--mobile-header-bottom,110px) + 12px);right:16px;left:auto;max-width:calc(100vw - 32px);font-size:min(8vw,4.4svh,52px);line-height:1.05;text-align:right;opacity:1!important;white-space:normal;transition:none}
 .site-header .brand,.page-1 .site-header .brand,.site-header .pill,.page-1 .site-header .pill,.mobile-footer .pill,.page-2 .mobile-footer .pill,.page-playground .mobile-footer .pill,.case-detail .mobile-footer .pill,.mobile-item.button{border-width:1px}
}
/* On mobile, keep the introduction just above the expanded player. */
@media(max-width:767px){.page-1 .mobile-home{padding-bottom:calc(198px + env(safe-area-inset-bottom))}}

/* The mobile contact row stays above the Spotify player. */
body > .mobile-socials{display:none}
@media(max-width:767px){
 .site-header .socials{display:none}
 body > .mobile-socials{position:fixed;z-index:1901;display:flex;left:16px;right:16px;bottom:calc(180px + env(safe-area-inset-bottom));width:auto;margin:0;align-items:center;justify-content:space-between;gap:0;font-size:clamp(13px,3.8vw,18px);color:#000}
 body.dark > .mobile-socials{color:#fff}
 .page-1 .mobile-home{padding-bottom:calc(220px + env(safe-area-inset-bottom))}
}
@media(max-width:767px){body.page-1 > .mobile-socials,body.page-playground > .mobile-socials,body.page-2 > .mobile-socials,body.case-detail > .mobile-socials{position:fixed;left:16px;right:16px;top:auto;width:auto;margin:0;gap:0;font-size:clamp(13px,3.8vw,18px)}}
@media(min-width:768px){body > .mobile-socials{display:none!important}}
@media(max-width:767px){body > .mobile-socials{display:flex!important}}

/* Case actions and navigation retain their distinct hover treatments. */
@media (hover:hover) and (pointer:fine){
 .case-detail .stage .piece.button[href^="http"]:hover,
 .case-detail .case-actions .button:hover{background:#fff!important;color:#000!important;border-color:#fff!important}
 .stage .piece.button[href^="/"]:hover,
 .mobile-footer .pill:hover{background:#1450ff!important;color:#fff!important;border-color:#1450ff!important}
}
/* Project videos are ambient artwork; avoid triggering YouTube's hover UI. */
.case-detail .video iframe{pointer-events:none}

/* Home composition: the photo is centered, with the introduction at the bottom. */
@media(min-width:768px){
 .page-1 .music-player{right:calc(21px * var(--scale));bottom:calc(21px * var(--scale))}
 .page-1 .music-player.collapsed{transform:translateY(calc(100% + 21px * var(--scale)))}
 .page-1 .music-player.collapsed .music-toggle{top:calc(-30px - 21px * var(--scale))}
}
@media(max-width:767px){
 .page-1 .music-player{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
 .page-1 .music-player.collapsed{transform:translateY(calc(100% + max(16px,env(safe-area-inset-bottom))))}
 .page-1 .music-player.collapsed .music-toggle{top:calc(-30px - max(16px,env(safe-area-inset-bottom)))}
 .page-1 .mobile-home{padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .page-1 .mobile-home>.image{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}

/* Mobile contact rows belong to the home introduction and Playground footer. */
.mobile-home > .mobile-socials,.page-playground .mobile-content > .mobile-socials{display:none}
@media(max-width:767px){
 .page-1 .mobile-home > .mobile-socials,.page-playground .mobile-content > .mobile-socials{display:flex;position:relative;width:100%;align-items:center;justify-content:space-between;gap:4px;padding-right:44px;color:#000;font-size:clamp(12px,3.3vw,17px);pointer-events:auto}
 .page-1 .mobile-home > .mobile-socials{margin-top:16px;flex-shrink:0}
 .page-playground .mobile-content > .mobile-socials{margin:18px 0 max(50px,calc(50px + env(safe-area-inset-bottom)))}
}

/* The mobile header stays transparent as it reappears while scrolling. */
@media(max-width:767px){
 .site-header,.page-1 .site-header{background:transparent;backdrop-filter:none}
 .site-header .pill,.page-1 .site-header .pill,.case-detail .site-header .pill{background:#fff;color:#000}
 .site-header .pill:hover,.page-1 .site-header .pill:hover,.case-detail .site-header .pill:hover{background:#fff;color:#000}
 .site-header .pill:active,.page-1 .site-header .pill:active,.case-detail .site-header .pill:active{background:#1450ff;color:#fff}
}

/* On the mobile home page the introduction starts beneath the header. */
@media(max-width:767px){
 .page-1 .mobile-home{justify-content:flex-start;padding-top:calc(var(--mobile-header-bottom,110px) + 12px)}
 .page-1 .nickname-reveal{top:auto;bottom:max(16px,env(safe-area-inset-bottom));left:16px;right:auto;max-width:calc(100vw - 76px);text-align:left}
}

/* Scrolling contacts follow the navigation on all internal pages. */
.page-2 .mobile-content > .mobile-socials,.case-detail .mobile-content > .mobile-socials{display:none}
@media(max-width:767px){
 .page-playground .mobile-content > .mobile-socials,.page-2 .mobile-content > .mobile-socials,.case-detail .mobile-content > .mobile-socials{display:flex;position:relative;width:100%;align-items:center;justify-content:space-between;gap:4px;padding-right:44px;margin:18px 0 calc(80px + env(safe-area-inset-bottom));font-size:clamp(12px,3.3vw,17px)}
 .page-playground .mobile-content > .mobile-socials,.page-2 .mobile-content > .mobile-socials{color:#000}
 .case-detail .mobile-content > .mobile-socials{color:#fff}
 body:has(.music-player:not(.collapsed)) .mobile-content > .mobile-socials{margin-bottom:calc(220px + env(safe-area-inset-bottom))}
}

/* Pixel hand on interactive elements and their contents. */
@media(hover:hover) and (pointer:fine){
 :is(a[href],button:not(:disabled),[role="button"]),:is(a[href],button:not(:disabled),[role="button"]) *{cursor:url('/assets/cursor-hover.svg') 5 5,pointer!important}
}
.music-toggle{position:fixed;z-index:1902;right:clamp(16px,2.5vw,34px);top:auto;bottom:16px}
.music-toggle[aria-expanded="false"] svg{transform:rotate(180deg)}
.media-loading{background:#0057ff!important}
@media(max-width:767px){
 .music-player,.page-1 .music-player{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
 .music-toggle{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
 body > .mobile-socials,body.page-1 > .mobile-socials,body.page-playground > .mobile-socials,body.page-2 > .mobile-socials,body.case-detail > .mobile-socials{position:fixed;z-index:1901;left:16px;right:58px;bottom:max(22px,calc(22px + env(safe-area-inset-bottom)));top:auto;width:auto;margin:0;display:flex;justify-content:space-between;gap:4px;font-size:clamp(12px,3.3vw,17px)}
}
@media(max-width:767px){
 body .mobile-content > .mobile-socials,body .mobile-home > .mobile-socials{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;display:flex;width:100%;padding-right:44px;margin:18px 0 6px!important;justify-content:space-between;gap:4px;font-size:clamp(12px,3.3vw,17px)}
 .page-1 .mobile-home{position:relative;inset:auto;min-height:100svh;height:auto;gap:0;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .page-1 .mobile-home .nickname-reveal{position:relative;inset:auto;max-width:100%;margin-top:auto;padding-top:40px;text-align:left;pointer-events:auto}
 .page-1 .mobile-home h1{margin-bottom:40px}
 .page-1 .site-header.header-hidden{transform:none}
 body:has(.music-player:not(.collapsed)) .mobile-content > .mobile-socials{margin-bottom:6px!important}
}
/* Match the player toggle outline to the navigation buttons. */
.music-toggle{border-width:2px}
@media(max-width:767px){.music-toggle{border-width:1px}.page-1 .mobile-home .nickname-reveal{padding-bottom:8px}}
.music-toggle .music-spotify{display:none}
.music-toggle[aria-expanded="false"] .music-arrow{display:none}
.music-toggle[aria-expanded="false"] .music-spotify{display:block;transform:none;color:#000}
@media(max-width:767px){
 .music-toggle[aria-expanded="true"]{bottom:calc(170px + env(safe-area-inset-bottom))}
 .music-toggle[aria-expanded="false"]{bottom:max(16px,env(safe-area-inset-bottom))}
}
.datalane-main{padding:clamp(110px,12vw,190px) 16px 16px;background:#000;color:#fff}
.datalane-intro{max-width:1150px;margin:0 auto 80px}.datalane-intro h1{font-size:clamp(42px,6vw,80px);font-weight:400;margin:0 0 28px}.datalane-intro p{max-width:650px;line-height:1.5;margin-bottom:22px}.datalane-meta{color:#aaa}.datalane-link,.datalane-footer .pill{display:inline-flex;border:2px solid #fff;border-radius:99px;padding:10px 24px;color:#fff;background:#000}.datalane-link:hover{background:#fff;color:#000}.datalane-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:1600px;margin:auto}.datalane-gallery img{width:100%;height:auto;grid-column:span 2}.datalane-gallery img[src*="-left"],.datalane-gallery img[src*="-right"]{grid-column:span 1}.datalane-footer{display:flex;margin-top:24px}.datalane-footer .pill{width:50%;font-size:24px;height:55px}.datalane-footer .pill:hover{background:#1450ff;color:#fff}
@media(max-width:767px){.datalane-main{padding:140px 16px 16px}.datalane-intro{margin-bottom:45px}.datalane-gallery{gap:5px}.datalane-footer .pill{border-width:1px}.datalane-mobile-contacts{padding:0}.datalane-mobile-contacts>.mobile-socials{color:#fff}}
/* Case covers keep square corners. */
.page-2 .stage .piece.image,.page-2 .stage .piece.image img,.page-2 .case-cover,.page-2 .case-cover img{border-radius:0!important}
/* The first case caption is a caption, not the page heading. */
.page-2 .piece.text[style*="top:673.0px"] p{font-size:9px!important;line-height:7px!important}
/* Match the case introduction to Divan.ru. */
@media(min-width:768px){
 .page-datalane .datalane-main{padding-top:calc(95px * var(--gallery-scale));padding-left:calc(26px * var(--gallery-scale));padding-right:calc(14px * var(--gallery-scale))}
 .page-datalane .datalane-intro{max-width:none;display:grid;grid-template-columns:32% 68%;align-items:start;margin:0 0 calc(135px * var(--gallery-scale));column-gap:0}
 .page-datalane .datalane-intro h1{grid-column:1 / -1;font-size:calc(42px * var(--gallery-scale));line-height:1.05;margin:0 0 calc(8px * var(--gallery-scale))}
 .page-datalane .datalane-intro p{font-size:calc(14px * var(--gallery-scale));line-height:1.15;margin:0;max-width:none}
 .page-datalane .datalane-intro .datalane-meta{grid-column:1;color:#707070}
 .page-datalane .datalane-intro .datalane-meta+p{grid-column:2}
 .page-datalane .datalane-link{grid-column:2;justify-self:start;font-size:calc(14px * var(--gallery-scale));padding:calc(6px * var(--gallery-scale)) calc(18px * var(--gallery-scale));border-width:2px;margin-top:calc(15px * var(--gallery-scale))}
}
/* One mobile title scale and starting position across all pages. */
@media(max-width:767px){
 :root{--mobile-title-size:min(8vw,4.4svh,52px)}
 .page-playground .mobile-content,.page-2 .mobile-content,.case-detail:not(.page-datalane) .mobile-content{padding-top:calc(var(--mobile-header-bottom,110px) + 12px)}
 .case-detail .case-intro{padding-top:0}
 body:not(.page-1) .mobile-content h1,.page-datalane .datalane-intro h1{font-size:var(--mobile-title-size);line-height:1.05;font-weight:400;letter-spacing:-.04em;margin:0 0 calc(3 * var(--mobile-title-size))}
 .page-datalane .datalane-main{padding-top:calc(var(--mobile-header-bottom,110px) + 12px)}
 .page-datalane .datalane-mobile-contacts{padding-top:0}
}

/* One player position and synchronized toggle motion on every route. */
:root{--player-edge:16px;--player-right:clamp(16px,2.5vw,34px)}
body .music-player,body.page-1 .music-player{left:auto;right:var(--player-right);bottom:var(--player-edge);height:152px;transition:transform .25s ease}
body .music-player.collapsed,body.page-1 .music-player.collapsed{transform:translateY(calc(100% + var(--player-edge)))}
body .music-toggle{left:auto;right:var(--player-right);top:auto;transition:bottom .25s ease}
body .music-toggle[aria-expanded="false"]{bottom:var(--player-edge)}
body .music-toggle[aria-expanded="true"]{bottom:calc(var(--player-edge) + 152px + 4px)}
@media(max-width:767px){:root{--player-edge:max(16px,env(safe-area-inset-bottom));--player-right:16px}}
@media(prefers-reduced-motion:reduce){body .music-toggle,body .music-player{transition:none}}
.playground-trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:1800;pointer-events:none}
/* Blend the small white corner of the Junior cover into its surrounding backdrop. */
.page-2 a.piece.image[href="/junior/"]::after,.page-2 .case-card[href="/junior/"] .case-cover::after{content:"";position:absolute;inset:0;background:rgb(238,237,235);clip-path:polygon(100% 88%,100% 100%,98.4% 100%);pointer-events:none}
.piece.video>.local-case-video,.mobile-item.video>.local-case-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none}

/* Video frames keep the page background around their natural aspect ratio. */
.piece.video.media-loading,.mobile-item.video.media-loading{background:transparent!important}

/* Match the portfolio blue in native scrollbars. */
html{scrollbar-color:#0057ff #f5f5f5;scrollbar-width:auto}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f5f5f5}
::-webkit-scrollbar-thumb{background:#0057ff;border-radius:0}

.piece.image>.case-preview,.case-cover>.case-preview{display:block;width:100%;height:100%;object-fit:cover;background:transparent;pointer-events:none}

.avocado-opening{background:#e9e3cf}.avocado-opening>img{width:100%;height:100%;object-fit:contain!important}
/* Shared case grid: the same interval on each case, preserving composed rows. */
@media(min-width:768px){.datalane-gallery{max-width:none;gap:calc(20px * var(--gallery-scale))}.page-datalane .datalane-main{padding-left:16px;padding-right:16px}}
@media(max-width:767px){.case-detail .project-gallery{margin-left:0;margin-right:0;gap:16px}.case-detail .datalane-gallery{gap:16px;max-width:none}.case-detail .project-gallery>.mobile-item{margin-top:0;margin-bottom:0}}
/* Case slides share one width and document-flow rhythm. */
.case-slides{display:flex;flex-direction:column;gap:20px;width:100%}
.case-slide-row{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;background:var(--row-bg,transparent);width:100%}
.case-slide-row.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-slide{position:relative;min-width:0;width:100%;aspect-ratio:var(--media-ratio);overflow:hidden;background:var(--row-bg,transparent)}
.case-slide-row.is-pair>.case-slide{aspect-ratio:var(--pair-ratio)}
.case-slide>img,.case-slide>video,.case-slide>iframe,.case-slide>svg,.case-slide>.svg-scale-wrapper{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.case-slide.crop-pair>img,.case-slide.crop-pair>video{object-fit:cover}
.case-slide>iframe{pointer-events:auto!important}
.case-slide-row.is-composition{display:block;position:relative;aspect-ratio:var(--row-ratio)}
.case-slide-row.is-composition>.case-slide{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);aspect-ratio:auto}
.case-slide-note{font-size:clamp(16px,1.8vw,26px);line-height:1.4;max-width:850px;margin-left:auto;padding:8px 0}
.case-flow-credits{padding-top:20px;text-align:center;font-size:14px;line-height:1.5}
.case-flow-credits .mobile-item.text{font:inherit}
.case-flow-footer{display:flex;gap:0;margin-top:20px}
.case-flow-footer>.pill{width:50%;height:55px;font-size:24px;border-width:2px;background:transparent;color:inherit;border-color:currentColor}
.case-flow-footer>.pill:hover{background:#0057ff;color:white}
@media(min-width:768px){.case-flow-layout .case-intro-stage{height:calc(var(--intro-height) * var(--gallery-scale) * 1px)!important;overflow:visible}.case-flow-layout .case-intro-stage>.canvas{height:100%}.case-flow-desktop{margin:0 16px 16px}.case-flow-layout .case-intro-stage .piece.text{height:auto!important}.datalane-gallery{gap:20px}}
@media(max-width:767px){.case-flow-desktop{display:none}.case-slides,.case-slide-row{gap:16px}.case-slide-row.is-pair{grid-template-columns:minmax(0,1fr)}.case-slide-row.is-pair>.case-slide{aspect-ratio:var(--media-ratio)}.case-slide-row.is-composition{display:flex;flex-direction:column;aspect-ratio:auto}.case-slide-row.is-composition>.case-slide{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--media-ratio)}.case-slide-note{font-size:16px;padding:0}.case-detail .datalane-gallery{grid-template-columns:minmax(0,1fr);gap:16px}.case-detail .datalane-gallery>img{grid-column:1!important}}
/* Branded fallback keeps navigation and the persistent music player. */
.page-error{--page-bg:#0057ff;min-height:100svh;overflow:hidden;color:#000}
.error-main{min-height:100svh;display:grid;place-items:center;padding:100px 16px 200px}
.error-main h1{font-size:clamp(80px,15vw,190px);font-weight:400;letter-spacing:-.06em;margin:0}
.error-copy{position:fixed;left:16px;bottom:16px;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.04em;z-index:2}
.error-copy a{text-decoration:underline;text-underline-offset:.12em}
.page-error .site-header .socials{color:#000}
@media(max-width:767px){.page-error .error-main{padding-top:130px}.page-error .error-copy{font-size:var(--mobile-title-size,32px);bottom:90px}.page-error>.mobile-socials{position:fixed!important;bottom:22px!important;left:16px!important;right:64px!important;width:auto!important;color:#000}}
.page-error .site-header .pill{background:#fff;color:#000}
.page-error .site-header .pill:hover{background:#000;color:#fff}
/* Credits retain the original blue names, light roles and compact typesetting. */
.case-flow-credits,.case-detail .credits{padding-top:20px;text-align:center;font-size:calc(12px * var(--gallery-scale));line-height:1.333333;letter-spacing:0}
.case-credit-line{margin:0 auto;max-width:100%;font:inherit}
.case-credit-line p,.case-credit-line span{font-size:inherit!important;line-height:inherit!important}
.case-slide-note{font-size:calc(14px * var(--gallery-scale));line-height:1.15;padding:0}
.case-slide-note p,.case-slide-note span{font-size:inherit!important;line-height:inherit!important}
@media(max-width:767px){.case-flow-credits,.case-detail .credits{font-size:12px;line-height:16px}.case-slide-note{font-size:16px;line-height:1.4}}
.avocado-rule-pair{background:transparent!important;align-items:start}
.avocado-rule-pair>.case-slide{min-height:0;align-self:start}
.case-slide.ogogo-wordmark-slide>img{position:absolute;inset:auto;left:50%;top:50%;width:43.6%;height:auto;transform:translate(-50%,-50%);object-fit:contain}

/* Experimental case canvas; the classic markup is retained in the source backup. */
.case-flow-credits,.case-detail .credits{font-size:14px!important;line-height:18px!important}
body.cases-canvas{height:100svh;min-height:0;overflow:hidden}
.cases-canvas #main{height:100svh;overflow:hidden;padding:0}
.case-canvas-title{position:fixed;left:32px;top:110px;margin:0;font-size:clamp(28px,3.2vw,46px);font-weight:400;line-height:1;letter-spacing:-.04em;pointer-events:none}
.case-canvas-viewport{position:fixed;inset:178px 0 64px;overflow:hidden;touch-action:none}
.case-canvas-world{position:absolute;inset:0;transform-origin:center;will-change:transform}
.case-canvas-tile{position:absolute;display:flex;align-items:flex-start;gap:12px;width:var(--tile-w);text-decoration:none;transform:translate(-50%,-50%);outline-offset:8px}
.case-canvas-cover{flex:none;width:var(--cover-w);height:var(--cover-h);aspect-ratio:486/274;position:relative;overflow:hidden;transform-origin:center;transition:transform .32s cubic-bezier(.22,.7,.2,1);will-change:transform;border-radius:0!important}
.case-canvas-cover>img,.case-canvas-cover>video{display:block;width:100%;height:100%;object-fit:cover}
.case-canvas-label{display:block;flex:1;min-width:0;font-size:11px;line-height:1.25;letter-spacing:-.015em;transition:opacity .25s;padding-top:2px}
.case-canvas-world.has-active .case-canvas-tile:not(.is-active) .case-canvas-cover{transform:scale(.91)}
.case-canvas-world.has-active .case-canvas-tile:not(.is-active) .case-canvas-label{opacity:.6}
.case-canvas-tile.is-active{z-index:3}
.case-canvas-tile.is-active .case-canvas-cover{transform:rotate(-1deg) scale(1.065)}
.cases-canvas .site-header{transition:transform .3s;transform:none!important}
.cases-canvas>.mobile-socials{display:none!important}
@media(max-width:767px){.case-canvas-title{left:16px;top:calc(var(--mobile-header-bottom,70px) + 18px);font-size:30px}.case-canvas-viewport{top:calc(var(--mobile-header-bottom,70px) + 64px);bottom:64px}.case-canvas-tile{gap:7px}.case-canvas-label{font-size:9px;line-height:1.2}.case-canvas-tile.is-active .case-canvas-cover{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.case-canvas-cover,.case-canvas-label{transition:none}.case-canvas-tile.is-active .case-canvas-cover{transform:none}}
@media(max-width:767px){body.cases-canvas>.mobile-socials{display:flex!important;position:fixed!important;left:16px!important;right:64px!important;bottom:22px!important;top:auto!important;width:auto!important;margin:0!important;padding:0!important;justify-content:space-between;gap:4px}}
.case-canvas-viewport{user-select:none;-webkit-user-select:none}
.case-canvas-name,.case-canvas-description{display:block}
/* Separate the paired slide backgrounds with the shared gutter. */
.case-slide-row.is-pair{background:transparent!important}
.case-slide.ogogo-wordmark-slide>img{inset:0;left:0;top:0;transform:none;width:100%;height:100%;object-fit:contain}

/* Allow touch drawing on the error canvas without browser panning. */
.page-error #main{touch-action:none;-webkit-user-select:none;user-select:none}