:root {
  --ink: #050505;
  --paper: #f7f7f5;
  --mono: "Intel One Mono", "Courier New", monospace;
  --sans: Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; scroll-behavior: auto; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--ink); overflow-x: clip; }
body::after {
  content: "";
  position: fixed;
  z-index: 9998;
  inset: -35%;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: difference;
  transform: translateZ(0);
  animation: site-grain .24s steps(2) infinite;
}
@keyframes site-grain {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(2%, -2%, 0); }
  50% { transform: translate3d(-1%, 2%, 0); }
  75% { transform: translate3d(1%, -1%, 0); }
  100% { transform: translate3d(-2%, 1%, 0); }
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.three-card-canvas {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
html.three-ready .three-card-canvas { opacity: 1; }
html.three-ready .card-strip,
html.three-ready .preview-stack {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
  pointer-events: none !important;
}
.js .reveal-item {
  opacity: 0;
  translate: 0 clamp(.75rem, 2.2vw, 1.8rem);
  filter: blur(8px);
  transition:
    opacity .48s var(--ease),
    translate .58s var(--ease),
    filter .58s var(--ease);
}
.js .scene.is-revealed .reveal-item {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: .9s, 1.05s, 1.05s;
  transition-delay: var(--reveal-delay, 0ms);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.scene { position: relative; min-height: 100svh; height: 100svh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.grain { position: absolute; inset: 0; z-index: -1; opacity: .42; pointer-events: none; background-image: radial-gradient(#9a9a9a 0.6px, transparent .7px); background-size: 5px 5px; mix-blend-mode: multiply; }
.halftone-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s var(--ease);
}
.scene.is-revealed .halftone-field { opacity: 1; }
.halftone-field span {
  position: absolute;
  inset: -12%;
  background-image:
    radial-gradient(circle, rgb(var(--halftone-color) / .72) 0 2.15px, transparent 2.55px),
    radial-gradient(circle, rgb(var(--halftone-color) / .46) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgb(var(--halftone-color) / .25) 0 .85px, transparent 1.2px);
  background-position: 0 0, 7px 9px, 3px 5px;
  background-size: 17px 17px, 26px 26px, 11px 11px;
  transform-origin: center;
  will-change: transform, opacity;
}
.halftone-field span:first-child {
  opacity: .15;
  animation: halftone-drift-a 34s cubic-bezier(.45, 0, .55, 1) infinite alternate, halftone-breathe 11s ease-in-out infinite;
  -webkit-mask-image:
    radial-gradient(ellipse 27% 22% at 14% 22%, #000 0 34%, rgb(0 0 0 / .68) 52%, transparent 79%),
    radial-gradient(ellipse 22% 19% at 62% 35%, #000 0 30%, rgb(0 0 0 / .6) 50%, transparent 78%),
    radial-gradient(ellipse 17% 22% at 91% 12%, #000 0 26%, rgb(0 0 0 / .52) 48%, transparent 77%);
  mask-image:
    radial-gradient(ellipse 27% 22% at 14% 22%, #000 0 34%, rgb(0 0 0 / .68) 52%, transparent 79%),
    radial-gradient(ellipse 22% 19% at 62% 35%, #000 0 30%, rgb(0 0 0 / .6) 50%, transparent 78%),
    radial-gradient(ellipse 17% 22% at 91% 12%, #000 0 26%, rgb(0 0 0 / .52) 48%, transparent 77%);
}
.halftone-field span:last-child {
  opacity: .11;
  background-position: 4px 3px, 11px 8px, 1px 6px;
  background-size: 21px 21px, 31px 31px, 13px 13px;
  animation: halftone-drift-b 43s cubic-bezier(.45, 0, .55, 1) infinite alternate-reverse, halftone-breathe 15s ease-in-out -5s infinite reverse;
  -webkit-mask-image:
    radial-gradient(ellipse 26% 22% at 82% 72%, #000 0 32%, rgb(0 0 0 / .62) 51%, transparent 80%),
    radial-gradient(ellipse 20% 17% at 42% 84%, #000 0 27%, rgb(0 0 0 / .55) 49%, transparent 79%),
    radial-gradient(ellipse 15% 19% at 5% 64%, #000 0 24%, rgb(0 0 0 / .48) 47%, transparent 78%);
  mask-image:
    radial-gradient(ellipse 26% 22% at 82% 72%, #000 0 32%, rgb(0 0 0 / .62) 51%, transparent 80%),
    radial-gradient(ellipse 20% 17% at 42% 84%, #000 0 27%, rgb(0 0 0 / .55) 49%, transparent 79%),
    radial-gradient(ellipse 15% 19% at 5% 64%, #000 0 24%, rgb(0 0 0 / .48) 47%, transparent 78%);
}
.halftone-field--dark { --halftone-color: 18 20 23; mix-blend-mode: multiply; }
.halftone-field--light { --halftone-color: 232 234 238; mix-blend-mode: screen; }
.halftone-field--adaptive span:first-child {
  --halftone-color: 24 25 28;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    radial-gradient(ellipse 42% 29% at 18% 17%, #000 0 34%, rgb(0 0 0 / .62) 54%, transparent 82%),
    radial-gradient(ellipse 27% 23% at 73% 34%, #000 0 28%, rgb(0 0 0 / .5) 50%, transparent 79%);
  mask-image:
    radial-gradient(ellipse 42% 29% at 18% 17%, #000 0 34%, rgb(0 0 0 / .62) 54%, transparent 82%),
    radial-gradient(ellipse 27% 23% at 73% 34%, #000 0 28%, rgb(0 0 0 / .5) 50%, transparent 79%);
}
.halftone-field--adaptive span:last-child {
  --halftone-color: 235 237 240;
  mix-blend-mode: screen;
  -webkit-mask-image:
    radial-gradient(ellipse 39% 27% at 79% 79%, #000 0 32%, rgb(0 0 0 / .58) 52%, transparent 81%),
    radial-gradient(ellipse 25% 21% at 28% 92%, #000 0 27%, rgb(0 0 0 / .48) 48%, transparent 78%);
  mask-image:
    radial-gradient(ellipse 39% 27% at 79% 79%, #000 0 32%, rgb(0 0 0 / .58) 52%, transparent 81%),
    radial-gradient(ellipse 25% 21% at 28% 92%, #000 0 27%, rgb(0 0 0 / .48) 48%, transparent 78%);
}
@keyframes halftone-drift-a {
  0% { transform: translate3d(-1.4%, -.8%, 0) rotate(-.25deg) scale(1.01); }
  50% { transform: translate3d(.8%, 1.15%, 0) rotate(.18deg) scale(1.025); }
  100% { transform: translate3d(1.7%, -.35%, 0) rotate(.32deg) scale(1.012); }
}
@keyframes halftone-drift-b {
  0% { transform: translate3d(1.2%, .7%, 0) rotate(.24deg) scale(1.018); }
  50% { transform: translate3d(-.7%, -1.05%, 0) rotate(-.16deg) scale(1.008); }
  100% { transform: translate3d(-1.65%, .4%, 0) rotate(-.3deg) scale(1.022); }
}
@keyframes halftone-breathe {
  0%, 100% { opacity: .105; }
  50% { opacity: .175; }
}

.hero { background: linear-gradient(180deg, #fff 0%, #fbfbfa 57%, #dddee7 100%); }
.hero__content { position: relative; z-index: 6; width: min(92vw, 41.6rem); margin: 0 auto; padding-top: clamp(2.8rem, 6.7svh, 4.6rem); text-align: center; display: grid; justify-items: center; }
.hero__logo { width: clamp(15rem, 19.4vw, 23.3rem); height: clamp(10rem, 12.9vw, 15.5rem); object-fit: cover; object-position: center; margin-top: clamp(.2rem, 1svh, .7rem); }
.eyebrow, .hero__note { margin: .35rem 0 0; font: 400 clamp(.65rem, .83vw, 1rem)/1.15 var(--mono); }
.hero__note { margin-top: clamp(1.2rem, 3svh, 2.7rem); }
.cta { width: min(100%, 23.3rem); min-height: 2.8rem; margin-top: clamp(1.9rem, 5.5svh, 3.75rem); padding: 0 .62rem 0 0; display: flex; align-items: center; justify-content: space-between; text-decoration: none; font: 500 clamp(1.3rem, 1.88vw, 2.25rem)/1 Inter, var(--sans); letter-spacing: .15em; transition: color .3s var(--ease), background-color .3s var(--ease); }
.cta span { padding-left: 0; }
.cta img { width: clamp(1.4rem, 1.8vw, 2.2rem); height: auto; transition: transform .3s var(--ease), filter .3s var(--ease); }
.cta--dark { color: white; background: black; }
.cta--light { color: black; background: white; }
.cta:hover img, .cta:focus-visible img { transform: translate(4px, -4px); }
.cta--dark:hover, .cta--dark:focus-visible { color: black; background: white; outline: 1px solid black; }
.cta--dark:hover img, .cta--dark:focus-visible img { filter: invert(1); }
.cta--light:hover, .cta--light:focus-visible { color: white; background: black; outline: 1px solid white; }
.cta--light:hover img, .cta--light:focus-visible img { filter: invert(1); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.card-strip { position: absolute; z-index: 3; left: 0; bottom: clamp(2.8rem, 6svh, 4.1rem); width: max-content; display: flex; justify-content: flex-start; align-items: flex-start; pointer-events: none; animation: strip-right 34s linear infinite; will-change: transform; }
.card-strip--about { animation-name: strip-left; animation-duration: 38s; }
.card-strip:hover { animation-play-state: paused; }
.art-card { flex: 0 0 clamp(18rem, 24.5vw, 29.4rem); aspect-ratio: 1.62; margin: 0 clamp(-2.8rem, -2.55vw, -1.25rem); padding:0; border:0; background:none; cursor:pointer; transform: rotate(var(--rotation)); filter: drop-shadow(0 .55rem .22rem rgb(0 0 0 / .25)); transition: transform .35s var(--ease); pointer-events: auto; }
.card-composite,.project-composite { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; }
.card-shader { position:absolute; z-index:2; inset:0; opacity:var(--shader-strength,.55); pointer-events:none; mix-blend-mode:screen; -webkit-mask:var(--card-texture) center/contain no-repeat; mask:var(--card-texture) center/contain no-repeat; }
.card-shader--none { display:none; }
.card-shader--foil { background:linear-gradient(115deg,transparent 12%,#fff7 34%,#a9d9e988 45%,#fff8 52%,transparent 73%); background-size:220% 100%; animation:card-shader-slide 5.4s linear infinite; }
.card-shader--holo { background:conic-gradient(from 20deg at 55% 45%,#ff4da677,#43f8ff88,#ffe86177,#7cff8488,#8d60ff88,#ff4da677); filter:saturate(1.35); animation:card-shader-holo 6.5s ease-in-out infinite alternate; }
.card-shader--prism { background:repeating-linear-gradient(125deg,#ff487966 0 8%,#ffdb5766 12%,#51f6d066 20%,#6d75ff66 30%,#ff487966 40%); background-size:190% 190%; animation:card-shader-slide 7.4s linear infinite reverse; }
.card-shader--shimmer { background:linear-gradient(105deg,transparent 28%,#fff8 45%,#fff 50%,#fff8 55%,transparent 72%); background-size:260% 100%; animation:card-shader-slide 4.2s ease-in-out infinite; }
@keyframes card-shader-slide { to { background-position:200% 0; } }
@keyframes card-shader-holo { to { transform:translate3d(3%,-2%,0) rotate(4deg) scale(1.08); filter:hue-rotate(60deg) saturate(1.55); } }
.art-card .card-composite > img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; transform-style: preserve-3d; transition: filter .45s var(--ease); }
.art-card:hover { transform: translateY(-8px) rotate(calc(var(--rotation) * .75)); }
.art-card:hover img,
.preview:hover img,
.preview:focus-visible img {
  animation: card-hover-float 5.2s ease-in-out infinite alternate;
  filter: brightness(1.045) drop-shadow(0 1rem .55rem rgb(0 0 0 / .24));
}

@keyframes strip-right {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes strip-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes preview-down {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes card-hover-float {
  0% { transform: perspective(900px) rotateX(0deg) rotateY(-3.5deg) translate3d(0, -2px, 14px); }
  50% { transform: perspective(900px) rotateX(2.2deg) rotateY(1.5deg) translate3d(0, -8px, 22px); }
  100% { transform: perspective(900px) rotateX(-1.5deg) rotateY(4deg) translate3d(0, -4px, 16px); }
}

.projects { color: white; background: #030303; }
.projects.is-empty .project-layout { opacity:0; pointer-events:none; }
.projects__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 18%, #3d3d3d55, transparent 36%), linear-gradient(180deg, #000 0%, #161616 52%, #000 100%); opacity: .75; }
.project-layout { position: relative; z-index: 5; width: min(100%, 120rem); height: 100%; margin: auto; padding: clamp(2rem, 4.2vw, 5rem) clamp(1.5rem, 3.75vw, 4.5rem); display: grid; grid-template-columns: minmax(27rem, 1.75fr) minmax(20rem, 1fr) minmax(20rem, 1.18fr); gap: clamp(2rem, 3.5vw, 4.25rem); align-items: center; pointer-events:none; }
.project-art,.project-info { pointer-events:auto; }
.project-art { position: relative; perspective: 1100px; transform: rotate(3.2deg); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.project-art::after { content: ""; position: absolute; inset: 7% 4% 7% 4%; z-index: -1; background: url("assets/card-shadow.png") center/100% 100% no-repeat; box-shadow: 0 .55rem .25rem rgb(0 0 0 / .3); }
.project-art img { width: 100%; height: auto; aspect-ratio: 1.64; object-fit: contain; }
.project-composite { aspect-ratio:1.64; }
.video-preview { position:absolute; z-index:3; inset:10%; padding:0; border:0; overflow:hidden; background:transparent; cursor:pointer; clip-path:polygon(0 4%,2% 1%,9% 0,17% 1%,26% 0,34% 1%,45% 0,54% 1%,64% 0,74% 1%,84% 0,93% 1%,100% 0,99% 9%,100% 19%,99% 29%,100% 39%,99% 50%,100% 61%,99% 72%,100% 82%,99% 92%,100% 100%,91% 99%,82% 100%,72% 99%,61% 100%,51% 99%,40% 100%,30% 99%,20% 100%,10% 99%,0 100%,1% 91%,0 81%,1% 70%,0 59%,1% 48%,0 37%,1% 25%,0 14%); }
.video-preview video,.video-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; transition:opacity .75s var(--ease), filter .75s var(--ease), transform 1.2s var(--ease); }
.video-preview__color { opacity:0; filter:saturate(.82) contrast(1.05); }
.video-preview__effect { opacity:1; }
.video-preview:hover .video-preview__color,.video-preview:focus-visible .video-preview__color { opacity:1; filter:saturate(1) contrast(1); transform:scale(1.015); }
.video-preview:hover .video-preview__effect,.video-preview:focus-visible .video-preview__effect { opacity:0; }
.video-preview__hint { position:absolute; right:.7rem; bottom:.6rem; padding:.35rem .5rem; color:white; background:#000; opacity:0; transform:translateY(5px); transition:opacity .3s var(--ease),transform .3s var(--ease); font:500 clamp(.5rem,.6vw,.7rem)/1 var(--mono); letter-spacing:.06em; }
.video-preview:hover .video-preview__hint,.video-preview:focus-visible .video-preview__hint { opacity:1; transform:none; }
.project-art.is-changing { opacity: .2; transform: translateY(8px) rotate(2deg) scale(.985); }
.project-art.is-returning { opacity:0; transform:translate(42vw,-8vh) rotate(12deg) scale(.58); transition:opacity .28s ease,transform .42s var(--ease); }
.project-art.is-arriving { animation:project-arrive .75s var(--ease) both; }
.project-info.is-changing { opacity:0; translate:0 1rem; transition:opacity .22s ease,translate .3s var(--ease); }
@keyframes project-arrive { from { opacity:0; transform:translate(-12vw,5vh) rotate(-7deg) scale(.74); } to { opacity:1; transform:rotate(3.2deg) scale(1); } }
.media-float { transform-style: preserve-3d; animation: media-idle-float 5.8s ease-in-out infinite; will-change: transform; }
.media-float--sticker { animation-duration: 6.8s; animation-delay: -1.9s; }
.float-media {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --media-lift: 0px;
  --media-scale: 1;
  --media-rotate: 0deg;
  transform: perspective(1100px) translateZ(var(--media-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--media-rotate)) scale(var(--media-scale));
  transform-style: preserve-3d;
  will-change: transform, filter;
  transition: transform .22s ease-out, filter .45s var(--ease);
}
.project-art:hover .media-float,
.about__sticker-wrap:hover .media-float { animation-play-state: paused; }
.project-art:hover .float-media,
.about__sticker-wrap:hover .float-media { --media-lift: 34px; filter: brightness(1.035) drop-shadow(0 1.35rem 1.1rem rgb(0 0 0 / .28)); }
@keyframes media-idle-float {
  0%, 100% { transform: translate3d(0, -4px, 0) rotateX(.5deg) rotateY(-.7deg); }
  50% { transform: translate3d(0, 8px, 16px) rotateX(-.8deg) rotateY(.9deg); }
}
.project-info { position: relative; z-index: 6; align-self: center; font-family: var(--mono); }
.project-info h2 { margin: 0 0 .2em; font-size: clamp(1.7rem, 2.5vw, 3rem); font-weight: 400; white-space: nowrap; }
.project-info p { margin: .45em 0; font-size: clamp(1rem, 1.66vw, 2rem); }
.tags { margin: clamp(1rem, 2vw, 2rem) 0 0; padding: 0; display: flex; gap: .8rem; list-style: none; }
.tags li { min-width: 9.2rem; padding: .22em .5em; border: 1px solid white; text-align: center; font: 400 clamp(.68rem, 1.25vw, 1.5rem)/1.2 var(--sans); }
.project-info .cta { margin-top: clamp(2rem, 5.6vw, 3.8rem); }
.project-video { display:inline-block; margin-top:1rem; color:#aaa; font:400 clamp(.7rem, .85vw, 1rem)/1 var(--mono); text-underline-offset:.25em; letter-spacing:.08em; }
.project-video:hover { color:white; }
.preview-stack { align-self: center; height: min(95svh, 63rem); overflow: visible; }
.preview-track { width: 100%; display: flex; flex-direction: column; align-items: flex-start; animation: preview-down 42s linear infinite; will-change: transform; }
.preview-stack:hover .preview-track { animation-play-state: paused; }
.preview { position: relative; width: min(100%, 31rem); aspect-ratio: 1.62; margin-bottom: clamp(-8.5rem, -11svh, -4.5rem); padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--rotation)); filter: drop-shadow(0 .5rem .2rem rgb(0 0 0 / .25)); transition: transform .35s var(--ease), filter .35s var(--ease); }
.preview img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; transform-style: preserve-3d; transition: filter .45s var(--ease); }
.preview .video-preview { inset:10%; }
.preview .video-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.preview .video-preview__hint { display:none; }
.preview:hover, .preview:focus-visible, .preview[aria-current="true"] { transform: translate(-8px,-6px) rotate(calc(var(--rotation) * .7)); filter: drop-shadow(0 .8rem .35rem rgb(0 0 0 / .4)); z-index: 2; }

.about { background: linear-gradient(180deg, #fff 0%, #f6f6f4 45%, #c9c9cb 70%, #080808 100%); }
.about__layout { position: relative; z-index: 5; width: min(74vw, 88.6rem); height: 60%; margin: 0 auto; padding-top: clamp(3rem, 7.7svh, 5.3rem); display: grid; grid-template-columns: .88fr 1.25fr; align-items: start; }
.about__copy { position: relative; z-index: 6; }
.about__copy h2 { margin: 0; font: 700 clamp(5rem, 6.67vw, 8rem)/1 var(--sans); }
.about__copy > p { margin: clamp(1.6rem, 2vw, 2.2rem) 0 0; font: 400 clamp(1.2rem, 1.67vw, 2rem)/1.25 var(--mono); }
.about__copy .cta { margin-top: clamp(1.5rem, 3.2vw, 2.3rem); }
.about__sticker-wrap { width: min(38vw, 42rem); height: min(46svh, 34rem); justify-self: start; margin: -2rem 0 0 3rem; perspective: 1100px; }
.about__sticker { width: 100%; height: 100%; object-fit: cover; --media-scale: 1.18; --media-rotate: 5.3deg; }
.socials { margin-top: clamp(1.8rem, 3vw, 3.1rem); display: flex; gap: clamp(1.5rem, 2.5vw, 3rem); }
.socials a { display: inline-flex; align-items: center; gap: 1rem; font: 500 clamp(1.1rem, 1.88vw, 2.25rem)/1 Inter, var(--sans); letter-spacing: .12em; text-underline-offset: .14em; }
.socials img { width: clamp(1rem, 1.8vw, 2.2rem); height: auto; transition: transform .3s var(--ease); }
.socials a:hover img, .socials a:focus-visible img { transform: translate(3px,-3px); }
.card-strip--about { bottom: clamp(4.2rem, 9svh, 6rem); }
.about footer { position: absolute; z-index: 5; bottom: .75rem; left: 50%; transform: translateX(-50%); color: white; font: 700 clamp(.55rem, .83vw, 1rem)/1 var(--sans); white-space: nowrap; }
.video-modal { width:min(92vw,90rem); max-width:none; padding:0; border:0; color:white; background:#050505; box-shadow:0 2rem 8rem rgb(0 0 0 / .75); }
.video-modal::backdrop { background:rgb(0 0 0 / .84); backdrop-filter:blur(14px); }
.video-modal__chrome { padding:.8rem; }
.video-modal__head { min-height:2.6rem; padding:0 .35rem .75rem; display:flex; align-items:center; justify-content:space-between; font:500 .7rem/1 var(--mono); letter-spacing:.14em; }
.video-modal__head button { width:2.2rem; height:2.2rem; padding:0; border:1px solid #555; color:white; background:none; font-size:1.5rem; cursor:pointer; }
.video-modal__head button:hover { color:black; background:white; }
.inki-player { position:relative; overflow:hidden; background:#000; }
.video-modal video { display:block; width:100%; max-height:78svh; background:black; cursor:pointer; }
.inki-player__center { position:absolute; left:50%; top:50%; width:5rem; height:5rem; border:1px solid rgb(255 255 255 / .7); border-radius:50%; color:white; background:rgb(0 0 0 / .45); backdrop-filter:blur(8px); translate:-50% -50%; font-size:1.3rem; transition:opacity .25s ease,transform .35s var(--ease); }
.inki-player.is-playing .inki-player__center { opacity:0; pointer-events:none; transform:scale(.75); }
.inki-player__controls { position:absolute; inset:auto 0 0; padding:2.8rem 1rem .9rem; display:grid; grid-template-columns:auto auto 1fr auto auto auto; gap:.8rem; align-items:center; color:white; background:linear-gradient(transparent,rgb(0 0 0 / .88)); font:500 .65rem/1 var(--mono); letter-spacing:.06em; }
.inki-player__controls button { min-height:2rem; padding:0 .55rem; border:1px solid rgb(255 255 255 / .4); color:white; background:rgb(0 0 0 / .35); font:inherit; letter-spacing:.08em; cursor:pointer; }
.inki-player__controls button:hover { color:black; background:var(--acid,#d9ff43); border-color:var(--acid,#d9ff43); }
.inki-player__controls input { width:100%; accent-color:white; cursor:ew-resize; }
@media (max-width:650px) { .inki-player__controls { grid-template-columns:auto 1fr auto auto; } #player-current,#player-duration { display:none; } .inki-player__center { width:3.8rem;height:3.8rem; } }
body:has(.video-modal[open]) { overflow:hidden; }

@media (max-width: 1199px) {
  .project-layout { grid-template-columns: minmax(21rem, 1.5fr) minmax(17rem, 1fr); padding-inline: clamp(1.5rem, 4vw, 3rem); }
  .preview-stack { position: absolute; right: -8rem; width: 23rem; opacity: .34; z-index: -1; }
  .about__layout { width: 86vw; grid-template-columns: 1fr 1.05fr; }
  .socials { flex-direction: column; gap: 1rem; }
}

@media (max-width: 767px) {
  html { scroll-snap-type: y mandatory; }
  .hero__content { padding-top: max(2rem, 5svh); }
  .hero__logo { width: clamp(14rem, 62vw, 18rem); }
  .cta { min-height: 2.5rem; width: min(78vw, 22rem); font-size: clamp(1.25rem, 7vw, 1.8rem); }
  .hero__note { font-size: .65rem; }
  .card-strip { width: max-content; bottom: max(1.5rem, 4svh); }
  .art-card { flex-basis: clamp(12rem, 58vw, 16rem); margin-inline: -1.45rem; }
  .art-card,
  .preview { filter: drop-shadow(0 .3rem .12rem rgb(0 0 0 / .2)); }
  .art-card:hover img,
  .preview:hover img,
  .preview:focus-visible img { animation: none; filter: none; }
  .media-float { animation-duration: 8s; will-change: auto; }
  .float-media { will-change: auto; }
  .grain { opacity: .28; background-size: 7px 7px; }
  .project-layout { padding: max(1.25rem, 3.5svh) 1.2rem max(1rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .project-art { width: min(94vw, 34rem); margin: 2svh auto 0; }
  .project-info { width: 100%; margin-top: clamp(.4rem, 2svh, 1.3rem); }
  .project-info h2 { font-size: clamp(1.45rem, 7.2vw, 2.3rem); }
  .project-info p { display: inline-block; margin: .3rem 1rem .4rem 0; font-size: clamp(.9rem, 4.2vw, 1.2rem); }
  .tags { margin-top: .4rem; gap: .45rem; }
  .tags li { min-width: 0; font-size: clamp(.62rem, 2.7vw, .8rem); }
  .project-info .cta { margin-top: clamp(.8rem, 3svh, 1.6rem); }
  .preview-stack { right: -1.8rem; bottom: -4.2rem; height: 22rem; width: 17rem; opacity: .5; transform: scale(.7); transform-origin: right bottom; }
  .preview { flex: 0 0 13rem; margin-bottom: -8rem; }
  .about__layout { width: 100%; height: auto; padding: max(2rem, 4svh) 1.2rem 0; display: block; }
  .about__copy { position: relative; z-index: 2; }
  .about__copy h2 { font-size: clamp(4.2rem, 22vw, 6.5rem); }
  .about__copy > p { margin-top: .8rem; font-size: clamp(.95rem, 4.3vw, 1.25rem); }
  .about__copy .cta { margin-top: 1rem; }
  .about__sticker-wrap { position: absolute; z-index: 1; top: 25svh; right: -20vw; width: min(80vw, 28rem); height: min(35svh, 21rem); margin: 0; opacity: .88; }
  .about__sticker { --media-scale: 1; }
  .socials { margin-top: 1rem; gap: .65rem; }
  .socials a { width: max-content; font-size: clamp(.9rem, 4.1vw, 1.25rem); }
  .card-strip--about { bottom: clamp(2.2rem, 6svh, 3.4rem); }
}

@media (max-height: 680px) {
  .hero__content { padding-top: 1.2rem; }
  .hero__logo { width: min(14rem, 40svh); }
  .cta { margin-top: 1rem; }
  .hero__note { margin-top: .8rem; }
  .card-strip { bottom: 1rem; }
  .project-art { max-height: 43svh; }
  .project-art img { max-height: 43svh; }
  .about__layout { padding-top: 1.4rem; }
  .about__copy h2 { font-size: clamp(3.7rem, 13svh, 6rem); }
  .about__copy > p { margin-top: .5rem; }
  .about__copy .cta, .socials { margin-top: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .art-card:hover, .preview:hover, .preview:focus-visible { transform: rotate(var(--rotation)); }
  .card-strip, .preview-track { animation: none !important; }
  .card-strip { transform: translateX(-25%); }
  .art-card:hover img, .preview:hover img, .preview:focus-visible img { animation: none !important; }
  .three-card-canvas { display: none !important; }
  .media-float { animation: none !important; }
  .float-media { transform: rotateZ(var(--media-rotate)) scale(var(--media-scale)); }
  .halftone-field span { animation: none !important; transform: none !important; }
  .card-shader { animation:none !important; }
  body::after { animation: none !important; }
}

@supports not (height: 100svh) { .scene { min-height: 100vh; height: 100vh; } }
@media (max-height: 560px) and (max-width: 767px) { html { scroll-snap-type: y proximity; } .scene { min-height: 100svh; height: auto; } }

/*
 * Desktop art direction uses the 1920 × 1095 Figma frame as a fluid unit.
 * This keeps the composition proportionally identical on Full HD, 2K and 4K
 * instead of making the artwork look progressively smaller on larger screens.
 */
@media (min-width: 1200px) {
  :root { --ds: min(0.0520833333vw, 0.0913242009svh); }

  .grain { background-size: calc(5 * var(--ds)) calc(5 * var(--ds)); }

  .hero__content {
    width: calc(665 * var(--ds));
    padding-top: calc(74 * var(--ds));
  }
  .hero__logo {
    width: calc(373 * var(--ds));
    height: calc(248 * var(--ds));
    margin-top: 0;
  }
  .eyebrow,
  .hero__note { font-size: calc(16 * var(--ds)); }
  .eyebrow { margin-top: calc(8 * var(--ds)); }
  .hero__note { margin-top: calc(60 * var(--ds)); }
  .cta {
    width: calc(373 * var(--ds));
    min-height: calc(45 * var(--ds));
    padding-right: calc(10 * var(--ds));
    font-size: calc(36 * var(--ds));
  }
  .cta img { width: calc(35 * var(--ds)); }
  .hero .cta { margin-top: calc(60 * var(--ds)); }

  .card-strip {
    width: max-content;
    bottom: calc(72 * var(--ds));
  }
  .art-card {
    flex-basis: calc(470 * var(--ds));
    height: calc(290 * var(--ds));
    margin-inline: calc(-24.5 * var(--ds));
  }

  .project-layout {
    width: calc(1920 * var(--ds));
    padding: calc(40 * var(--ds)) calc(72 * var(--ds));
    grid-template-columns: calc(733 * var(--ds)) calc(420 * var(--ds)) calc(520 * var(--ds));
    gap: calc(68 * var(--ds));
  }
  .project-info h2 { font-size: calc(48 * var(--ds)); }
  .project-info p { font-size: calc(32 * var(--ds)); }
  .tags {
    gap: calc(16 * var(--ds));
    margin-top: calc(28 * var(--ds));
  }
  .tags li {
    min-width: calc(202 * var(--ds));
    font-size: calc(24 * var(--ds));
  }
  .project-info .cta { margin-top: calc(62 * var(--ds)); }
  .preview-stack {
    width: calc(520 * var(--ds));
    height: calc(1015 * var(--ds));
  }
  .preview {
    width: calc(490 * var(--ds));
    margin-bottom: calc(-49 * var(--ds));
  }

  .about__layout {
    width: calc(1417 * var(--ds));
    height: calc(600 * var(--ds));
    padding-top: calc(47 * var(--ds));
    grid-template-columns: calc(660 * var(--ds)) calc(757 * var(--ds));
  }
  .about__copy { padding-top: calc(86 * var(--ds)); }
  .about__copy h2 { font-size: calc(128 * var(--ds)); }
  .about__copy > p {
    margin-top: calc(30 * var(--ds));
    font-size: calc(32 * var(--ds));
  }
  .about__copy .cta { margin-top: calc(30 * var(--ds)); }
  .about__sticker-wrap {
    width: calc(671 * var(--ds));
    height: calc(494 * var(--ds));
    margin: calc(42 * var(--ds)) 0 0 calc(35 * var(--ds));
  }
  .socials {
    margin-top: calc(48 * var(--ds));
    gap: calc(32 * var(--ds));
  }
  .socials a {
    gap: calc(20 * var(--ds));
    font-size: calc(36 * var(--ds));
  }
  .socials img { width: calc(35 * var(--ds)); }
  .card-strip--about { bottom: calc(72 * var(--ds)); }
  .about footer {
    bottom: calc(18 * var(--ds));
    font-size: calc(16 * var(--ds));
  }
}