.plane-case-study {
  overflow-x: clip;
}

.plane-case-study .project-detail {
  overflow: visible;
  padding-bottom: 10rem;
}

.plane-case-study .project-article,
.plane-case-study .project-body {
  overflow: visible;
}

.plane-story {
  --plane-green: #00ff2a;
  --plane-blue: #6fcfff;
  --plane-copy: rgba(240, 244, 242, 0.72);
  padding-top: clamp(3.5rem, 8vw, 7rem);
}

.plane-story figure {
  margin: 0;
}

.plane-story img {
  display: block;
  max-width: 100%;
  border-radius: 0.75rem;
}

.plane-full-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw !important;
}

.plane-hero,
.plane-finale {
  display: grid;
  justify-items: center;
  padding-inline: clamp(1rem, 5vw, 5rem);
}

.plane-hero img,
.plane-finale img {
  width: min(100%, 94rem);
  height: auto;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform 80ms linear;
}

.plane-copy {
  color: var(--plane-copy);
  font-size: clamp(0.95rem, 1.25vw, 1.12rem) !important;
  line-height: 1.75 !important;
}

.plane-copy--intro {
  box-sizing: border-box;
  margin-top: clamp(4.5rem, 10vw, 9rem) !important;
  padding-inline: clamp(2rem, 5vw, 5rem);
  text-align: center;
  white-space: nowrap;
}

.plane-copy p + p {
  margin-top: 0.5rem;
}

.plane-product-intro,
.plane-cards-intro,
.tattoo-section {
  margin-top: clamp(7rem, 14vw, 13rem) !important;
  padding-inline: clamp(1.25rem, 6vw, 7rem);
}

.plane-section-heading {
  width: min(100%, 86rem);
  margin: 0 auto;
}

.project-body .plane-section-heading h2 {
  max-width: 15ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.15rem, 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.plane-section-heading > p {
  margin-top: 0.85rem !important;
  color: var(--plane-green);
  font-family: "Yota Mono", monospace;
  font-size: clamp(0.82rem, 1.25vw, 1.05rem);
  letter-spacing: 0.06em;
}

.plane-collection {
  margin-top: clamp(4rem, 8vw, 7rem) !important;
}

.plane-collection-copy {
  width: min(calc(100% - clamp(2.5rem, 12vw, 14rem)), 86rem);
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  color: var(--plane-copy);
  font-size: clamp(0.9rem, 1.12vw, 1.05rem);
  line-height: 1.7;
}

.plane-collection-copy h3 {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0 0 1.25rem;
  color: #fff;
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);
  line-height: 1.1;
}

.plane-collection-copy h3 span {
  color: var(--plane-green);
  font-family: "Yota Mono", monospace;
  font-size: 0.55em;
  letter-spacing: 0.05em;
}

.plane-collection-copy p {
  margin: 0;
}

.plane-collection-copy p + p {
  margin-top: 0.2rem;
}

.plane-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.plane-marquee:active {
  cursor: grabbing;
}

.plane-marquee::before,
.plane-marquee::after {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  width: min(10vw, 8rem);
  content: "";
  pointer-events: none;
}

.plane-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #0c0f0e, transparent);
}

.plane-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #0c0f0e, transparent);
}

.plane-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.plane-marquee figure {
  flex: 0 0 clamp(12rem, 20vw, 19rem);
  padding-inline: clamp(0.5rem, 1.4vw, 1.25rem);
}

.plane-marquee img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}

.plane-cards-intro .plane-copy--cards {
  width: min(100%, 86rem);
  margin: clamp(2.25rem, 5vw, 4rem) auto 0;
}

.card-spread {
  margin-top: clamp(5rem, 11vw, 10rem) !important;
  overflow: clip;
}

.card-spread-label {
  width: min(calc(100% - clamp(2.5rem, 12vw, 14rem)), 86rem);
  margin: 0 auto 1.5rem !important;
}

