@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("/assets/fonts/roboto-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #000;
  --heading: #2e1c20;
  --paper: #dfdbd4;
  --white: #fff;
  --gutter: 4vw;
  --content: 92vw;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  line-height: 24px;
}
img { display: block; width: 100%; }
a { color: inherit; }
a:hover { opacity: .62; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; padding: .6rem .8rem; background: #fff; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 29px;
  width: 100%;
  height: 87.16px;
  padding: 0 var(--gutter);
  background: transparent;
}
.site-title {
  color: var(--heading);
  font-family: "Roboto Mono", monospace;
  font-size: 24.64px;
  line-height: 29.568px;
  text-decoration: none;
}
.site-nav {
  font-size: 16px;
  line-height: 24px;
  text-underline-offset: 3px;
}

main { min-height: 60vh; }

/* Home */
.hero {
  position: relative;
  height: calc(100vh + 87.16px);
  padding-top: 87.16px;
  overflow: hidden;
  background: var(--paper);
}
.hero-slides { position: relative; height: 100vh; overflow: hidden; }
.hero-slides img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero-slides img:first-child { opacity: 1; }
.hero-copy { display: none; }
.home-intro {
  position: relative;
  min-height: 680.25px;
}
.home-intro h1 {
  position: absolute;
  top: 105.1px;
  left: 8vw;
  width: 52.22vw;
  margin: 0;
  font-family: "Roboto Mono", monospace;
  font-size: 36.736px;
  font-weight: 400;
  line-height: 41.967px;
}
.home-intro a {
  position: absolute;
  top: 142.1px;
  left: 68.04vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 243.3px;
  height: 63px;
  border-radius: 32px;
  background: var(--heading);
  color: #fff;
  font-family: "PT Serif", Georgia, serif;
  font-size: 16px;
  text-decoration: none;
}

/* Shared carousel controls */
.carousel-button {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 60px;
  height: 60px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: #000;
  cursor: pointer;
  font: 0/0 a;
}
.carousel-button::before {
  content: "";
  position: absolute;
  top: 22px;
  width: 15px;
  height: 15px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.carousel-button--previous { left: 5vw; }
.carousel-button--next { right: 5vw; }
.carousel-button--previous::before { left: 24px; transform: rotate(-135deg); }
.carousel-button--next::before { right: 24px; transform: rotate(45deg); }
.hero .carousel-button--previous { left: 3vw; }
.hero .carousel-button--next { right: 3vw; }
.hero .carousel-button { top: calc(50% + 43.58px); background: #62595a; color: #fff; }

/* Projects index */
.portfolio-index {
  display: flex;
  gap: 30px;
  min-height: 1100.2px;
  padding: 231.2px var(--gutter) 0;
}
.portfolio-card {
  width: 421.6px;
  height: fit-content;
  color: var(--heading);
  text-decoration: none;
}
.portfolio-card img { width: 421.6px; height: 421.6px; object-fit: cover; }
.portfolio-card h1 {
  margin: 20px 0 0;
  font-family: "Roboto Mono", monospace;
  font-size: 26.368px;
  font-weight: 400;
  line-height: 31.642px;
}

/* Project pages */
.project { width: 100%; }
.project-section { padding-right: var(--gutter); padding-left: var(--gutter); }
.project-intro {
  display: grid;
  grid-template-columns: repeat(2, 45.38%);
  column-gap: 4.63vw;
  align-content: start;
  height: 858.3px;
  padding-top: 188.1px;
}
.project-intro img { height: 450.8px; object-fit: contain; }
.project-intro p {
  grid-column: 1 / -1;
  width: 75%;
  margin: 16.9px auto 0;
  text-align: center;
}

.card-carousel {
  position: relative;
  height: 772.1px;
  padding-top: 144px;
  overflow: hidden;
}
.card-carousel__viewport { width: var(--content); margin: 0 auto; overflow: hidden; }
.card-carousel__track {
  display: flex;
  gap: 20px;
  transform: translateX(0);
  will-change: transform;
}
.card-carousel__slide {
  flex: 0 0 calc((100% - 80px) / 3);
  min-width: 0;
  margin: 0;
}
.card-carousel__slide img { aspect-ratio: 1; object-fit: cover; }
.card-carousel__slide figcaption {
  width: 75%;
  margin-top: 24px;
  color: #000;
  font-family: "Roboto Mono", monospace;
  font-size: 19.456px;
  line-height: 21.666px;
}
.card-carousel .carousel-button { top: 50%; }

.prosthetics-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 33.1px;
  row-gap: 0;
  align-content: start;
  height: 881.6px;
  padding-top: 57.6px;
}
.prosthetics-gallery figure { height: 399.8px; margin: 0; }
.prosthetics-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.prosthetics-gallery figcaption,
.prosthetics-flat-gallery figcaption {
  min-height: 51px;
  padding-top: 3px;
  color: #000;
  font-size: 16px;
  line-height: 24px;
}
.prosthetics-feature {
  position: relative;
  height: 771.1px;
}
.prosthetics-feature .brow {
  position: absolute;
  top: 134.5px;
  left: 5.5vw;
  width: 34.9vw;
  height: 541.6px;
  object-fit: contain;
}
.prosthetics-feature .probondo {
  position: absolute;
  top: 100px;
  left: 46.5vw;
  width: 49.5vw;
  height: 452.7px;
  object-fit: contain;
}
.prosthetics-feature .probondo-caption {
  position: absolute;
  top: 568.7px;
  left: 46.5vw;
  width: 22.4vw;
  margin: 0;
}
.prosthetics-feature .brow-caption {
  position: absolute;
  top: 568.7px;
  left: 73.6vw;
  width: 22.4vw;
  margin: 0;
}
.prosthetics-flat-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75vw;
  height: 506.8px;
  padding-top: 57.6px;
}
.prosthetics-flat-gallery figure { margin: 0; }
.prosthetics-flat-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.alien-feature {
  display: grid;
  grid-template-columns: 2.58fr 1fr 2.58fr;
  gap: .75vw;
  align-items: start;
  height: 850px;
  padding-top: 152px;
}
.alien-feature img { height: 546px; object-fit: contain; }
.alien-feature p { margin: 22px 0 0; }

