@font-face {
  font-family: "Passion Colin Italic";
  src: url("assets/fonts/PassionSansPDah-RegularItal.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: block;
}

.piece-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff;
  color: #111;
  font-family: "Passion Colin Title", sans-serif;
}

.piece-stage {
  position: relative;
  width: min(100%, 1512px);
  margin-inline: auto;
  container-type: inline-size;
}

.piece-site-header {
  padding-top: clamp(38px, 3.97vw, 60px);
  text-align: center;
}

.piece-site-title {
  position: static;
  display: inline-block;
  margin: 0;
  padding-left: 0.43em;
  transform: none;
  font-family: "Passion Colin Title", sans-serif;
  font-size: clamp(30px, 3.44vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.43em;
  text-transform: none;
  white-space: nowrap;
}

.piece-site-title:hover,
.piece-site-title:focus-visible,
.piece-back:hover,
.piece-back:focus-visible {
  opacity: 0.5;
}

.piece-main {
  width: 100%;
}

.piece-back {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9em;
  margin-top: clamp(58px, 6.25vw, 95px);
  margin-left: 5.1%;
  font-family: "Passion Colin Title", sans-serif;
  font-size: clamp(24px, 2.35vw, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.36em;
  white-space: nowrap;
}

.piece-back-arrow {
  letter-spacing: 0;
}

.piece-details {
  width: 86%;
  margin: clamp(55px, 5.25vw, 80px) auto 0;
  font-family: "Passion Colin Title", sans-serif;
  font-size: clamp(15px, 1.48vw, 22.5px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.31em;
}

.piece-details p {
  margin: 0;
}

.piece-details {
  position: relative;
  z-index: 2;
}

.piece-gallery img:first-child {
  z-index: 1;
}

.piece-title-line {
  white-space: nowrap;
}

.piece-name {
  font-family: "Passion Colin Italic", "Passion Colin Title", sans-serif;
  font-style: italic;
  letter-spacing: 0.33em;
}

.piece-gallery img {
  display: block;
  height: auto;
}

.houses-page .piece-stage {
  height: 180.754cqw; 
}

.breast-page .piece-stage {
  height: 167.063cqw; 
}

.sebastian-page .piece-stage {
  height: 153.902cqw; 
}

.houses-page .piece-main,
.breast-page .piece-main,
.sebastian-page .piece-main {
  position: static;
  padding-bottom: 0;
}

.houses-gallery,
.breast-gallery,
.sebastian-gallery {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.houses-gallery img,
.breast-gallery img,
.sebastian-gallery img {
  position: absolute;
  max-width: none;
  margin: 0;
}

.houses-view-1 { left: 19.312cqw; top: 35.714cqw; width: 64.484cqw; }
.houses-view-2 { left: 17.196cqw; top: 62.302cqw; width: 61.574cqw; }
.houses-view-3 { left: 10.516cqw; top: 95.304cqw; width: 68.254cqw; }
.houses-view-4 { left: 12.103cqw; top: 122.751cqw; width: 69.312cqw; }
.houses-view-5 { left: 14.683cqw; top: 152.579cqw; width: 64.087cqw; }

.breast-view-1 { left: 25.000cqw; top: 26.786cqw; width: 51.786cqw; }
.breast-view-2 { left: 24.339cqw; top: 75.397cqw; width: 51.257cqw; }
.breast-view-3 { left: 30.026cqw; top: 120.040cqw; width: 44.378cqw; }

.sebastian-view-1 { left: 23.214cqw; top: 32.937cqw; width: 55.093cqw; }
.sebastian-view-2 { left: 0; top: 76.918cqw; width: 50.794cqw; }
.sebastian-view-3 { left: 50.794cqw; top: 76.653cqw; width: 49.206cqw; }
.sebastian-view-4 { left: 0.331cqw; top: 125.132cqw; width: 49.669cqw; }
.sebastian-view-5 { left: 53.968cqw; top: 117.593cqw; width: 46.032cqw; }

@media (max-width: 1100px) {
  .piece-site-header {
    padding-top: clamp(34px, 5vw, 52px);
  }

  .piece-site-title {
    font-size: clamp(30px, 3.44vw, 52px);
  }

  .piece-back {
    margin-top: clamp(52px, 7vw, 76px);
    font-size: clamp(23px, 3vw, 31px);
  }

  .piece-details {
    margin-top: clamp(48px, 6vw, 66px);
    font-size: clamp(15px, 2vw, 20px);
  }
}

@media (max-width: 700px) {
  .piece-site-header {
    padding-top: 10.2vw;
  }

  .piece-site-title {
    font-size: 8.68vw;
    letter-spacing: 0.43em;
  }

  .piece-main {
    padding-bottom: 22vw;
  }

  .piece-back {
    margin-top: 14vw;
    margin-left: 7vw;
    gap: 0.72em;
    font-size: 6.4vw;
    letter-spacing: 0.34em;
  }

  .piece-details {
    width: 86%;
    margin-top: 12vw;
    font-size: 4vw;
    line-height: 1.18;
    letter-spacing: 0.25em;
  }

  .piece-title-line {
    white-space: normal;
  }

  .houses-page .piece-stage,
  .breast-page .piece-stage,
  .sebastian-page .piece-stage {
    height: auto;
  }

  .houses-page .piece-main,
  .breast-page .piece-main,
  .sebastian-page .piece-main {
    position: relative;
    padding-bottom: 22vw;
  }

  .houses-gallery,
  .breast-gallery,
  .sebastian-gallery {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 13vw auto 0;
    gap: 13vw;
    pointer-events: auto;
  }

  .houses-gallery img,
  .breast-gallery img,
  .sebastian-gallery img {
    position: static;
    left: auto;
    top: auto;
    width: 100vw;
    max-width: none;
    margin: 0 auto;
  }

  .houses-page .houses-view-3 {
    width: 106vw;
    transform: translateX(-7vw);
  }

  .houses-page .houses-view-4 {
    width: 109vw;
    transform: translateX(-8vw);
  }

  .breast-page .breast-view-3 {
    width: 86vw;
    transform: translateX(3.7vw);
  }

  .sebastian-page .sebastian-view-5 {
    width: 91.5vw;
    transform: translateX(3.9vw);
  }
}

.piece-stage {
  position: relative;
  container-type: inline-size;
}

.orb-page,
.nuts-page,
.ear-cuff-page {
  font-family: "Passion Colin Nav", sans-serif;
}

.orb-page .piece-details,
.nuts-page .piece-details,
.ear-cuff-page .piece-details {
  font-family: "Passion Colin Nav", sans-serif;
}

.orb-page .piece-main,
.nuts-page .piece-main,
.ear-cuff-page .piece-main {
  position: static;
  padding-bottom: 0;
}

.orb-page .piece-stage { height: min(224.87vw, 3400px); }
.nuts-page .piece-stage { height: min(170.37vw, 2576px); }
.ear-cuff-page .piece-stage { height: min(189.95vw, 2872px); }

.orb-details,
.nuts-details,
.ear-cuff-details {
  position: absolute;
  z-index: 2;
  width: auto;
  margin: 0;
}

.orb-details {
  top: 19.71cqw;
  left: 56.22cqw;
}

.nuts-details {
  top: 14.81cqw;
  left: 56.57cqw;
}

.ear-cuff-details {
  top: 22.62cqw;
  left: 7.51cqw;
}

.orb-gallery,
.nuts-gallery,
.ear-cuff-gallery {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.orb-gallery img,
.nuts-gallery img,
.ear-cuff-gallery img {
  position: absolute;
  margin: 0;
  max-width: none;
}

.orb-view-1 {
  left: 28.78cqw;
  top: 26.81cqw;
  width: 42.46cqw;
}

.orb-view-2 {
  left: 28.80cqw;
  top: 70.63cqw;
  width: 48.68cqw;
}

.orb-view-3 {
  left: 28.78cqw;
  top: 120.14cqw;
  width: 44.78cqw;
}

.orb-view-4 {
  left: 25.47cqw;
  top: 182.68cqw;
  width: 55.29cqw;
}

.nuts-view-1 {
  left: 26.13cqw;
  top: 21.96cqw;
  width: 51.19cqw;
}

.nuts-view-2 {
  left: 0;
  top: 79.46cqw;
  width: 95.11cqw;
}

.ear-cuff-view-1,
.ear-cuff-view-2 {
  left: 26.26cqw;
  width: 47.42cqw;
}

.ear-cuff-view-1 { top: 32.35cqw; }
.ear-cuff-view-2 { top: 85.16cqw; }

.ear-cuff-view-3 {
  left: 25.94cqw;
  top: 137.97cqw;
  width: 47.75cqw;
}

@media (max-width: 700px) {
  .orb-page .piece-stage,
  .nuts-page .piece-stage,
  .ear-cuff-page .piece-stage {
    min-height: 0;
    height: auto;
  }

  .orb-page .piece-main,
  .nuts-page .piece-main,
  .ear-cuff-page .piece-main {
    position: relative;
    padding-bottom: 22vw;
  }

  .orb-details,
  .nuts-details,
  .ear-cuff-details {
    position: static;
    width: 86%;
    margin: 12vw auto 0;
  }

  .orb-gallery,
  .nuts-gallery,
  .ear-cuff-gallery {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 13vw auto 0;
    gap: 13vw;
    pointer-events: auto;
  }

  .orb-gallery img,
  .nuts-gallery img,
  .ear-cuff-gallery img {
    position: static;
    left: auto;
    top: auto;
    width: 92vw;
    max-width: 92vw;
    margin: 0 auto;
  }

  .nuts-gallery .nuts-view-2 {
    width: 100vw;
    max-width: 100vw;
  }
}

.condensation-page .piece-stage {
  height: 285.635cqw; 
}

.spearband-page .piece-stage {
  height: 224.698cqw; 
}

.sunglass-page .piece-stage {
  height: 189.981cqw; 
}

.condensation-page .piece-main,
.spearband-page .piece-main,
.sunglass-page .piece-main {
  position: static;
  padding-bottom: 0;
}

.condensation-gallery,
.spearband-gallery,
.sunglass-gallery {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.condensation-gallery img,
.spearband-gallery img,
.sunglass-gallery img {
  position: absolute;
  max-width: none;
  margin: 0;
}

.condensation-view-1 { left: 22.621cqw; top: 29.504cqw; width: 53.909cqw; }
.condensation-view-2 { left: 23.616cqw; top: 71.555cqw; width: 52.436cqw; }
.condensation-view-3 { left: 22.627cqw; top: 119.959cqw; width: 55.820cqw; }
.condensation-view-4 { left: 24.746cqw; top: 171.732cqw; width: 50.188cqw; }
.condensation-view-5 { left: 21.228cqw; top: 225.162cqw; width: 58.606cqw; }

.spearband-view-1 { left: 22.235cqw; top: 29.705cqw; width: 54.218cqw; }
.spearband-view-2 { left: 22.234cqw; top: 74.985cqw; width: 61.035cqw; }
.spearband-view-3 { left: 19.316cqw; top: 124.840cqw; width: 65.999cqw; }
.spearband-view-4 { left: 22.162cqw; top: 173.757cqw; width: 61.032cqw; }

.sunglass-view-1 { left: 32.619cqw; top: 29.376cqw; width: 41.619cqw; }
.sunglass-view-2 { left: 24.478cqw; top: 98.789cqw; width: 57.901cqw; }
.sunglass-view-3 { left: 24.476cqw; top: 140.611cqw; width: 57.906cqw; }

@media (max-width: 700px) {
  .condensation-page .piece-stage,
  .spearband-page .piece-stage,
  .sunglass-page .piece-stage {
    height: auto;
  }

  .condensation-page .piece-main,
  .spearband-page .piece-main,
  .sunglass-page .piece-main {
    position: relative;
    padding-bottom: 22vw;
  }

  .condensation-gallery,
  .spearband-gallery,
  .sunglass-gallery {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 13vw auto 0;
    gap: 13vw;
    pointer-events: auto;
  }

  .condensation-gallery img,
  .spearband-gallery img,
  .sunglass-gallery img {
    position: static;
    left: auto;
    top: auto;
    width: 100vw;
    max-width: 100vw;
    margin: 0 auto;
  }
}