@font-face{font-family:GoLong;src:url('/assets/golong.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#d4d4d2}body{overflow-x:hidden}.composition{position:relative;width:100%;height:100svh;min-height:420px;overflow:hidden;isolation:isolate}.ribbon{position:absolute;left:0;width:100%;top:var(--y);height:var(--height);opacity:var(--opacity,1);overflow:hidden;pointer-events:none;z-index:1}.track{display:flex;width:max-content;height:100%;transform:translate3d(0,0,0);animation:drift var(--duration,30s) linear infinite;animation-direction:var(--direction,normal);will-change:transform}.group{display:flex;flex:none;height:100%;transform:translateX(var(--offset,0px))}.tile{display:block;flex:none;width:var(--tile);height:100%;background:#fff;object-fit:fill}.foreground{z-index:4;--tile:13.28vw;--height:10.2%;}.top{--y:9.5%;--offset:-10.5vw}.middle{--y:43.6%;--offset:-10.5vw}.bottom{--y:80.3%;--offset:-12.2vw}.background{--tile:14.45vw;--height:10%;--opacity:.32}.portfolio-link{position:absolute;z-index:3;left:50%;transform:translate(-50%,-50%);font-family:GoLong,'Arial Narrow',sans-serif;font-size:11.05vw;font-weight:400;line-height:1;color:#000;text-decoration:none;transition:color .18s;white-space:nowrap}.video{top:calc(31.65% + .10046em);margin-left:.01484em}.photo{top:calc(67.05% + .10046em)}@keyframes drift{to{transform:translate3d(-50%,0,0)}}
@media(max-width:700px){html,body{background:#dadada}.composition{min-height:560px}.foreground{--tile:23.6vw;--height:5.75%}.top{--y:7.9%;--offset:-10.7vw}.middle{--y:44.9%;--height:6.5%;--tile:27.1vw;--offset:-16.7vw}.bottom{--y:88%;--offset:-17.5vw}.background{--tile:20vw;--height:5%;--opacity:.38}.portfolio-link{font-size:25vw}.video{top:calc(29.275% + .10046em)}.photo{top:calc(69.7% + .10046em)}}
@media(prefers-reduced-motion:reduce){.track{animation:none;will-change:auto}.portfolio-link{transition:none}}

/* Soft local contrast behind each label; tiles remain separate animated elements. */
.portfolio-link::before{content:"";position:absolute;z-index:-2;pointer-events:none;inset:-25% -55%;background:radial-gradient(ellipse at center,rgba(212,212,210,.98) 0%,rgba(212,212,210,.94) 28%,rgba(212,212,210,.65) 48%,rgba(212,212,210,0) 72%)}
@media(max-width:700px){.portfolio-link::before{inset:-40% -40%;background:radial-gradient(ellipse at center,rgba(218,218,218,.98) 0%,rgba(218,218,218,.94) 28%,rgba(218,218,218,.65) 48%,rgba(218,218,218,0) 72%)}}

/* Center the visible capital letters, compensating for Go Long’s descender space. */
.portfolio-link::before{transform:translateY(-.10046em)}

/* Logo-style interaction tile, centered on the visible capital letters. */
.portfolio-link::after{content:"";position:absolute;z-index:-1;inset:-.08em -.14em .12em;background:#000;opacity:0;transform:scale(.96);transition:opacity .18s,transform .18s;pointer-events:none}
.portfolio-link:is(:hover,:focus-visible,:active){color:#fff;text-shadow:none;outline:none}
.portfolio-link:is(:hover,:focus-visible,:active)::after{opacity:1;transform:scale(1)}
.portfolio-link:focus-visible::after{outline:2px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #000}
@media(prefers-reduced-motion:reduce){.portfolio-link::after{transition:none}}