.sculpture-intro {
  position: relative;
  height: 779.3px;
  padding-top: 182px;
}
.sculpture-intro img { position: absolute; height: 423px; object-fit: contain; }
.sculpture-intro img:nth-child(1) { left: 4.57vw; width: 25.16vw; }
.sculpture-intro img:nth-child(2) { left: 31.05vw; width: 26.3vw; }
.sculpture-intro img:nth-child(3) { left: 58.1vw; width: 37.9vw; }
.sculpture-intro p { position: absolute; top: 621px; left: 31.05vw; width: 45vw; margin: 0; }
.sculpture-carousel { height: 786.4px; padding-top: 144px; }
.sculpture-strip {
  position: relative;
  height: 1363.1px;
  padding: 0 var(--gutter);
}
.sculpture-strip figure { position: absolute; margin: 0; }
.sculpture-strip img { height: 432px; object-fit: fill; }
.sculpture-strip figcaption { padding-top: 3px; color: #000; }
.sculpture-strip figure:nth-child(1) { top: 0; left: 4vw; width: 18.4vw; }
.sculpture-strip figure:nth-child(2) { top: 0; left: 23.16vw; width: 27.22vw; }
.sculpture-strip figure:nth-child(3) { top: 0; left: 51.17vw; width: 45vw; }
.sculpture-strip figure:nth-child(4) { top: 536px; left: 4vw; width: 50.76vw; }
.sculpture-strip figure:nth-child(5) { top: 536px; left: 55.49vw; width: 40.56vw; }
.sculpture-strip figure:nth-child(4) img,
.sculpture-strip figure:nth-child(5) img { height: 584px; }
.paintings {
  position: relative;
  height: 1070.8px;
  padding-top: 0;
}
.paintings h2 {
  margin: 0 auto 17px;
  width: 490px;
  font-family: "Roboto Mono", monospace;
  font-size: 26.368px;
  font-weight: 400;
  line-height: 30.882px;
  text-align: center;
}
.paintings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.8vw; padding: 0 5.5vw; }
.paintings figure { margin: 0; }
.paintings img { height: 817.8px; object-fit: contain; }

