@font-face {
  font-family: Alexandria;
  src: url('assets/fonts/Alexandria-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

.how {
  --pink: #ff009d;
  container-type: inline-size;
  aspect-ratio: 1440 / 920;
  min-height: 0;
  display: block;
  background: #fff;
}
.how__background {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  opacity: .8;
}
.how__content {
  position: absolute;
  inset: 0;
  padding: 0;
}
.how h2 {
  position: absolute;
  left: 15.902778%;
  top: 13.804348%;
  width: 69.444444%;
  margin: 0;
  font: 800 5.277778cqw / normal Alexandria, Arial, sans-serif;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: .277778cqw #202020;
  paint-order: stroke fill;
  text-shadow: none;
}
.how__note {
  position: absolute;
  left: 35.069444%;
  top: 30.543478%;
  width: 30.277778%;
  height: 36.413043%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  border-radius: 2.222222cqw;
  background: rgba(237,248,239,.47);
  box-shadow: none;
}
.how__note h3 {
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: 4.305556cqw;
  padding: 0 .416667cqw 0 0;
  margin: 0;
  border: 1px solid #202020;
  border-radius: 2.5cqw;
  background: #fefefe;
  color: var(--pink);
  font: 400 3.472222cqw / 4.166667cqw 'Pixelify Sans', monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.how__note p {
  position: absolute;
  top: 5.347222cqw;
  left: calc(50% - .486111cqw);
  transform: translateX(-50%);
  width: 26.805556cqw;
  margin: 0;
  font: 400 1.944444cqw / 2.222222cqw Arimo, Arial, sans-serif;
  color: #000;
  text-align: center;
}
.how .pill {
  position: absolute;
  left: 43.263889%;
  top: 76.521739%;
  width: 14.722222%;
  height: 5.543478%;
  min-width: 0;
  margin: 0;
  padding: 0 .416667cqw 0 0;
  border-radius: 2.5cqw;
  background: #131313;
  font: 700 1.666667cqw / normal Arimo, Arial, sans-serif;
}
.how .pill:hover { background: var(--pink); }

@font-face {
  font-family: DotGothic16;
  src: url('assets/fonts/DotGothic16-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Desktop geometry follows the 1440 px Figma canvas. */
.work {
  --pink: #ff009d;
  container-type: inline-size;
  aspect-ratio: auto;
  padding: 3.472222cqw 0 0;
  isolation: isolate;
}
.work::before, .work::after { content: none; }
.work__stars { pointer-events: none; }
.work__star { position: absolute; width: 8.263889%; height: auto; }
.work__star--one { left: 78.888889%; top: 23.722492%; }
.work__star--two { left: 2.152778%; top: 51.174935%; }
.work__star--three { left: 83.055556%; top: 81.49944%; }
.work__decoration { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.work__sigil { position: absolute; width: 36.597222%; height: auto; max-width: none; opacity: .35; }
.work__sigil--one { left: .555556%; top: 1.865722%; }
.work__sigil--two { left: 65.486111%; top: 30.063409%; }
.work__sigil--three { left: -.489583%; top: 52.814621%; transform: rotate(180deg); }
.work__sigil--four { left: 65.463021%; top: 72.753264%; transform: rotate(180.11deg); opacity: .21; }
.project {
  position: relative;
  left: auto;
  width: 46.527778%;
  max-width: none;
  margin: 0 auto 5.208333cqw;
}
.project h3 {
  width: 100%;
  margin: 0 0 2.708333cqw;
  font: 400 2.083333cqw / normal 'Pixelify Sans', monospace;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.project__videos {
  position: static;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4.861111cqw;
}
.project__videos--single {width:20.833333cqw;grid-template-columns:minmax(0,1fr);margin:0 auto;}
#project-innocentexas {position:relative;top:-1.25cqw;}
.project-pair {width:46.527778%;margin:0 auto 5.208333cqw;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4.861111cqw;}
.project-pair__heading {grid-column:1 / -1;margin:0 0 2.708333cqw;font:400 2.083333cqw / normal 'Pixelify Sans',monospace;color:var(--pink);text-transform:uppercase;letter-spacing:0;text-align:center;white-space:nowrap;}
.project-pair .project {position:static;width:100%;margin:0;}
.project-pair .project > h3 {display:none;}
.project-pair .project__videos--single {width:100%;}
.video-card video {
  width: 100%;
  aspect-ratio: 300 / 550;
  border: 1px solid #202020;
  border-radius: 1.041667cqw;
  box-shadow: none;
  background: #f1f1f1;
}
.video-card figcaption { display: none; }

.contact {
  --lime: #c1ff72;
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1440 / 808;
  padding: 0;
  background: #fff;
  color: #202020;
  font-family: Arimo, Arial, sans-serif;
}
.contact__sigil {
  position: absolute;
  left: 6.666667%;
  top: 9.653465%;
  width: 36.597222%;
  height: 64.786262%;
  overflow: hidden;
  opacity: .36;
  z-index: -1;
  pointer-events: none;
}
.contact__sigil img { width: 100%; height: 125.89%; max-width: none; }
.contact__photo {
  position: absolute;
  left: 26.736111%;
  top: 19.430693%;
  width: 47.569444%;
  height: 53.712871%;
  object-fit: cover;
}
.contact__heading, .contact h2 {
  position: absolute;
  width: 22.847222%;
  height: 12.871287%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font: 400 3.472222cqw / normal Arimo, Arial, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.contact__heading { left: 38.541667%; top: 5.445545%; color: #070806; }
.contact h2 {
  left: 11.736111%;
  top: 35.148515%;
  font-weight: 700;
  color: var(--lime);
  -webkit-text-stroke: .138889cqw #000;
  paint-order: stroke fill;
}
.contact__to-me {
  position: absolute;
  left: 68.958333%;
  top: 43.688119%;
  width: 10.694444%;
  height: 15.222772%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre;
  color: var(--lime);
  font: 400 3.333333cqw / normal Dotum, Arial, sans-serif;
  -webkit-text-stroke: .138889cqw #000;
  paint-order: stroke fill;
}
.contact__to-me-pixel { font-family: DotGothic16, monospace; }
.contact__links { position: absolute; inset: 0; border: 0; }
.contact__links a {
  position: absolute;
  top: 82.178218%;
  display: flex;
  align-items: baseline;
  gap: .972222cqw;
  padding: 0;
  border: 0;
  text-decoration: none;
  font: 700 1.527778cqw / normal Arimo, Arial, sans-serif;
  white-space: nowrap;
}
.contact__links a:nth-child(1) { left: 13.090278%; }
.contact__links a:nth-child(2) { left: 44.270833%; }
.contact__links a:nth-child(3) { left: 72.395833%; }
.contact__links a span:first-child, .contact__links a strong {
  font: inherit;
  word-break: normal;
}
.contact__stars { pointer-events: none; }
.contact__stars img { position: absolute; width: 5.208333%; height: 6.188119%; }
.contact__stars img:nth-child(1) { left: 6.666667%; top: 79.70297%; }
.contact__stars img:nth-child(2) { left: 36.805556%; top: 79.70297%; }
.contact__stars img:nth-child(3) { left: 64.930556%; top: 79.084158%; }
.contact__stars img:nth-child(4) { left: 89.930556%; top: 78.465347%; }

@media(max-width:800px) {
  .how { aspect-ratio: auto; min-height: 690px; }
  .how h2 { left: 5%; top: 70px; width: 90%; font-size: clamp(38px,8vw,64px); -webkit-text-stroke: 3px #202020; }
  .how__note { left: 50%; top: 200px; transform: translateX(-50%); width: min(436px,calc(100% - 40px)); height: 335px; border-radius: 28px; }
  .how__note h3 { height: 56px; border-radius: 30px; padding-right: 6px; font-size: clamp(28px,8vw,40px); line-height: 54px; }
  .how__note p { left: calc(50% - 4px); top: 76px; width: calc(100% - 34px); font-size: 20px; line-height: 24px; }
  .how .pill { top: auto; bottom: 65px; left: 50%; transform: translateX(-50%); width: 160px; height: 42px; padding-right: 6px; border-radius: 30px; font-size: 18px; }
  .how .pill:hover { transform: translate(-50%,-3px); }
  .work { aspect-ratio: auto; padding: 50px 20px 0; }
  .work__star { width: 50px; }
  .work__star--one, .work__star--three { left: auto; right: 0; }
  .work__star--two { left: 0; }
  .work__sigil { width: 60%; height: auto; }
  .work__sigil--one { top: 60px; left: -15%; }
  .work__sigil--two { top: 27%; left: 65%; }
  .work__sigil--three { top: 51%; left: -15%; }
  .work__sigil--four { top: 75%; left: 65%; }
  .project { position: relative; left: auto; top: auto !important; width: 100%; margin: 0 auto 70px; }
  .project h3 { font-size: clamp(15px,3.8vw,26px); white-space: normal; line-height: 1.3; margin-bottom: 30px; }
  .project__videos { position: static; gap: 20px; }
  .video-card video { border-radius: 10px; }
  .project:nth-of-type(4)::before { content: none; }
  .contact { aspect-ratio: auto; min-height: 680px; padding: 0; }
  .contact__heading { left: 0; top: 0; width: 100%; height: 70px; font-size: 30px; }
  .contact__sigil { top: 70px; left: -15%; width: 75%; height: 330px; }
  .contact__photo { left: 14%; top: 100px; width: 75%; height: 260px; }
  .contact h2 { left: 5%; top: 125px; width: auto; height: 70px; font-size: clamp(27px,6.8vw,42px); -webkit-text-stroke: 2px #000; }
  .contact__to-me { left: 69%; top: 280px; width: 28%; height: 65px; font-size: 30px; -webkit-text-stroke: 2px #000; }
  .contact__links { top: 405px; bottom: auto; left: 12%; right: 5%; display: grid; gap: 24px; }
  .contact__links a { position: relative; left: auto !important; top: auto; font-size: 17px; gap: 9px; }
  .contact__stars img { left: 4% !important; width: 36px; height: 24px; }
  .contact__stars img:nth-child(1) { top: 402px; }
  .contact__stars img:nth-child(2) { top: 446px; }
  .contact__stars img:nth-child(3) { top: 490px; }
  .contact__stars img:nth-child(4) { display: none; }
}