@font-face {
  font-family: "Kalice-Trial";
  src: url("../fonts/Kalice-Trial-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kalice-Trial";
  src: url("../fonts/Kalice-Trial-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
* { box-sizing: border-box; }
::selection { background: #000; color: #fff; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: clip; }
body {
  background: #fff;
  color: #000;
  font-family: "Kalice-Trial", "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Intro and works navigation */
.sidebar {
  position: fixed;
  z-index: 3;
  top: 60px;
  left: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 420px;
  width: 289px;
  height: 894px;
}
.sidebar-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 193px;
  width: 289px;
  height: 457px;
}
.sidebar-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 189px;
  height: 114px;
}
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 189px;
  height: 57px;
}
.intro p, .works-label, .sidebar-clock { margin: 0; }
.intro-name, .intro-tagline {
  width: 189px;
  min-height: 17px;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}
.intro-name { height: 17px; color: #000; }
.intro-tagline { height: 34px; color: rgb(0 0 0 / 50%); font-style: italic; white-space: nowrap; }
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 189px;
  height: 17px;
  white-space: nowrap;
}
.nav a {
  position: relative;
  display: block;
  flex: none;
  height: 17px;
  color: #000;
  line-height: 17px;
  text-decoration: none;
}
.nav a:nth-of-type(1) { width: 45px; }
.nav a:nth-of-type(2) { width: 33px; }
.nav a:nth-of-type(3) { width: 51px; }
.nav a:hover, .nav a:focus-visible { color: rgb(0 0 0 / 50%); }
.nav a > span { position: relative; }
.nav a[data-copy-email] > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 17px;
}
.email-word, .email-check {
  position: absolute;
  transition: opacity 240ms ease-in-out;
}
.email-word { opacity: 1; }
.email-check {
  opacity: 0;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
}
.email-link-label.is-checkmark .email-word { opacity: 0; }
.email-link-label.is-checkmark .email-check { opacity: 1; }
.email-link-label.is-checkmark::after { display: none; }
.nav a > span::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 0.8px;
  background: currentColor;
  content: "";
}
.nav-separator { flex: none; width: 7px; line-height: 17px; text-align: center; }
.works-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 289px;
  height: 150px;
}
.works-label {
  width: 289px;
  height: 17px;
  color: rgb(0 0 0 / 50%);
  font-style: italic;
  line-height: 17px;
}
.project-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 289px;
  height: auto;
}
.project-link {
  display: block;
  width: 289px;
  height: 17px;
  color: #000;
  line-height: 17px;
  text-decoration: none;
  transition: color 180ms ease;
}
.project-link:hover, .project-link:focus-visible { color: rgb(0 0 0 / 50%); }
.project-link-title { display: block; }
.project-divider {
  display: block;
  width: 289px;
  height: 0;
  border-top: 0.8px solid rgb(128 128 128 / 20%);
}
.sidebar-clock {
  position: fixed;
  bottom: 40px;
  left: 30px;
  display: flex;
  align-items: flex-end;
  width: 289px;
  height: 17px;
  color: rgb(0 0 0 / 50%);
  font-style: italic;
  line-height: 17px;
}