.project-pagination {
  display: flex;
  align-items: center;
  height: 123.1px;
  padding: 0 var(--gutter);
  background: var(--paper);
}
.project-pagination a { text-decoration: none; }
.project-pagination a span { display: block; }
.project-pagination--next { justify-content: flex-end; text-align: right; }

.site-footer {
  display: grid;
  place-content: start center;
  height: 334.3px;
  padding-top: 59.8px;
  text-align: center;
}
.site-footer h2 {
  margin: 0 0 32px;
  color: var(--heading);
  font-family: "Roboto Mono", monospace;
  font-size: 36.736px;
  font-weight: 400;
  line-height: 41.967px;
}
.site-footer p {
  margin: 0;
  color: var(--heading);
  font-family: "Roboto Mono", monospace;
  font-size: 26.368px;
  line-height: 30.882px;
}
.site-footer a { text-decoration: none; }

@media (max-width: 760px) {
  :root { --gutter: 6.4vw; --content: 87.2vw; }
  .site-header { gap: 18px; height: 76px; }
  .site-title { font-size: 19px; line-height: 23px; }
  .site-nav { font-size: 14px; }
  .hero { height: calc(100vh + 76px); padding-top: 76px; }
  .hero-slides { height: 100vh; }
  .home-intro { min-height: 520px; padding: 64px var(--gutter); }
  .home-intro h1 { position: static; width: 100%; font-size: 27px; line-height: 32px; }
  .home-intro a { position: static; margin-top: 34px; }
  .portfolio-index { display: grid; grid-template-columns: 1fr; gap: 60px; min-height: auto; padding-top: 130px; padding-bottom: 90px; }
  .portfolio-card { width: 100%; }
  .portfolio-card img { width: 100%; height: auto; aspect-ratio: 1; }
  .portfolio-card h1 { font-size: 28px; line-height: 34px; }
  .project-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    height: auto;
    padding-top: 112px;
    padding-bottom: 70px;
  }
  .project-intro img { height: auto; max-height: 70vh; }
  .project-intro p { grid-column: auto; width: 100%; margin-top: 18px; text-align: left; }
  .card-carousel { height: auto; padding: 65px 0 90px; }
  .card-carousel__slide { flex-basis: 100%; }
  .card-carousel__slide figcaption { width: 90%; }
  .carousel-button { width: 48px; height: 48px; }
  .carousel-button::before { top: 17px; }
  .carousel-button--previous::before { left: 20px; }
  .carousel-button--next::before { right: 20px; }
  .prosthetics-gallery, .prosthetics-flat-gallery {
    grid-template-columns: 1fr;
    height: auto;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .prosthetics-gallery figure { height: auto; }
  .prosthetics-feature, .alien-feature, .sculpture-intro, .sculpture-strip, .paintings {
    display: grid;
    height: auto;
    gap: 28px;
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .prosthetics-feature > *, .sculpture-intro > *, .sculpture-strip figure {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .prosthetics-feature .brow-caption { grid-row: 2; }
  .prosthetics-feature .probondo { grid-row: 3; }
  .prosthetics-feature .probondo-caption { grid-row: 4; }
  .alien-feature { grid-template-columns: 1fr; }
  .alien-feature img { height: auto; }
  .alien-feature p { margin: 0; }
  .sculpture-intro img { max-height: 70vh; }
  .sculpture-strip img, .sculpture-strip figure:nth-child(4) img,
  .sculpture-strip figure:nth-child(5) img { height: auto; }
  .paintings h2 { width: 100%; }
  .paintings-grid { grid-template-columns: 1fr; padding: 0; }
  .paintings img { height: auto; }
  .site-footer { height: 300px; padding: 54px var(--gutter) 0; }
  .site-footer h2 { font-size: 27px; line-height: 33px; }
  .site-footer p { font-size: 18px; line-height: 26px; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}