project-index {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  min-height: 100vh;
  font-size: 13px;
  line-height: 19px;
}

project-index section {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
}

project-index .band {
  min-height: 192px;
  box-sizing: border-box;
  box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line);
}

project-index .intro {
  padding: 43px 16px 24px 37px;
}

project-index .intro p {
  margin: 0;
}

project-index .index .band {
  padding: 42px 40px 24px 16px;
  text-align: right;
}

project-index h1 {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  font-weight: 300;
}

project-index h1 a {
  text-decoration: none;
}

project-index .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

:is(project-index, thumbnail-tuner) .cell {
  --rule-right: var(--hair);
  --rule-bottom: var(--hair);
  position: relative;
  display: block;
  aspect-ratio: 331.4 / 191.6;
  overflow: hidden;
  container-type: inline-size;
}

:is(project-index, thumbnail-tuner) .cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset calc(-1 * var(--rule-right)) calc(-1 * var(--rule-bottom)) 0 var(--line);
  pointer-events: none;
}

project-index .cell:nth-child(even) {
  --rule-right: 0px;
}

@media (min-width: 720px) {
  project-index .cell:last-child,
  project-index .cell:nth-last-child(2):nth-child(odd) {
    --rule-bottom: 0px;
  }
}

:is(project-index, thumbnail-tuner) .cell:focus-visible {
  outline: none;
}

:is(project-index, thumbnail-tuner) .cell:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  outline: 2px solid var(--line);
  outline-offset: -2px;
  pointer-events: none;
}

:is(project-index, thumbnail-tuner) .box {
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: var(--a, 1.5);
  translate: var(--dx, 0) var(--dy, 0);
}

:is(project-index, thumbnail-tuner) .polaroid .box,
:is(project-index, thumbnail-tuner) .polaroid-tall .box {
  box-sizing: content-box;
  border: 6px solid var(--frame);
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.28);
}

:is(project-index, thumbnail-tuner) .polaroid .box {
  width: min(80.18cqw - 12px, (47.0732cqw - 12px) * var(--a, 1.5));
}

:is(project-index, thumbnail-tuner) .polaroid-tall .box {
  width: min(49.28cqw - 12px, (49.276cqw - 12px) * var(--a, 1.5));
}

:is(project-index, thumbnail-tuner) .fill .box {
  width: min(100cqw, 57.8153cqw * var(--a, 1.5));
}

:is(project-index, thumbnail-tuner) .small .box {
  width: min(96cqw, 55.5027cqw * var(--a, 1.5));
}

:is(project-index, thumbnail-tuner) .cell.pair {
  display: flex;
  align-items: center;
  justify-content: center;
}

:is(project-index, thumbnail-tuner) .pair .box {
  position: relative;
  inset: auto;
  margin: 0;
  flex: none;
  height: min(57.8153cqw, 100cqw / (var(--a, 1.5) + var(--b, 1.5)));
}

:is(project-index, thumbnail-tuner) .pair .b {
  aspect-ratio: var(--b, 1.5);
}

:is(project-index, thumbnail-tuner) .swap {
  position: absolute;
  inset: 0;
  display: block;
  width: 94%;
  height: 86%;
  margin: auto;
  visibility: hidden;
}

:is(project-index, thumbnail-tuner) .swap img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

@media (hover: hover) {
  project-index .cell.swapped .box {
    visibility: hidden;
  }

  project-index .cell.swapped .swap {
    visibility: visible;
  }
}

:is(project-index, thumbnail-tuner) .box img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

project-index .rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

project-index .row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-height: 38px;
  box-sizing: border-box;
  padding: 9px 16px 9px clamp(16px, 3.1vw, 41px);
  box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line);
}

project-index .marker {
  position: absolute;
  left: 121px;
  top: 10px;
  fill: var(--line);
}

project-index .years {
  flex: 0 0 137px;
}

project-index .what {
  flex: 1 1 200px;
  min-width: 0;
}

project-index .bullet {
  display: inline-block;
  width: 15px;
}

project-index .title {
  text-decoration: none;
}

project-index .tags {
  display: inline-block;
  transform: skewX(-6deg);
  margin-left: 14px;
  color: var(--tag);
}

project-index .tag {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

project-index .tag.on {
  color: var(--text);
}

project-index .tag:hover {
  color: var(--hover);
}

project-index .track {
  display: none;
}

@media (max-width: 719.98px) {
  project-index section {
    flex-basis: 100%;
  }
}

@media (min-width: 720px) {
  project-index {
    height: 100vh;
    min-height: 0;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  project-index section {
    display: flex;
    flex-direction: column;
    height: 100vh;
    timeline-scope: --column;
  }

  project-index .index {
    box-shadow: inset var(--hair) 0 0 var(--line);
  }

  project-index .band {
    flex: none;
  }

  project-index :is(.scroll, .rows) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-timeline: --column y;
  }

  project-index .track {
    position: absolute;
    top: 192px;
    bottom: 0;
    z-index: 2;
    width: 8px;
    pointer-events: none;
  }

  project-index .images .track {
    right: calc(-4px - var(--hair) / 2);
    --thumb-height: min(123px, 40%);
  }

  project-index .index .track {
    right: 3px;
    --thumb-height: min(299px, 50%);
  }

  project-index .thumb {
    position: absolute;
    left: 0;
    width: 8px;
    height: var(--thumb-height);
    border-radius: 4px;
    background: var(--thumb);
    visibility: hidden;
  }

  @supports (animation-timeline: scroll()) {
    project-index :is(.scroll, .rows) {
      scrollbar-width: none;
    }

    project-index :is(.scroll, .rows)::-webkit-scrollbar {
      display: none;
    }

    project-index .track {
      display: block;
    }

    project-index .thumb {
      animation: project-index-thumb linear both;
      animation-timeline: --column;
    }
  }
}

@keyframes project-index-thumb {
  from {
    top: 0;
    visibility: visible;
  }

  to {
    top: calc(100% - var(--thumb-height));
    visibility: visible;
  }
}