:root {
  --header-height:80px;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

html,
body {
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

body {
  overflow-x:hidden;
  background:#fff;
  color:#000;
  font-family:"futura-pt-condensed", sans-serif;
}

img {
  display:block;
}

a,
a:visited,
a:hover,
a:active {
  color:inherit;
  text-decoration:none;
}

main {
  width:100%;
  padding-top:var(--header-height);
}

.header {
  width:100%;
  height:var(--header-height);
  padding:0 5%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  background:#fff;
}

.header-left {
  justify-self:start;
  font-size:18px;
  line-height:1;
}

.header-center {
  justify-self:end;
  font-size:clamp(24px, 7vw, 31px);
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}

.header-right {
  display:none;
}

/* The mobile page uses the same artboards and coordinates as desktop. */
.subtraction-opening,
.subtraction-sketch,
.subtraction-process,
.subtraction-final-garment {
  width:100%;
  height:auto;
  min-height:0;
  margin:0 auto;
  padding:0;
  position:relative;
  display:block;
  overflow:hidden;
}

/* Opening artboard: 1680 × 880. */
.subtraction-opening {
  height:calc(880 / 1680 * 100vw);
}

/* Titled section artboards: 1680 × 960, including the title. */
.subtraction-sketch,
.subtraction-process,
.subtraction-final-garment {
  height:calc(960 / 1680 * 100vw);
}

.subtraction-concept-heading,
.subtraction-process-heading,
.sub-sketch-heading,
.sub-process-heading,
.sub-catalog-heading {
  position:absolute;
  z-index:20;
  margin:0;
  font-size:calc(44 / 1680 * 100vw);
  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:calc(25 / 1680 * 100vw);
  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;
  left:calc(840 / 1680 * 100%);
  top:calc(80 / 880 * 100%);
  width:calc(760 / 1680 * 100%);
  height:calc(360 / 880 * 100%);
  object-fit:contain;
}

.sub-sketch-heading,
.sub-process-heading,
.sub-catalog-heading {
  left:calc(80 / 1680 * 100%);
  top:calc(80 / 960 * 100%);
}

.sub-sketch-01 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(80 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(430 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  object-fit:contain;
}

.sub-sketch-02 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(625 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(430 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  object-fit:contain;
}

.sub-sketch-03 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(1100 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(500 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  object-fit:contain;
}

.sub-process-images,
.sub-catalog-images {
  position:absolute;
  inset:0;
  display:block;
}

.sub-process-01 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(80 / 1680 * 100%);
  top:calc(220 / 960 * 100%);
  width:calc(430 / 1680 * 100%);
  height:calc(660 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.sub-process-02 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(625 / 1680 * 100%);
  top:calc(220 / 960 * 100%);
  width:calc(430 / 1680 * 100%);
  height:calc(660 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.sub-process-03 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(1100 / 1680 * 100%);
  top:calc(220 / 960 * 100%);
  width:calc(500 / 1680 * 100%);
  height:calc(660 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.sub-catalog-01 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(80 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(300 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.sub-catalog-02 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(480 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(300 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.sub-catalog-03 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(880 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(300 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.sub-catalog-04 {
  position:absolute;
  display:block;
  max-width:none;
  left:calc(1280 / 1680 * 100%);
  top:calc(140 / 960 * 100%);
  width:calc(300 / 1680 * 100%);
  height:calc(740 / 960 * 100%);
  margin:0;
  object-fit:contain;
}

.subtraction-next-project {
  min-height:55svh;
  padding:10vh 5%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}

.subtraction-next-project p {
  margin:0 0 10px;
  font-size:18px;
  opacity:.5;
}

.subtraction-next-project a {
  font-size:44px;
  line-height:1;
}

.footer {
  width:90%;
  margin:0 auto;
  padding:60px 0 35px;
  border-top:1px solid rgb(0 0 0 / 18%);
  text-align:center;
}

.footer-main {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.footer-divider {
  width:1px;
  height:28px;
  background:#888;
}

.footer-social img {
  width:25px;
  height:25px;
}

.footer-copyright {
  margin:38px 0 0;
  color:#888;
  font-size:16px;
}