*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }
body, main { margin: 0; padding: 0; background: #fff; color: #000; font-family: "futura-pt-condensed", sans-serif; }

.subtraction-opening {
  width: 1680px;
  height: 880px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.subtraction-concept-heading,
.subtraction-process-heading {
  position: absolute;
  z-index: 20;
  margin: 0;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

.subtraction-concept-heading {
  left: calc(80 / 1680 * 100%);
  top: calc(80 / 880 * 100%);
}

.subtraction-process-heading {
  left: calc(80 / 1680 * 100%);
  top: calc(585 / 880 * 100%);
}

.subtraction-concept-copy {
  position: absolute;
  left: calc(80 / 1680 * 100%);
  top: calc(145 / 880 * 100%);
  width: calc(680 / 1680 * 100%);
}

.subtraction-concept-copy p,
.subtraction-process-copy {
  margin: 0;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.18;
}

.subtraction-concept-copy p + p {
  margin-top: calc(32 / 880 * 100%);
}

.subtraction-process-copy {
  position: absolute;
  left: calc(80 / 1680 * 100%);
  top: calc(650 / 880 * 100%);
  width: calc(680 / 1680 * 100%);
}

.subtraction-opening-image {
  position: absolute;
  display: block;
  max-width: none;
  left: calc(840 / 1680 * 100%);
  top: calc(80 / 880 * 100%);
  width: calc(760 / 1680 * 100%);
  height: calc(360 / 880 * 100%);
  object-fit: contain;
}

/* Titled sections use the 1680 × 960 desktop artboard. */
.subtraction-sketch,
.subtraction-process,
.subtraction-final-garment {
  width: 1680px;
  height: 960px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.subtraction-sketch h2,
.subtraction-process h2,
.subtraction-final-garment h2 {
  font-family: "futura-pt-condensed", sans-serif;
  font-style: italic;
  position: absolute;
  left: calc(30 / 1680 * 100%);
  top: calc(13 / 960 * 100%);
  z-index: 20;
  margin: 0;
  font-size: 44px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}

.sub-sketches,
.sub-process-images,
.sub-catalog-images {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sub-sketches img,
.sub-process-images img,
.sub-catalog-images img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.sub-sketch-01 {
  left: calc(80 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(430 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-sketch-02 {
  left: calc(585 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(430 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-sketch-03 {
  left: calc(1040 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(500 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-process-01 {
  left: calc(80 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(430 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-process-02 {
  left: calc(585 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(430 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-process-03 {
  left: calc(1040 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(500 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-catalog-01 {
  left: calc(80 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(300 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-catalog-02 {
  left: calc(460 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(300 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-catalog-03 {
  left: calc(840 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(300 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.sub-catalog-04 {
  left: calc(1220 / 1680 * 100%);
  top: calc(60 / 960 * 100%);
  width: calc(300 / 1680 * 100%);
  max-height: calc(740 / 960 * 100%);
}

.subtraction-next-project {
  width: 1680px;
  min-height: 475px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.subtraction-next-project p { margin: 0 0 15px; font-size: 22px; opacity: .5; }
.subtraction-next-project a { color: #000; font-size: 70px; line-height: 1; text-decoration: none; }