:root{
  --bg:#050505; --fg:#f2f2f2; --mute:#8a8a8a; --line:#1f1f1f;
  --display:'Anton',Impact,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:12px}
.label{color:var(--mute);margin-bottom:24px}
.ph{outline:1px dashed #555;outline-offset:6px;color:#bbb}
.ph-block{border:1px dashed #444;color:#777;padding:64px 24px;text-align:center}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gutter);mix-blend-mode:difference}
.nav__logo img{height:28px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);flex-wrap:wrap}
.nav__links a,.lang{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);background:none;border:0;cursor:pointer}
@media (max-width:640px){.nav__links a:not(.btn){display:none}}

.btn{display:inline-block;border:1px solid var(--fg);padding:14px 28px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:background .25s,color .25s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn--small{padding:8px 14px}

/* HERO */
.hero{height:220vh;position:relative;background:#000}
.hero__stage{background:#000;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.hero__poster{position:absolute;width:min(420px,60vw);opacity:.95;filter:drop-shadow(0 0 24px rgba(255,255,255,.25));transition:opacity .4s}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
.hero.has-frames .hero__canvas{opacity:1}
.hero.has-frames .hero__poster{opacity:0}
.hero__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.hero__copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(48px,10vh,120px);opacity:var(--copy,0);transform:translateY(calc((1 - var(--copy,0)) * 24px))}
.hero__kicker{color:var(--mute);margin-bottom:12px}
.hero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,8vw,120px);line-height:.92;letter-spacing:.01em;
  text-shadow:-2px 0 rgba(255,0,60,.55),2px 0 rgba(0,220,255,.55)}
.hero__hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--mute);opacity:calc(1 - var(--p,0)*4)}

/* SECTIONS */
section:not(.hero){padding:clamp(80px,14vh,160px) var(--gutter);border-top:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,40px)}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.collab{position:relative;display:block;overflow:hidden;background:#111;aspect-ratio:4/5}
.collab img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s,transform .8s}
.collab:hover img{filter:grayscale(0);transform:scale(1.03)}
.collab__name{position:absolute;left:20px;bottom:44px;font-family:var(--display);font-size:clamp(32px,5vw,64px);text-transform:uppercase;line-height:1;mix-blend-mode:difference}
.collab__cta{position:absolute;left:20px;bottom:18px;mix-blend-mode:difference}
.about__text{max-width:34ch;font-family:var(--display);font-weight:400;font-size:clamp(28px,4.2vw,56px);line-height:1.08;letter-spacing:.01em;text-wrap:balance}
.contact__row{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:40px}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:32px var(--gutter);border-top:1px solid var(--line);color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100vh}
  .hero__canvas{display:none}
  .hero.has-frames .hero__poster{opacity:.95}
  .hero__copy{--copy:1}
}

.piece{display:flex;flex-direction:column;gap:10px}
.piece__img{display:block;background:#fff;aspect-ratio:4/5;max-width:100%;overflow:hidden}
.piece__img img{width:100%;height:100%;object-fit:contain;transition:transform .8s}
.piece:hover .piece__img img{transform:scale(1.03)}
.piece__name{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);text-transform:uppercase;line-height:1}
.piece__cta{color:var(--mute)}
.contact__link{font-family:var(--display);font-size:clamp(28px,4vw,52px);text-transform:uppercase;line-height:1;border-bottom:1px solid transparent;transition:border-color .25s}
.contact__link:hover,.contact__link:focus-visible{border-color:var(--fg)}

.pieces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
@media (max-width:1000px){.pieces{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,62vw);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.pieces .piece{scroll-snap-align:start}}
.piece__img{position:relative}
.piece__alt{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.piece:hover .piece__alt,.piece:focus-visible .piece__alt{opacity:1}
.piece__name{font-size:clamp(18px,1.7vw,24px)}
.contact__ig{display:inline-flex;align-items:center;gap:.35em}
.contact__ig .ig{width:.9em;height:.9em}
.footer__ig{display:inline-flex;font-size:20px;color:var(--fg)}
.footer__ig:hover{opacity:.7}
.footer__right{display:inline-flex;align-items:center;gap:16px}
.featured__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}.featured__all{color:var(--fg)}.featured__all:hover{opacity:.7}