.project-body .card-spread-label h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);
  line-height: 1.1;
}

.project-body .card-spread-label p {
  margin: 0.6rem 0 0;
  color: var(--plane-green);
  font-family: "Yota Mono", monospace;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  letter-spacing: 0.08em;
}

.card-spread-stage {
  position: relative;
  width: min(100%, 92rem);
  height: clamp(28rem, 57vw, 50rem);
  margin: 0 auto;
}

.card-spread-center,
.card-spread-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
}

.card-spread-center {
  z-index: 3;
  width: clamp(17rem, 34vw, 32rem);
  aspect-ratio: 1.08;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 720ms cubic-bezier(0.18, 1.58, 0.34, 1), z-index 0s linear 720ms;
}

.card-spread-center img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 320ms ease;
}

.card-spread-open {
  opacity: 0;
}

.card-spread-center:hover,
.card-spread-center:focus-visible,
.card-spread-center.is-open {
  z-index: 8;
  transform: translate(-50%, -50%) scale(1.3);
  transition-delay: 0s;
}

.card-spread-center:hover .card-spread-open,
.card-spread-center:focus-visible .card-spread-open,
.card-spread-center.is-open .card-spread-open {
  opacity: 1;
  transition: opacity 1.35s ease 480ms;
}

.card-spread-orbit {
  z-index: 1;
  width: clamp(13.125rem, 24.94vw, 23.625rem);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.68);
  transition: opacity 550ms ease, transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card-spread.is-spread .card-spread-orbit {
  opacity: 1;
}

.card-spread.is-spread .card-spread-orbit--one {
  transform: translate(calc(-50% - min(27vw, 25rem)), calc(-50% - min(20vw, 14rem))) rotate(-10deg);
}

.card-spread.is-spread .card-spread-orbit--two {
  transform: translate(calc(-50% + min(27vw, 25rem)), calc(-50% - min(20vw, 14rem))) rotate(10deg);
}

.card-spread.is-spread .card-spread-orbit--three {
  transform: translate(calc(-50% - min(27vw, 25rem)), calc(-50% + min(20vw, 14rem))) rotate(10deg);
}

.card-spread.is-spread .card-spread-orbit--four {
  transform: translate(calc(-50% + min(27vw, 25rem)), calc(-50% + min(20vw, 14rem))) rotate(-10deg);
}

.tattoo-section .plane-section-heading {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.tattoo-composition {
  display: grid;
  grid-template-columns: minmax(9rem, 0.55fr) minmax(40rem, 2.5fr) minmax(9rem, 0.55fr);
  gap: clamp(0.5rem, 1.6vw, 1.75rem);
  align-items: center;
  width: min(calc(100% - 2rem), 106rem);
  margin: 0 auto;
}

.tattoo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.5vw, 2.5rem);
  align-items: center;
  width: 100%;
}

.tattoo-card {
  position: relative;
  display: grid;
  justify-items: center;
  outline: 0;
  cursor: zoom-in;
}

