@font-face{font-family:'Riotink';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/riotink.woff2') format('woff2')}
@font-face{font-family:'Riotink';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/riotink-italic.woff2') format('woff2')}
@font-face{font-family:'Riotink Scribble';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/riotink-scribble.woff2') format('woff2')}
@font-face{font-family:'Drowner';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/drowner.otf') format('opentype')}
:root{
  --purple:#5A377F;
  --purple-deep:#3D1F5C;
  --purple-dark:#2D1A40;
  --bone:#FFFFFF;
  --ink:#0A0A0B;
  --tracking-tight:-0.04em;
  --tracking-display:-0.06em;
  --tracking-mono:0.15em;
  --tracking-label:0.2em;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;cursor:none}
body{
  font-family:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--purple);
  color:var(--bone);
  overflow-x:hidden;
  font-weight:400;
  line-height:1.5;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:0.15;
  pointer-events:none;
  z-index:1000;
  mix-blend-mode:overlay;
}
.cursor{
  position:fixed;
  width:14px;height:14px;
  background:var(--bone);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  transition:width .2s ease,height .2s ease;
  transform:translate(-50%,-50%);
}
.cursor.hover{width:64px;height:64px;background:var(--ink);mix-blend-mode:normal}

nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  padding:20px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  font-weight:500;
}
nav .logo{height:24px;display:flex;align-items:center}
nav .logo img{height:100%;width:auto;display:block}
nav a{color:var(--bone);text-decoration:none}
nav .back{
  border:1px solid var(--bone);
  padding:8px 16px;
  transition:all .2s ease;
}
nav .back:hover{background:var(--bone);color:var(--purple)}
.nav-left{display:flex;align-items:center;gap:18px}
.lang-toggle{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em}
.lang-opt{cursor:none;opacity:0.45;transition:opacity .2s ease}
.lang-opt.active{opacity:1;text-decoration:underline;text-underline-offset:3px}
.lang-sep{opacity:0.35}

.case-header{
  padding:140px 32px 80px;
  background:var(--purple);
  position:relative;
  border-bottom:1px solid rgba(255,255,255,0.25);
}
.case-header::before{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--purple-deep) 1px,transparent 1.5px);
  background-size:18px 18px;
  opacity:0.5;
  pointer-events:none;
}
.case-breadcrumb{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  opacity:0.7;
  margin-bottom:32px;
  position:relative;z-index:2;
}
.case-breadcrumb span{color:var(--ink);background:var(--bone);padding:2px 8px}
.case-title{
  font-size:clamp(80px,18vw,260px);
  font-weight:900;
  line-height:0.82;
  letter-spacing:var(--tracking-display);
  text-transform:lowercase;
  margin-bottom:40px;
  position:relative;z-index:2;
}
.case-meta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.25);
  position:relative;z-index:2;
}
.case-meta-item .label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  opacity:0.7;
  margin-bottom:8px;
}
.case-meta-item .value{font-size:15px;font-weight:500}

.case-hero-img{
  width:100%;
  aspect-ratio:21/9;
  background:var(--purple-deep);
  background-image:radial-gradient(circle,var(--ink) 0.8px,transparent 1.4px);
  background-size:6px 6px;
  position:relative;
}

.case-section{
  padding:120px 32px;
  background:var(--purple);
  color:var(--bone);
  position:relative;
}
.case-section.dark{background:var(--ink);color:var(--bone)}
.case-section::before{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--purple-deep) 1px,transparent 1.5px);
  background-size:18px 18px;
  opacity:0.4;
  pointer-events:none;
}
.case-section.dark::before{
  background-image:radial-gradient(circle,var(--purple-dark) 1px,transparent 1.5px);
  background-size:14px 14px;
  opacity:0.6;
}
.case-section>*{position:relative;z-index:2}