/* Selected work */
.work {
  position: relative;
  z-index: 2;
  width: 1095.19px;
  margin-left: 387px;
  padding: 37px 0 40px;
}
.state-farm-showcase {
  position: relative;
  display: block;
  width: 1095.19px;
  height: 1650px;
}
.showcase-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 1095.19px;
  height: 282px;
  margin-bottom: 22px;
  overflow: hidden;
  background: #d9d9d9;
}
.showcase-panel-top {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 1095.19px;
  height: 282px;
  max-width: none;
  background: #d9d9d9;
  box-shadow: 0 0.4px 1.8px rgb(0 0 0 / 50%);
  image-rendering: pixelated;
}
.project-case-stack {
  position: absolute;
  top: 312px;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 1095.19px;
  height: 1254px;
}
.pencil-decoration {
  position: fixed;
  z-index: 3;
  right: 30px;
  bottom: 40px;
  display: block;
  width: 161px;
  height: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.pencil-decoration.is-at-page-bottom {
  opacity: 1;
  visibility: visible;
}
.case-column {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 543.5px;
}
.case-column-left { height: 1254px; }
.case-column-right { height: 878px; }
.ohm-card, .showcase-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 543.5px;
  height: 435px;
  padding: 6px 6px 14px;
  overflow: hidden;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color 550ms cubic-bezier(.22, 1, .36, 1);
}
.ohm-card:hover, .ohm-card.is-nav-hovered,
.showcase-details:hover, .showcase-details.is-nav-hovered {
  background: #f4f4f4;
}
.ohm-card-content {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 531.5px;
}
.ohm-card-cover-frame, .project-placeholder-cover, .showcase-panel-bottom {
  display: block;
  flex: none;
  width: 531.5px;
  height: 367px;
  overflow: hidden;
  background: #d9d9d9;
  object-fit: cover;
  transition: filter 550ms cubic-bezier(.22, 1, .36, 1);
}
.ohm-card-cover-frame { height: 129px; }
.ohm-card-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: exclusion;
}
#distant-robots .project-placeholder-cover { height: 129px; }
#distant-robots .project-placeholder-cover { background-color: #FFD64F; }
.daybreak-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 531.5px;
  height: 367px;
  overflow: hidden;
  background: #e8eee1;
}
.daybreak-cover video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ohm-card-caption, .showcase-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  width: 500px;
  min-width: 0;
  height: 34px;
  overflow: hidden;
  font-size: 12px;
  line-height: 17px;
}
.ohm-card-description, .showcase-description {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 380px;
  min-width: 0;
  overflow: hidden;
}
.ohm-card-title, .showcase-title { flex: none; color: #000; }
.ohm-card-summary, .showcase-summary {
  min-width: 0;
  color: rgb(0 0 0 / 50%);
}
.ohm-card-meta, .showcase-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: #808080;
  white-space: nowrap;
}
.showcase-details { height: 435px; }
.showcase-caption { flex: none; }
.showcase-details .showcase-panel-bottom { width: 531.5px; height: 367px; }
#one-hundred-miles { height: 180px; }
#daybreak-ai { height: 435px; }
#distant-robots { height: 197px; }
#amazon-music { height: 418px; }
#one-hundred-miles .ohm-card-caption { height: 17px; }
#one-hundred-miles .ohm-card-description { width: 380px; height: 17px; flex: 0 0 380px; }
#one-hundred-miles .ohm-card-title { width: 116px; }
#one-hundred-miles .ohm-card-summary { width: 250px; white-space: nowrap; }
#one-hundred-miles .ohm-card-meta { width: 116px; justify-content: flex-start; }
#distant-robots .ohm-card-caption { height: 34px; }
#distant-robots .ohm-card-description { width: 361px; height: 34px; flex: 0 0 361px; }
#distant-robots .ohm-card-title { width: 97px; }
#distant-robots .ohm-card-summary { width: 250px; }
#distant-robots .ohm-card-meta { width: 92px; }
#daybreak-ai .ohm-card-caption { height: 34px; }
#daybreak-ai .ohm-card-description { width: 342px; height: 34px; flex: 0 0 342px; }
#daybreak-ai .ohm-card-title { width: 78px; }
#daybreak-ai .ohm-card-summary { width: 250px; }
#daybreak-ai .ohm-card-meta { width: auto; }
.showcase-details .showcase-description { width: 331px; height: 34px; flex: 0 0 331px; }
.showcase-details .showcase-title { width: 67px; }
.showcase-details .showcase-summary { width: 250px; height: 34px; }
.showcase-details .showcase-meta { width: 126px; }
#amazon-music .showcase-caption { height: 17px; }
#amazon-music .showcase-description { width: 354px; height: 17px; flex: 0 0 354px; }
#amazon-music .showcase-title { width: 90px; }
#amazon-music .showcase-summary { width: 250px; height: 17px; white-space: nowrap; }
#amazon-music .showcase-meta { width: 129px; }
#detox-box .showcase-description { width: 329px; flex: 0 0 329px; }
#detox-box .showcase-title { width: 65px; }
#detox-box .showcase-summary { width: 250px; }
#detox-box .showcase-meta { width: 117px; }
#one-hundred-miles, #distant-robots { animation: page-content-fade-in 1100ms cubic-bezier(.65, 0, .35, 1) both; }