.tattoo-visual {
  position: relative;
  width: min(100%, 28.75rem);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tattoo-sheet {
  width: 100%;
  max-height: 40rem;
  object-fit: contain;
}

.tattoo-note {
  align-self: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity 280ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tattoo-note > img {
  display: block;
  width: clamp(5rem, 8vw, 8rem);
  height: auto;
  margin-bottom: 0.7rem;
}

.tattoo-note p {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.tattoo-note span {
  display: block;
  color: var(--plane-green);
  font-family: "Yota Mono", monospace;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.tattoo-note--left {
  justify-self: end;
  padding-top: clamp(5rem, 11vw, 11rem);
}

.tattoo-note--left > img {
  margin-inline: auto 0;
}

.tattoo-note--right {
  justify-self: start;
  padding-top: clamp(8rem, 15vw, 15rem);
}

.tattoo-note--right > img {
  margin-inline: 0 auto;
}

.tattoo-composition:has(.tattoo-card--left:hover) .tattoo-note--left,
.tattoo-composition:has(.tattoo-card--left:focus-visible) .tattoo-note--left,
.tattoo-composition:has(.tattoo-card--left.is-active) .tattoo-note--left,
.tattoo-composition:has(.tattoo-card--right:hover) .tattoo-note--right,
.tattoo-composition:has(.tattoo-card--right:focus-visible) .tattoo-note--right,
.tattoo-composition:has(.tattoo-card--right.is-active) .tattoo-note--right {
  opacity: 1;
  transform: translateY(0);
}

.tattoo-card--left .tattoo-visual {
  transform: scale(1.25) rotate(-8deg);
}

.tattoo-card--right .tattoo-visual {
  transform: scale(1.25) rotate(8deg);
}

.tattoo-card:hover .tattoo-visual,
.tattoo-card:focus-visible .tattoo-visual,
.tattoo-card.is-active .tattoo-visual {
  transform: scale(1.35) rotate(var(--tattoo-rotation));
}

.tattoo-card--left {
  --tattoo-rotation: -8deg;
}

.tattoo-card--right {
  --tattoo-rotation: 8deg;
}

.plane-finale {
  margin-top: clamp(7rem, 15vw, 14rem) !important;
}

.plane-back {
  margin-top: clamp(4rem, 8vw, 7rem) !important;
}

.motion-ready [data-reveal] {
  opacity: 0;
  clip-path: inset(0 0 14% 0);
  transform: translateY(2.25rem);
  transition: opacity 650ms ease, clip-path 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

@media (max-width: 760px) {
  .plane-case-study .project-nav {
    justify-content: space-between;
    gap: 0;
    overflow-x: visible;
    font-size: clamp(0.6rem, 2.75vw, 0.72rem);
  }

  .plane-case-study .project-nav a,
  .plane-case-study .project-nav button {
    padding: 0.35rem 0.1rem;
  }

  .plane-copy--intro {
    padding-inline: 1.25rem;
    font-size: 0.9rem !important;
    white-space: normal;
  }

  .plane-collection-copy {
    width: calc(100% - 2.5rem);
  }

  .plane-collection-copy h3 {
    flex-wrap: wrap;
  }

  .plane-marquee figure {
    flex-basis: 11rem;
  }

  .card-spread-stage {
    height: 34rem;
  }

  .card-spread-center {
    width: min(68vw, 19rem);
  }

  .card-spread-orbit {
    width: min(44.625vw, 13.125rem);
  }

  .card-spread-center:hover,
  .card-spread-center:focus-visible,
  .card-spread-center.is-open {
    transform: translate(-50%, -50%) scale(1.3);
  }

  .card-spread.is-spread .card-spread-orbit--one {
    transform: translate(calc(-50% - 24vw), calc(-50% - 11rem)) rotate(-10deg);
  }

  .card-spread.is-spread .card-spread-orbit--two {
    transform: translate(calc(-50% + 24vw), calc(-50% - 11rem)) rotate(10deg);
  }

  .card-spread.is-spread .card-spread-orbit--three {
    transform: translate(calc(-50% - 24vw), calc(-50% + 11rem)) rotate(10deg);
  }

  .card-spread.is-spread .card-spread-orbit--four {
    transform: translate(calc(-50% + 24vw), calc(-50% + 11rem)) rotate(-10deg);
  }

  .tattoo-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .tattoo-composition {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tattoo-note {
    justify-self: center;
    padding: 0;
    opacity: 1;
    transform: none;
  }

  .tattoo-note > img {
    width: 4.5rem;
    margin-inline: auto;
  }

  .tattoo-note--left {
    grid-row: 1;
  }

  .tattoo-note--right {
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plane-hero img,
  .plane-finale img,
  .card-spread-orbit,
  .card-spread-center img,
  .tattoo-visual,
  .tattoo-note {
    transition: none;
  }
}