@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Silkscreen:wght@400;700&display=swap');

:root{
  --void:#09090b;
  --panel:#121216;
  --panel-2:#19191f;
  --grid:#303039;
  --paper:#fbfaed;
  --paper-2:#f0efd9;
  --ink:#111116;
  --muted:#777781;
  --muted-light:#a9a9b1;
  --pink:#ff2d91;
  --yellow:#f5ff19;
  --cyan:#62fff1;
  --violet:#8067ff;
  --danger:#ff5349;
  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Monaco,Consolas,monospace;
  --pixel:'Silkscreen',monospace;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:#f6f6f2;
  font-family:var(--mono);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:10px 10px;
}
a{color:inherit}
::selection{background:var(--pink);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

.site-head{
  position:sticky;top:0;z-index:30;
  background:rgba(9,9,11,.94);
  border-bottom:2px solid var(--grid);
  backdrop-filter:blur(12px);
}
.site-head .wrap{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  font-family:var(--display);
  font-size:28px;
  line-height:1;
  letter-spacing:.025em;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:3px 3px 0 rgba(255,45,145,.28);
}
.brand::after{content:" /";color:var(--pink)}
.nav{display:flex;gap:8px;align-items:center}
.nav a{
  text-decoration:none;
  color:var(--muted-light);
  border:1px solid transparent;
  padding:8px 10px;
  font-family:var(--pixel);
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
}
.nav a:hover{
  color:var(--ink);
  background:var(--yellow);
  border-color:var(--yellow);
  box-shadow:2px 2px 0 var(--pink);
  transform:translate(-1px,-1px);
}

.hero{padding:88px 0 34px}
.eyebrow,.section-kicker,.titleline,.info h3{
  font-family:var(--pixel);
  font-size:9px;
  line-height:1.35;
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--cyan);
}
.hero .eyebrow{
  display:inline-block;
  border:1px solid var(--grid);
  background:var(--panel);
  padding:7px 9px;
  margin-bottom:18px;
}
h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(54px,8.2vw,104px);
  line-height:.92;
  letter-spacing:.004em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 28px;
  max-width:1040px;
}
.hero h1{
  text-shadow:5px 5px 0 rgba(128,103,255,.28);
}
.hero .lede,.closing .lede{
  max-width:850px;
  margin:0;
  color:#c4c4cc;
  font-size:clamp(17px,2vw,22px);
  line-height:1.55;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-block;
  appearance:none;
  text-decoration:none;
  border:1px solid #50505b;
  border-radius:0;
  background:#17171c;
  color:#f5f5f1;
  padding:10px 13px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase;
  transition:transform .08s ease,box-shadow .08s ease,border-color .08s ease,background .08s ease;
}
.btn:hover{
  border-color:#fff;
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--violet);
}
.btn.primary{
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow);
}
.btn.primary:hover{
  background:var(--pink);
  color:#fff;
  border-color:var(--pink);
  box-shadow:3px 3px 0 var(--cyan);
}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:48px 0 82px;
  background:transparent;
  border:0;
}
.metric{
  position:relative;
  min-height:128px;
  padding:22px 18px;
  background:var(--panel);
  border:1px solid var(--grid);
  overflow:hidden;
}
.metric::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--cyan);
}
.metric:nth-child(2)::before{background:var(--pink)}
.metric:nth-child(3)::before{background:var(--yellow)}
.metric:nth-child(4)::before{background:var(--violet)}
.metric strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-family:var(--display);
  font-weight:400;
  font-size:35px;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.metric span{display:block;margin-top:10px;color:#91919b;font-size:11px;line-height:1.45}

.section{padding:10px 0 78px}
.section-head{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:34px;
  align-items:start;
  margin-bottom:27px;
}
.section-kicker{
  color:var(--cyan);
  border-top:2px solid var(--cyan);
  padding-top:9px;
}
.section-intro{
  margin:0;
  max-width:800px;
  font-family:var(--display);
  font-weight:400;
  color:#fff;
  font-size:clamp(28px,4vw,46px);
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.work{display:grid;gap:18px}
.case{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  border:2px solid #000;
  border-radius:0;
  padding:30px;
  box-shadow:6px 6px 0 var(--violet);
}
.case::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,var(--yellow) 0 33.333%,var(--pink) 33.333% 66.666%,var(--cyan) 66.666%);
}
.case:nth-child(2){box-shadow:6px 6px 0 var(--pink)}
.case:nth-child(3){box-shadow:6px 6px 0 var(--cyan)}
.case-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.case h2,.case h3{
  font-family:var(--display);
  color:var(--ink);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:4px 0 0;
}
.case h3{font-size:34px;line-height:1}
.case .sub{
  margin:8px 0 13px;
  color:#d60066;
  font-weight:700;
  font-size:13px;
}
.case p{max-width:820px;margin:0;color:#5f5f68}
.case .proof{
  margin-top:16px;
  border-top:2px solid var(--ink);
  padding-top:12px;
  color:var(--ink);
  font-weight:700;
  font-size:12px;
}
.case-link{
  white-space:nowrap;
  text-decoration:none;
  color:var(--ink);
  background:var(--yellow);
  border:1px solid var(--ink);
  padding:9px 10px;
  font-family:var(--pixel);
  font-size:8px;
  line-height:1.15;
  text-transform:uppercase;
}
.case-link:hover{background:var(--pink);color:#fff;box-shadow:3px 3px 0 var(--cyan)}

.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cap{
  position:relative;
  overflow:hidden;
  background:rgba(18,18,22,.88);
  border:1px solid var(--grid);
  border-radius:0;
  padding:22px;
}
.cap::after{
  content:"";
  position:absolute;right:12px;top:12px;
  width:8px;height:8px;background:var(--pink);
  box-shadow:-12px 0 0 var(--yellow),-24px 0 0 var(--cyan);
}
.cap h3{
  margin:0 0 9px;
  max-width:85%;
  color:#fff;
  font-family:var(--display);
  font-size:25px;
  line-height:1;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.cap p{margin:0;color:#9999a3;font-size:12px;line-height:1.55}

.through{
  position:relative;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  padding:38px;
  box-shadow:7px 7px 0 var(--pink);
}
.through::before{
  content:"SYSTEM LOG / RECURRING PATTERN";
  display:block;
  margin-bottom:18px;
  color:#66666f;
  font-family:var(--pixel);
  font-size:8px;
}
.through p{
  margin:0;
  max-width:930px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(31px,5vw,57px);
  line-height:.98;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.through small{
  display:block;
  margin-top:18px;
  padding-top:14px;
  border-top:2px solid var(--ink);
  color:#5f5f68;
  font-size:11px;
}

.closing{padding-bottom:78px}
.closing .lede{font-size:17px;line-height:1.62}
.footer{
  border-top:2px solid var(--grid);
  padding:28px 0 40px;
  color:#81818b;
  background:rgba(9,9,11,.92);
  font-size:11px;
}
.footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer a{color:var(--cyan)}

.case-hero{padding:74px 0 28px}
.case-hero h1{max-width:940px;font-size:clamp(55px,8vw,96px)}
.case-hero .lede{
  max-width:860px;
  color:#b2b2ba;
  font-size:19px;
  font-style:normal;
}
.band{
  margin:22px 0 56px;
  background:transparent;
  border:0;
}
.band-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  background:transparent;
}
.band-cell{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--ink);
  padding:30px;
  box-shadow:6px 6px 0 var(--violet);
}
.band-cell::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:7px;
  background:linear-gradient(90deg,var(--yellow) 0 33%,var(--pink) 33% 66%,var(--cyan) 66%);
}
.band-cell:nth-child(2){background:var(--panel);color:#fff;border-color:#4a4a54;box-shadow:6px 6px 0 var(--pink)}
.band-cell .eyebrow{margin-top:3px;color:#6d6d72}
.band-cell:nth-child(2) .eyebrow{color:var(--cyan)}
.band h2{
  margin:8px 0 14px;
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(34px,4vw,50px);
  line-height:.98;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.band p{margin:0;color:#5f5f68}
.band-cell:nth-child(2) p{color:#a0a0aa}
.impact-list{display:grid;gap:14px;margin-top:8px}
.impact-list div{border-bottom:1px solid var(--grid);padding-bottom:12px}
.impact-list div:last-child{border-bottom:0}
.impact-list b{
  display:block;
  color:var(--yellow);
  font-family:var(--display);
  font-weight:400;
  font-size:31px;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.impact-list span{display:block;margin-top:5px;color:#a9a9b1;font-size:10px}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.info{
  background:rgba(18,18,22,.82);
  border:1px solid var(--grid);
  padding:18px;
}
.info h3{margin:0 0 8px;color:var(--cyan)}
.info p{margin:0;color:#a2a2ac;font-size:12px}

.detail{padding:6px 0 64px}
.detail h2{
  margin:38px 0 15px;
  padding-bottom:10px;
  border-bottom:2px solid var(--grid);
  color:#fff;
  font-family:var(--display);
  font-size:34px;
  line-height:1;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.detail p{color:#c0c0c7}
.detail ul{padding-left:22px;color:#c0c0c7}
.detail li{margin:10px 0}
.detail strong{color:#fff}
.result-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:24px 0;
  background:transparent;
  border:0;
}
.result-strip div{
  background:var(--panel);
  border:1px solid var(--grid);
  padding:18px;
  text-align:center;
}
.result-strip b{
  display:block;
  color:var(--yellow);
  font-family:var(--display);
  font-size:26px;
  font-weight:400;
  text-transform:uppercase;
}
.result-strip span{display:block;margin-top:5px;color:#9696a0;font-size:10px}
.note{
  border:1px solid var(--cyan);
  border-left:6px solid var(--cyan);
  background:#0d1516;
  padding:14px 16px;
  color:#a9c8c6;
  margin:24px 0;
  font-size:11px;
}

.resume{padding:62px 0 82px}
.resume .wrap{
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--ink);
  padding:38px 42px;
  box-shadow:8px 8px 0 var(--violet);
}
.resume .wrap::before{
  content:"";
  display:block;
  height:8px;
  margin:-38px -42px 28px;
  background:linear-gradient(90deg,var(--yellow) 0 33%,var(--pink) 33% 66%,var(--cyan) 66%);
}
.resume h1{
  color:var(--ink);
  text-shadow:none;
  font-size:58px;
  margin-bottom:12px;
}
.resume .titleline{color:#6d0060;margin-bottom:6px}
.resume p{color:#55555f}
.resume a{color:#b40057}
.resume .lede{font-size:14px;max-width:880px}
.resume h2{
  margin:34px 0 17px;
  padding-bottom:9px;
  border-bottom:2px solid var(--ink);
  color:var(--ink);
  font-family:var(--display);
  font-size:31px;
  line-height:1;
  font-weight:400;
  text-transform:uppercase;
}
.job{margin-bottom:25px}
.job-head{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.job h3{margin:0;color:var(--ink);font-size:15px}
.job .dates{color:#6a6a72;font-size:10px;white-space:nowrap}
.job ul{margin:8px 0 0;padding-left:20px;color:#55555f}
.job li{margin:7px 0}
.toolrow{color:#676770!important;font-size:11px}

@media(max-width:820px){
  .nav{display:none}
  .hero{padding-top:62px}
  .metrics{grid-template-columns:1fr 1fr}
  .section-head{grid-template-columns:1fr;gap:8px}
  .section-kicker{width:max-content;min-width:150px}
  .case-top{display:block}
  .case-link{display:inline-block;margin-top:18px}
  .cap-grid{grid-template-columns:1fr}
  .band-grid,.three{grid-template-columns:1fr}
  .result-strip{grid-template-columns:1fr}
  .job-head{display:block}
  .job .dates{display:block;margin-top:3px}
}
@media(max-width:520px){
  .wrap{padding:0 16px}
  .site-head .wrap{min-height:60px}
  .brand{font-size:24px}
  h1{font-size:clamp(48px,15vw,72px)}
  .metrics{grid-template-columns:1fr}
  .metric{min-height:0}
  .case{padding:25px 19px}
  .case h3{font-size:30px}
  .through{padding:27px 20px}
  .band-cell{padding:25px 20px}
  .resume{padding-top:28px}
  .resume .wrap{margin:0 10px;padding:28px 18px;box-shadow:4px 4px 0 var(--violet)}
  .resume .wrap::before{margin:-28px -18px 22px}
  .resume h1{font-size:48px}
}