/* Custom pointer and its animated pixel trail */
.cursor-particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 9997;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.circle-cursor {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 180ms ease, height 180ms ease, opacity 140ms ease, border-radius 180ms ease;
}
.circle-cursor.is-visible { opacity: 1; }
.circle-cursor.is-labeled {
  width: var(--cursor-label-width, 68px);
  height: 20px;
  padding: 5px 6px;
  border-radius: 0;
  background: #000;
}
.circle-cursor-label {
  color: #fff;
  font-family: "Kalice-Trial", "Times New Roman", serif;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
@media (pointer: fine) {
  body, body a, body button { cursor: none; }
}
#amazon-music .showcase-panel-bottom { height: 367px; }
#amazon-music .amazon-music-cover { object-fit: cover; }
#detox-box .detox-box-cover { position: relative; }
#detox-box .detox-cover-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
#detox-box .detox-cover-video { position: absolute; top: 20px; left: 3px; display: block; width: 100%; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; object-position: center top; }
#amazon-music .showcase-title { width: 90px; }
#amazon-music .showcase-meta { width: 129px; }
#one-hundred-miles .ohm-card-cover-frame,
#distant-robots .project-placeholder-cover { height: 129px; }

/* Page reveal and loader animations */
.page-content-reveal {
  opacity: 0;
  animation: page-content-fade-in 1100ms cubic-bezier(.65, 0, .35, 1) both;
}
.sidebar-heading { animation-delay: 0ms; }
.works-nav { animation-delay: 280ms; }
.sidebar-clock { animation-delay: 560ms; }
.showcase-hero { animation-delay: 0ms; }
#one-hundred-miles, #state-farm { animation-delay: 280ms; }
#distant-robots, #detox-box { animation-delay: 560ms; }
#amazon-music { animation-delay: 840ms; }
@keyframes page-content-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.portfolio-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  color: #171717;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
}
.portfolio-loader.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-signature, .loader-welcome {
  position: absolute;
  z-index: 2;
  color: #111;
  font-size: 12px;
  opacity: 0;
  animation: loader-label-in 800ms ease forwards;
}
.loader-signature { top: 50%; left: 60px; transform: translateY(-50%); animation-delay: 200ms; }
.loader-welcome { top: 50%; right: 60px; transform: translateY(-50%); text-align: right; animation: none; }
.portfolio-loader.is-welcome-visible .loader-welcome { animation: loader-label-in 800ms ease forwards; }
.portfolio-loader .loader-phrase, .portfolio-loader .loader-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #111;
  font-size: clamp(42px, 5.2vw, 76px);
  text-align: center;
}
.portfolio-loader .loader-phrase { opacity: 0; }
.portfolio-loader .loader-phrase.is-active { opacity: 1; }
@keyframes loader-label-in { to { opacity: 1; } }
@media (max-width: 1135px) {
  .sidebar { position: relative; top: auto; left: auto; width: auto; height: auto; gap: 56px; padding: 32px 24px 0; }
  .sidebar-main { gap: 56px; width: 100%; height: auto; }
  .sidebar-heading { width: 189px; }
  .works-nav, .works-label, .project-list, .project-link, .project-divider, .sidebar-clock { width: 100%; }
  .sidebar-clock { position: static; bottom: auto; left: auto; padding-bottom: 28px; }
  .work { width: auto; margin: 0; padding: 0 24px 40px; }
  .state-farm-showcase { width: 100%; height: auto; padding-bottom: 54px; }
  .showcase-hero { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: 100%; margin: 0 0 22px; }
  .project-case-stack { position: relative; top: auto; left: auto; width: 100%; height: auto; }
  .pencil-decoration { position: fixed; top: auto; right: 24px; bottom: 40px; margin: 0; }
  .case-column { width: calc((100% - 8px) / 2); height: auto; }
  #one-hundred-miles, #state-farm, #distant-robots, #detox-box, #amazon-music, #daybreak-ai { position: relative; width: 100%; }
  .ohm-card, .showcase-details { width: 100%; min-width: 0; }
  .ohm-card-content, .ohm-card-cover-frame, .project-placeholder-cover, .daybreak-cover, .showcase-panel-bottom { width: 100%; }
  .ohm-card-caption, .showcase-caption { width: 100%; }
  #daybreak-ai .ohm-card-caption { height: auto; min-height: 34px; flex-wrap: wrap; overflow: visible; row-gap: 0; }
  #daybreak-ai .ohm-card-description { width: 100%; height: auto; min-height: 17px; flex: 1 1 100%; }
  #daybreak-ai .ohm-card-title { width: auto; }
  #daybreak-ai .ohm-card-summary { width: auto; flex: 1 1 180px; }
  #daybreak-ai .ohm-card-meta { width: auto; }
}
@media (max-width: 700px) {
  .state-farm-showcase { display: block; height: auto; }
  .showcase-hero { position: relative; top: auto; left: auto; flex: none; height: 220px; margin: 0 0 8px; }
  .project-case-stack { flex-direction: column; gap: 8px; }
  .case-column { width: 100%; }
  .showcase-panel-top { width: 100%; height: 220px; }
  .ohm-card, .showcase-details { position: relative; top: auto; left: auto; min-height: 180px; }
  #one-hundred-miles, #distant-robots, #amazon-music { height: auto; min-height: 180px; }
  #daybreak-ai { height: 435px; }
  .showcase-panel-bottom, .showcase-details .showcase-panel-bottom { height: 129px; }
  .ohm-card-caption, .showcase-caption { gap: 8px; }
  .ohm-card-description, .showcase-description { gap: 8px; }
  .loader-signature { left: 24px; }
  .loader-welcome { right: 24px; }
}