:root { color-scheme: light; }
.desktop-wallpaper {
  background: radial-gradient(ellipse at 100% 3%, #078eff 0, #86d8fc80 17%, transparent 37%), linear-gradient(175deg,#fff 13%,#f2fcff 33%,#b0e6fc 67%,#58b1f2 100%);
}
.desktop-wallpaper::after {
  content:""; position:absolute; inset:32% 0 0;
  background:repeating-linear-gradient(90deg,#ffffff2b 0%,#ffffff06 5.5%,#2574d52b 5.65%,#ffffff18 5.8%,#ffffff00 11%);
  mask-image:linear-gradient(transparent,#000 85%);
}
.portfolio-art { position:absolute; inset:0; color:#153aba; }
.portfolio-kicker { position:absolute; top:18%; left:8%; margin:0; font-size:10px; font-weight:500; letter-spacing:.23em; color:#37679c; }
.portfolio-wordmark { position:absolute; top:27%; left:7%; width:83%; pointer-events:auto; transform:translate3d(calc(var(--wall-x,0px) * -.25),calc(var(--wall-y,0px) * -.25),0); }
.portfolio-wordmark-crop { position:relative; display:block; width:100%; aspect-ratio:2796 / 840; overflow:hidden; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.portfolio-wordmark .portfolio-wordmark-crop img { position:absolute; display:block; width:119.59943%; max-width:none; height:auto; left:-9.87125%; top:-59.04762%; }
.portfolio-wordmark:hover .portfolio-wordmark-crop { transform:translateY(-5px); }
.portfolio-wordmark:focus-visible { outline:2px solid #235ee1; outline-offset:8px; border-radius:8px; }
.portfolio-year { position:absolute; top:48%; right:10%; font-size:clamp(85px,14vw,260px); font-weight:750; font-style:italic; letter-spacing:-.08em; color:#2a62b829; line-height:1; transform:translate3d(calc(var(--wall-x,0px) * .5),0,0); }
.portfolio-object { position:absolute; display:block; border:0; padding:0; background:none; pointer-events:auto; cursor:pointer; color:#244a91; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.portfolio-object .object-motion { display:block; transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .4s cubic-bezier(.2,.8,.25,1); }
.portfolio-object img { width:100%; display:block; user-select:none; }
.portfolio-smile { top:18%; right:1.5%; width:19%; max-width:350px; transform:translate3d(calc(var(--wall-x,0px) * -1),calc(var(--wall-y,0px) * -1),0); }
/* The generated smile has a baked checkerboard. This silhouette mask removes it
   without altering the white face or resampling the high-resolution artwork. */
.portfolio-smile img { clip-path:polygon(23.8% 18.6%,37.7% 11.4%,41.6% 13.1%,47.2% 10.4%,73% 21.5%,72.4% 26.2%,80.7% 30%,80.3% 34.5%,84.9% 36%,82.2% 50.4%,87.4% 52%,83.2% 70.3%,78.4% 73.7%,76.7% 83.3%,62.9% 90.7%,58.8% 89%,53.3% 91.7%,27.5% 80.3%,28.2% 75.6%,19.5% 71.9%,20.2% 67.5%,15.9% 65.3%,18.3% 51.4%,13.9% 49.4%,17% 30.9%,22% 28.1%); }
.portfolio-hand { left:12%; top:51%; width:16%; max-width:260px; transform:translate3d(calc(var(--wall-x,0px) * -1.4),calc(var(--wall-y,0px) * -1.4),0); }
.object-tip { position:absolute; left:50%; bottom:-23px; white-space:nowrap; transform:translate(-50%,6px); font:11px/1.4 ui-sans-serif,system-ui,sans-serif; letter-spacing:.04em; opacity:0; transition:opacity .2s,transform .25s; background:#ffffffbd; padding:6px 11px; border:1px solid #fff; border-radius:20px; }
.portfolio-object:hover .object-tip,.portfolio-object:focus-visible .object-tip { opacity:1; transform:translate(-50%,0); }
.portfolio-object:focus-visible { outline:2px solid #2367d6; outline-offset:5px; border-radius:20px; }
.portfolio-greeting { position:absolute; top:17%; right:19%; background:#ffffffd9; border:1px solid #fff; padding:10px 16px; border-radius:18px 18px 2px 18px; font-size:13px; opacity:0; transform:translateY(6px); transition:opacity .2s,transform .3s; }
.portfolio-greeting.is-visible { opacity:1; transform:translateY(0); }
.portfolio-explore { z-index:5; }
.portfolio-wordmark { top:28%; width:84%; }
@media(max-width:700px) { .portfolio-art .portfolio-smile { top:16%; width:25%; }.portfolio-art .portfolio-wordmark { top:35%; width:90%; } }
@media(prefers-reduced-motion:reduce) { .portfolio-wordmark-crop { transition:none; }.portfolio-wordmark:hover .portfolio-wordmark-crop { transform:none; } }
@media(min-aspect-ratio:2/1) { .portfolio-wordmark { width:70%; left:14%; top:16%; }.portfolio-hand { top:47%; width:12%; }.portfolio-smile { width:14%; top:12%; }.portfolio-year { top:46%; font-size:11vw; } }
@media(max-width:700px) { .portfolio-kicker { top:23%; left:7%; font-size:8px; }.portfolio-wordmark { top:35%; left:5%; width:90%; }.portfolio-smile { top:20%; right:5%; width:29%; }.portfolio-hand { top:51%; left:10%; width:26%; }.portfolio-year { top:48%; right:9%; font-size:20vw; }.portfolio-discipline { display:none; }.portfolio-greeting { top:20%; right:36%; font-size:11px; }.object-tip { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.portfolio-wordmark,.portfolio-year,.portfolio-object { transform:none; }.portfolio-wordmark svg,.portfolio-object .object-motion,.object-tip,.portfolio-greeting { transition:none; }.portfolio-wordmark:hover svg { transform:none; } }