:root {
  --print-mobile-width: 440;
  --print-mobile-section-height: 772;
}

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

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

body.print-page {
  background: #fff;
  color: #000;
  font-family: "futura-pt-condensed", sans-serif;
}

body.print-page main {
  width: 100%;
  max-width: none;
}

.print-opening,
.relief-etching,
.general-print,
.brand-printing,
.personal,
.production {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.print-opening {
  aspect-ratio: 440 / 732;
}

.relief-etching,
.general-print,
.brand-printing,
.personal,
.production {
  aspect-ratio: 440 / 772;
}

.print-statement,
.etching-layout,
.general-layout,
.brand-layout,
.personal-layout,
.production-layout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.print-opening img,
.etching-layout img,
.general-layout img,
.brand-layout img,
.personal-layout img,
.production-layout img {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
}

.relief-etching h2,
.general-print h2,
.brand-printing h2,
.personal h2,
.production h2 {
  display: none;
}

.relief-etching p,
.general-print p,
.brand-printing p,
.personal p,
.production p {
  position: absolute;
  z-index: 20;
  margin: 0;
  font-size: calc(12 / 440 * 100vw);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* opening.svg — white artboard: x 0, y 34.695, width 440, height 732 */
.print-opening-01 {
  left: calc(124.105 / 440 * 100%);
  top: calc(32.373 / 732 * 100%);
  width: calc(191.789 / 440 * 100%);
  height: calc(268.505 / 732 * 100%);
  object-fit: cover;
}

.print-statement {
  inset: auto;
  left: calc(89.222 / 440 * 100%);
  right: calc(89.222 / 440 * 100%);
  top: calc(325.692 / 732 * 100%);
  width: auto;
  height: auto;
  font-size: calc(12 / 440 * 100vw);
  font-weight: 400;
  line-height: calc(17.63 / 12);
}

.print-statement p {
  margin: 0 0 calc(20.498 / 440 * 100vw);
}

.print-statement p:last-child {
  margin-bottom: 0;
}

.print-statement span {
  display: block;
}

/* relief.svg — viewBox 0 0 440 772 */
.etching-layout .relief-01,
.etching-layout .relief-02,
.etching-layout .relief-03,
.etching-layout .relief-04,
.etching-layout .etching-01 {
  display: none;
}

.etching-layout .relief-05 {
  left: calc(19.198 / 440 * 100%);
  top: calc(256.113 / 772 * 100%);
  width: calc(139 / 440 * 100%);
  height: calc(110.7 / 772 * 100%);
  object-fit: fill;
}

.etching-layout .relief-06 {
  left: calc(302.615 / 440 * 100%);
  top: calc(256.113 / 772 * 100%);
  width: calc(117.914 / 440 * 100%);
  height: calc(111.36 / 772 * 100%);
  object-fit: fill;
}

.caption-relief {
  left: calc(131.777 / 440 * 100%);
  top: calc(217.588 / 772 * 100%);
}

.caption-study {
  left: calc(198.47 / 440 * 100%);
  top: calc(380.057 / 772 * 100%);
}

.caption-etching {
  left: calc(185.766 / 440 * 100%);
  top: calc(529.722 / 772 * 100%);
}

/* general.svg — viewBox 0 0 440 772 */
.general-layout .general-02,
.general-layout .general-03,
.general-layout .general-11 {
  display: none;
}

.general-layout .general-01 {
  left: calc(12.515 / 440 * 100%);
  top: calc(59.825 / 772 * 100%);
  width: calc(205.082 / 440 * 100%);
  height: calc(140.548 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-04 {
  left: calc(364.673 / 440 * 100%);
  top: calc(234.739 / 772 * 100%);
  width: calc(57.456 / 440 * 100%);
  height: calc(76.608 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-05 {
  left: calc(296.867 / 440 * 100%);
  top: calc(234.81 / 772 * 100%);
  width: calc(57.456 / 440 * 100%);
  height: calc(76.608 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-06 {
  left: calc(296.867 / 440 * 100%);
  top: calc(321.706 / 772 * 100%);
  width: calc(57.456 / 440 * 100%);
  height: calc(76.608 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-07 {
  left: calc(364.697 / 440 * 100%);
  top: calc(321.674 / 772 * 100%);
  width: calc(57.456 / 440 * 100%);
  height: calc(76.608 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-08 {
  left: calc(157.883 / 440 * 100%);
  top: calc(234.778 / 772 * 100%);
  width: calc(123.984 / 440 * 100%);
  height: calc(165.312 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-09 {
  left: calc(16.715 / 440 * 100%);
  top: calc(234.778 / 772 * 100%);
  width: calc(127.5 / 440 * 100%);
  height: calc(165 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-10 {
  left: calc(21.545 / 440 * 100%);
  top: calc(443.407 / 772 * 100%);
  width: calc(282.24 / 440 * 100%);
  height: calc(211.68 / 772 * 100%);
  object-fit: fill;
}

.general-layout .general-12 {
  left: calc(316.129 / 440 * 100%);
  top: calc(555.412 / 772 * 100%);
  width: calc(102.969 / 440 * 100%);
  height: calc(101.592 / 772 * 100%);
  object-fit: fill;
}

.caption-repeat {
  left: calc(344.98 / 440 * 100%);
  top: calc(212.554 / 772 * 100%);
}

.caption-optical {
  left: calc(68.494 / 440 * 100%);
  top: calc(212.554 / 772 * 100%);
}

.caption-virgil {
  left: calc(128.515 / 440 * 100%);
  top: calc(668.696 / 772 * 100%);
}

.caption-cmyk {
  left: calc(305.734 / 440 * 100%);
  top: calc(410.64 / 772 * 100%);
}

.caption-shirt {
  left: calc(175.836 / 440 * 100%);
  top: calc(410.64 / 772 * 100%);
}

.caption-zine {
  left: calc(73.808 / 440 * 100%);
  top: calc(411.704 / 772 * 100%);
}

/* branding.svg — white artboard: x 0, y 56.392, width 440, height 772 */
.brand-layout .branding-01 {
  left: calc(16.028 / 440 * 100%);
  top: calc(61.817 / 772 * 100%);
  width: calc(259.156 / 440 * 100%);
  height: calc(179.581 / 772 * 100%);
  object-fit: cover;
}

.brand-layout .branding-02 {
  left: calc(16.028 / 440 * 100%);
  top: calc(256.112 / 772 * 100%);
  width: calc(102.06 / 440 * 100%);
  height: calc(181.44 / 772 * 100%);
  object-fit: fill;
}

.brand-layout .branding-03 {
  left: calc(132.412 / 440 * 100%);
  top: calc(256.112 / 772 * 100%);
  width: calc(102.06 / 440 * 100%);
  height: calc(181.44 / 772 * 100%);
  object-fit: fill;
}

.brand-layout .branding-04 {
  left: calc(290.183 / 440 * 100%);
  top: calc(61.817 / 772 * 100%);
  width: calc(133.789 / 440 * 100%);
  height: calc(179.581 / 772 * 100%);
  object-fit: cover;
}

.brand-layout .branding-05 {
  left: calc(248.704 / 440 * 100%);
  top: calc(402.495 / 772 * 100%);
  width: calc(173.376 / 440 * 100%);
  height: calc(130.032 / 772 * 100%);
  object-fit: fill;
}

.brand-layout .branding-06 {
  left: calc(248.796 / 440 * 100%);
  top: calc(256.112 / 772 * 100%);
  width: calc(173.376 / 440 * 100%);
  height: calc(130.032 / 772 * 100%);
  object-fit: fill;
}

.caption-branding {
  left: calc(126.379 / 440 * 100%);
  top: calc(582.392 / 772 * 100%);
}

/* personal.svg — white artboard: x 0, y 0, width 440, height 772 */
.personal-layout .personal-01 {
  left: calc(18.699 / 440 * 100%);
  top: calc(67.682 / 772 * 100%);
  width: calc(104.249 / 440 * 100%);
  height: calc(143.256 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-02 {
  left: calc(135.471 / 440 * 100%);
  top: calc(67.682 / 772 * 100%);
  width: calc(102.201 / 440 * 100%);
  height: calc(143.256 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-03 {
  left: calc(282.358 / 440 * 100%);
  top: calc(264.755 / 772 * 100%);
  width: calc(117.958 / 440 * 100%);
  height: calc(158.431 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-04 {
  left: calc(248.34 / 440 * 100%);
  top: calc(67.682 / 772 * 100%);
  width: calc(172.071 / 440 * 100%);
  height: calc(143.256 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-05 {
  left: calc(29.852 / 440 * 100%);
  top: calc(477.292 / 772 * 100%);
  width: calc(105.042 / 440 * 100%);
  height: calc(155.855 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-06 {
  left: calc(148.613 / 440 * 100%);
  top: calc(477.292 / 772 * 100%);
  width: calc(136.831 / 440 * 100%);
  height: calc(155.855 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-07 {
  left: calc(18.699 / 440 * 100%);
  top: calc(264.755 / 772 * 100%);
  width: calc(124.132 / 440 * 100%);
  height: calc(158.431 / 772 * 100%);
  object-fit: cover;
}

.personal-layout .personal-08 {
  left: calc(156.6666666667 / 440 * 100%);
  top: calc(291.1333333333 / 772 * 100%);
  width: calc(112.7333333333 / 440 * 100%);
  height: calc(105.6666666667 / 772 * 100%);
  object-fit: contain;
}

.caption-valentine {
  left: calc(104.077 / 440 * 100%);
  top: calc(435.512 / 772 * 100%);
}

.caption-top-influence {
  left: calc(281.218 / 440 * 100%);
  top: calc(435.512 / 772 * 100%);
}

.caption-indigo {
  left: calc(87.321 / 440 * 100%);
  top: calc(223.264 / 772 * 100%);
}

.caption-yardage {
  left: calc(274.256 / 440 * 100%);
  top: calc(223.264 / 772 * 100%);
}

.caption-technicians {
  left: calc(106.104 / 440 * 100%);
  top: calc(645.474 / 772 * 100%);
}

/* production.svg — white artboard: x 193.193, y 55.515, width 440, height 772 */
.production-layout .production-colorway {
  left: calc(20.98 / 440 * 100%);
  top: calc(60.64 / 772 * 100%);
  width: calc(399.203 / 440 * 100%);
  height: calc(214.021 / 772 * 100%);
  object-fit: cover;
}

.production-layout .production-01 {
  left: calc(277.642 / 440 * 100%);
  top: calc(441.477 / 772 * 100%);
  width: calc(142.811 / 440 * 100%);
  height: calc(147.056 / 772 * 100%);
  object-fit: cover;
}

.production-layout .production-02 {
  left: calc(221.884 / 440 * 100%);
  top: calc(289.662 / 772 * 100%);
  width: calc(197.407 / 440 * 100%);
  height: calc(136.644 / 772 * 100%);
  object-fit: cover;
}

.production-layout .production-03 {
  left: calc(141.915 / 440 * 100%);
  top: calc(441.306 / 772 * 100%);
  width: calc(120.726 / 440 * 100%);
  height: calc(188.755 / 772 * 100%);
  object-fit: cover;
}

.production-layout .production-04 {
  left: calc(20.71 / 440 * 100%);
  top: calc(441.306 / 772 * 100%);
  width: calc(106.572 / 440 * 100%);
  height: calc(189.406 / 772 * 100%);
  object-fit: fill;
}

.production-layout .production-05 {
  left: calc(19.548 / 440 * 100%);
  top: calc(289.662 / 772 * 100%);
  width: calc(95.452 / 440 * 100%);
  height: calc(136.644 / 772 * 100%);
  object-fit: cover;
}

.production-layout .production-06 {
  left: calc(129.999 / 440 * 100%);
  top: calc(289.662 / 772 * 100%);
  width: calc(77.04 / 440 * 100%);
  height: calc(136.92 / 772 * 100%);
  object-fit: fill;
}

.caption-production {
  left: calc(171.766 / 440 * 100%);
  top: calc(654.314 / 772 * 100%);
}

.next-project {
  width: 100%;
  min-height: 240px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.next-project p {
  margin: 0 0 15px;
  font-size: 16px;
  opacity: .5;
}

.next-project a {
  color: #000;
  font-size: 42px;
  line-height: 1;
  text-decoration: none;
}