.case-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:64px;
  max-width:1400px;
  margin:0 auto;
}
.case-row-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  opacity:0.7;
  padding-top:12px;
}
.case-h2{
  font-size:clamp(40px,6vw,80px);
  font-weight:900;
  line-height:0.95;
  letter-spacing:var(--tracking-display);
  text-transform:lowercase;
  margin-bottom:40px;
}
.case-h2 em{
  font-style:normal;
  background:var(--ink);
  color:var(--bone);
  padding:0 10px;
}
.case-section.dark .case-h2 em{background:var(--purple);color:var(--bone)}
.case-body{font-size:19px;line-height:1.6;max-width:680px}
.case-body p{margin-bottom:24px}
.case-body strong{
  background:var(--ink);
  color:var(--bone);
  padding:0 6px;
  font-weight:500;
}
.case-section.dark .case-body strong{background:var(--purple);color:var(--bone)}

.gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  padding:0 32px;
  max-width:1600px;
  margin:0 auto 120px;
  position:relative;
  z-index:2;
}
.gallery-img{
  background:var(--purple-deep);
  background-image:radial-gradient(circle,var(--ink) 0.8px,transparent 1.4px);
  background-size:6px 6px;
  overflow:hidden;
  position:relative;
}
.gallery-img.span-6{grid-column:span 6;aspect-ratio:4/5}
.gallery-img.span-12{grid-column:span 12;aspect-ratio:21/9}
.gallery-img.span-4{grid-column:span 4;aspect-ratio:1/1}
.gallery-img.span-8{grid-column:span 8;aspect-ratio:4/3}

.ph-label{
  position:absolute;bottom:12px;left:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);padding:5px 9px;z-index:3;
}
.has-img .ph-label{display:none}
.case-hero-img.has-img,.gallery-img.has-img{background-color:#000}

.results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:40px;
}
.result-card{
  border:1px solid rgba(255,255,255,0.25);
  padding:32px;
}
.result-num{
  font-size:72px;
  font-weight:900;
  letter-spacing:var(--tracking-display);
  line-height:1;
  margin-bottom:16px;
  color:var(--bone);
}
.result-label{font-size:13px;line-height:1.5;opacity:0.85}

.next-project{
  padding:140px 32px;
  background:var(--purple);
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.25);
  position:relative;
}
.next-project::before{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--purple-deep) 1px,transparent 1.5px);
  background-size:18px 18px;
  opacity:0.4;
  pointer-events:none;
}
.next-project>*{position:relative;z-index:2}
.next-pre{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  opacity:0.7;
  margin-bottom:24px;
}
.next-title{
  font-size:clamp(60px,12vw,180px);
  font-weight:900;
  line-height:0.85;
  letter-spacing:var(--tracking-display);
  text-transform:lowercase;
  margin-bottom:32px;
}
.next-title a{
  color:var(--bone);
  text-decoration:none;
  transition:all .3s ease;
}
.next-title a:hover{color:var(--ink);transform:skew(-3deg);display:inline-block}
.next-arrow{
  font-size:48px;
  color:var(--ink);
  animation:bounce-h 2s ease-in-out infinite;
  display:inline-block;
}
@keyframes bounce-h{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(12px)}
}

footer.main{
  padding:24px 32px;
  background:var(--purple);
  border-top:1px solid rgba(255,255,255,0.25);
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  opacity:0.7;
  font-family:'JetBrains Mono',monospace;
}

a,button{cursor:none}

@media (max-width:900px){
  nav{padding:14px 20px}
  .cursor{display:none}
  html{cursor:auto}
  a,button,.lang-opt{cursor:pointer}
  .case-header{padding:110px 20px 56px}
  .case-title{font-size:clamp(64px,22vw,120px)}
  .case-meta{grid-template-columns:1fr 1fr;gap:20px}
  .case-section{padding:72px 20px}
  .case-row{grid-template-columns:1fr;gap:20px}
  .case-h2{font-size:clamp(34px,9vw,56px)}
  .case-body{font-size:16px}
  .gallery{padding:0 20px;gap:14px;margin-bottom:72px}
  .gallery-img.span-4,.gallery-img.span-6,.gallery-img.span-8{grid-column:span 12}
  .results-grid{grid-template-columns:1fr}
  .next-project{padding:72px 20px}
}