@font-face {
  font-family: "Repro";
  src: url("./assets/fonts/Repro-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

:root {
  --background: #001315;
  --outer-background: #000000;
  --text: #646464;
  --accent: var(--background);
  --gutter: clamp(0.75rem, 1vw, 1rem);
  --page-margin: clamp(1rem, 2vw, 2rem);
  --content-padding: clamp(1rem, 1.2vw, 1.25rem);
  --font-sans: "Repro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--outer-background);
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  background: var(--outer-background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: 0.03em;
}

a {
  color: inherit;
  text-decoration: none;
}

a:active,
button:active {
  opacity: 0.7;
}

a:focus-visible,
button:focus-visible,
.slideshow__viewport:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: -2px;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  padding: 0.45rem 0.65rem;
  transform: translateY(-110%);
  background: var(--text);
  color: var(--background);
  font-size: 0.8rem;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  margin: 0 var(--page-margin) var(--page-margin);
  background: var(--accent);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.grid-12 > * { min-width: 0; }
.intro__contact a, .project__meta, .case-copy a { overflow-wrap: anywhere; }

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.intro,
.project__info {
  position: relative;
  z-index: 1;
  padding: var(--content-padding);
  background: var(--background);
}

.intro {
  border-top: 1rem solid var(--outer-background);
}

.intro__contact {
  margin: 0;
  font: inherit;
  font-style: normal;
}

.intro a {
  display: inline;
}

.project {
  position: relative;
  background: var(--accent);
}

.slideshow {
  position: relative;
  border-top: 1rem solid var(--outer-background);
  background: var(--background);
}

.slideshow__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--background);
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.slideshow__slides {
  position: absolute;
  inset: 0;
}

.slideshow--slide .slideshow__slides {
  display: flex;
  transition: none;
  will-change: transform;
}

.slideshow--slide .slideshow__slides.is-animating {
  transition: transform var(--transition-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--background);
}

.slideshow--fade .slideshow__slide {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear var(--transition-duration);
}

.slideshow--fade .slideshow__slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.slideshow--fade .slideshow__slide.is-leaving {
  z-index: 0;
  visibility: visible;
  opacity: 1;
  transition: none;
}

.slideshow--slide .slideshow__slide {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  min-width: 100%;
}
.slideshow--slide .slideshow__slide[data-clone] { visibility: hidden; }
.slideshow--desktop-scroll .slideshow__slide[data-clone] { visibility: visible; }

.slideshow--fade .slideshow__slide[data-clone] { display: none; }
.slideshow--instant .slideshow__slide { transition: none; }
.slideshow__counter {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  z-index: 4;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  background: rgba(0, 19, 21, 0.72);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.slideshow__counter[hidden] { display: none; }
.slideshow__pagination { display: none; }

.slideshow__slide picture { display: block; width: 100%; height: 100%; }
.slideshow__slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-gallery video { display: block; width: 100%; height: auto; }
.slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0%);
  backface-visibility: hidden;
}

.slideshow.is-revealed .slideshow__slide img {
  animation: color-in 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes color-in {
  0% {
    filter: saturate(0%);
  }
  32%,
  100% {
    filter: saturate(100%);
  }
}

.slideshow__slide.has-image-error::after {
  content: "Image unavailable";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--background);
  color: var(--text);
  font-size: 0.8rem;
}

.slideshow__button {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: none;
  width: 4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.slideshow__button--previous {
  left: 0;
}

.slideshow__button--next {
  right: 0;
}

.slideshow__button svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.project__info {
  border-top: 1rem solid var(--outer-background);
}

.project:first-child .project__info {
  border-top: 0;
}

.project__title,
.project__description,
.project__meta,
.project__meta-row,
.project__meta dt,
.project__meta dd {
  margin: 0;
  padding: 0;
  font: inherit;
}

.project__title {
  font-weight: inherit;
}

.project__description p, .project__meta p { margin: 0 0 1em; }
.project__description p:last-child, .project__meta p:last-child { margin-bottom: 0; }
.project__meta a, .case-copy a { text-decoration: none; }
.site-footer { margin-top: 0; }
.image-placeholder { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #001315; border: 1px solid #173133; color: #646464; text-align: center; padding: 1rem; }
.image-placeholder span:last-child { font-size: 0.8rem; }
.slideshow[data-single="true"] .slideshow__viewport { cursor: default !important; }
.slideshow[data-single="true"] .slideshow__button { display: none !important; }
.case-nav { display: flex; justify-content: space-between; gap: 1rem; padding: var(--content-padding); background: var(--background); border-top: 1rem solid black; }
.case-copy p { margin: 0 0 1.2em; }
.case-gallery img { display: block; width: 100%; height: auto; }
.case-gallery .case-gallery__mobile-only { display: none; }
.case-gallery .image-placeholder { aspect-ratio: 16 / 9; }
.case-page--text-only .case-gallery { display: none; }
.project--text-only .project__description { grid-column: span 10; columns: 3; column-gap: 1rem; }
#selected-additional-works .project__description {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.03em;
}
#selected-additional-works,
#selected-additional-works .project__info {
  background: #000;
}
.project--text-only .project__description p { break-inside: avoid; }

.project__meta-row {
  display: flex;
}

.project__meta dt::after {
  content: " —\00a0";
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.noscript-message {
  margin: 0;
  padding: 1rem;
  border-top: 1rem solid var(--outer-background);
  background: var(--background);
}

@media (hover: hover) and (pointer: fine) {
  .slideshow[data-cursor="prev"] .slideshow__viewport {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M40 12 L20 32 L40 52' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='4'/%3E%3Cpath d='M40 12 L20 32 L40 52' fill='none' stroke='%23646464' stroke-width='1.5'/%3E%3C/svg%3E") 32 32, w-resize;
  }

  .slideshow[data-cursor="next"] .slideshow__viewport {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M24 12 L44 32 L24 52' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='4'/%3E%3Cpath d='M24 12 L44 32 L24 52' fill='none' stroke='%23646464' stroke-width='1.5'/%3E%3C/svg%3E") 32 32, e-resize;
  }
}

@media (min-width: 640px) and (max-width: 1199px) {
  .grid-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .intro__identity { grid-column: span 3; }
  .intro__summary { grid-column: span 5; }
  .intro__contact { grid-column: 4 / -1; }
  .project__title { grid-column: span 2; }
  .project__description, .case-copy { grid-column: span 6; }
  .project__meta { grid-column: 3 / -1; font-size: inherit; }
  .case-page .project__info > .span-4 { grid-column: 3 / -1; }
  .project--text-only .project__description { grid-column: span 6; columns: 2; }
}

@media (hover: none), (pointer: coarse) {
  .slideshow[data-mobile-controls="true"] .slideshow__button { display: block; min-width: 44px; }
}

@media (max-width: 639px) {
  .case-gallery .case-gallery__mobile-only { display: block; }
  .slideshow__counter {
    display: none;
  }
  .slideshow__viewport { aspect-ratio: 1 / 1; }
  :root {
    --page-margin: 0rem;
  }

  body {
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.03em;
  }

  .site-shell {
    margin-bottom: 0;
  }

  .grid-12 {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .span-2,
  .span-3,
  .span-4,
  .span-6,
  .span-7 {
    grid-column: 1;
  }

  .intro,
  .project__info {
    padding: 1rem;
    border-top: 0;
  }

  .intro { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .project__info { padding-top: 1.5rem; padding-bottom: 2rem; }
  .slideshow:has(.slideshow__pagination:not([hidden])) + .project__info { padding-top: 0; }
  .project__meta { font-size: inherit; line-height: inherit; }
  .project__title { font-size: inherit; }
  .project--text-only .project__description { grid-column: 1; columns: 1; }
  #selected-additional-works .project__description {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.03em;
  }
  .case-copy { line-height: inherit; }
  .case-nav { border-top: 0; }
  .image-placeholder { gap: 0.5rem; }
  .image-placeholder span:last-child, .skip-link,
  .slideshow__slide.has-image-error::after { font-size: 0.64rem; }

  .slideshow {
    border-top: 0;
  }

  .slideshow[data-mobile-controls="true"] .slideshow__button { display: none; }
  .slideshow__pagination {
    --dot-step: 9px;
    position: relative;
    display: block;
    width: calc(var(--visible-dots, 5) * var(--dot-step));
    height: 23.54px;
    margin: 0 auto;
    overflow: hidden;
  }
  .slideshow__dots-track {
    display: flex;
    height: 100%;
    width: max-content;
    transition: transform 240ms ease;
  }
  .slideshow__pagination[hidden] { display: none; }
  .slideshow__dot {
    display: grid;
    place-items: center;
    flex: 0 0 var(--dot-step);
    width: var(--dot-step);
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .slideshow__dot::before {
    content: '';
    width: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: white;
    transform: scale(var(--dot-scale, 1));
    opacity: 0.4;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .slideshow__dot.is-active::before { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__dots-track, .slideshow__counter { transition: none; }
  .slideshow__dot::before { transition: none; }
  html {
    scroll-behavior: auto;
  }

  .slideshow__slide img,
  .slideshow.is-revealed .slideshow__slide img {
    animation: none;
    filter: none;
  }

  .slideshow--fade .slideshow__slide,
  .slideshow--slide .slideshow__slides.is-animating {
    transition-duration: 0ms;
  }
}