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

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

html {
  scroll-behavior: smooth;
}

body {
  background:white;
  padding:0;
  font-family:"futura-pt-condensed", sans-serif;
}
/* HEADER */

/* ETERNAL BONDS PAGE */

.eternal-bonds-page {
  background:white;
  color:black;
  font-family:"futura-pt-condensed", sans-serif;
}

/* SHARED PROJECT SECTIONS */

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

.eternal-statement {
  position:absolute;
  left:calc(276.25 / 1680 * 100%);
  top:calc(115 / 880 * 100%);
  width:calc(487.5 / 1680 * 100%);
}

.eternal-statement {
  margin:0;
  font-size:35px;
  font-weight:200;
  font-style:italic;
  line-height:1.18;
}

.eternal-opening-image {
  left:calc(863.75 / 1680 * 100%);
  top:calc(195 / 880 * 100%);
  width:calc(540 / 1680 * 100%);
  max-height:880px;
  position: absolute;
}

/* MOOD BOARD */

.eternal-moodboard {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

.eternal-moodboard h2 {
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
  position:absolute;
  left: calc(24 / 1680 * 100%);
  top: calc(13 / 960 * 100%);
  z-index:20;
  margin:0;
  font-size:44px;
  font-weight:300;
  letter-spacing:0;
  line-height:1;
}

.eternal-moodboard-canvas {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.eternal-moodboard-canvas img{
  position: absolute;
  height: auto;
  margin: 0;
}

.mood-01 {
  left:calc(862.8782 / 1680 * 100%);
  top:calc(192.7684 / 960 * 100%);
  width:calc(331.5243 / 1680 * 100%);
}

.mood-02 {
  left:calc(994.8344 / 1680 * 100%);
  top:calc(558.1836 / 960 * 100%);
  width:calc(293.9607 / 1680 * 100%);
}

.mood-03 {
  left:calc(530.3804 / 1680 * 100%);
  top:calc(579.8272 / 960 * 100%);
  width:calc(427.7735 / 1680 * 100%);
}

.mood-04 {
  left:calc(181.5591 / 1680 * 100%);
  top:calc(388.9486 / 960 * 100%);
  width:calc(320.8295 / 1680 * 100%);
}

.mood-05 {
  left:calc(181.5588 / 1680 * 100%);
  top:calc(113.2355 / 960 * 100%);
  width:calc(320.8296 / 1680 * 100%);
}

.mood-06 {
  left:calc(1231.0831 / 1680 * 100%);
  top:calc(67.3446 / 960 * 100%);
  width:calc(267.3581 / 1680 * 100%);
}

.mood-07 {
  left:calc(539.0691 / 1680 * 100%);
  top:calc(113.2358 / 960 * 100%);
  width:calc(287.1286 / 1680 * 100%);
}


/* SKETCHES */

.eternal-sketches {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

.eternal-sketches h2 {
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
  position:absolute;
  left: calc(24 / 1680 * 100%);
  top: calc(13 / 960 * 100%);
  z-index:20;
  margin:0;
  font-size:44px;
  font-weight:300;
  letter-spacing:0;
  line-height:1;
}

.eternal-sketches-canvas {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.eternal-sketches-canvas img{
  position: absolute;
  height: auto;
  margin: 0;
  mix-blend-mode: multiply;
}

.sketches-01 {
  left: calc(1061.0002 / 1680 * 100%);
  top: calc(516.0357 / 960 * 100%);
  width: calc(529.7347 / 1680 * 100%);
}

.sketches-02 {
  left: calc(1120.4593 / 1680 * 100%);
  top: calc(2.4464 / 960 * 100%);
  width: calc(479.5407 / 1680 * 100%);
}

.sketches-03 {
  left: calc(797.7654 / 1680 * 100%);
  top: calc(71.4686 / 960 * 100%);
  width: calc(350.7525 / 1680 * 100%);
}

.sketches-04 {
  left: calc(447.4605 / 1680 * 100%);
  top: calc(8.4237 / 960 * 100%);
  width: calc(353.1467 / 1680 * 100%);
}

.sketches-05 {
  left: calc(464.0593 / 1680 * 100%);
  top: calc(498.8902 / 960 * 100%);
  width: calc(326.9984 / 1680 * 100%);
}

.sketches-06 {
  left: calc(767.7653 / 1680 * 100%);
  top: calc(407.4167 / 960 * 100%);
  width: calc(326.9984 / 1680 * 100%);
}

.sketches-07 {
  left: calc(105.6545 / 1680 * 100%);
  top: calc(35.7592 / 960 * 100%);
  width: calc(326.9984 / 1680 * 100%);
}

.sketches-08 {
  left: calc(102.2265 / 1680 * 100%);
  top: calc(503.6774 / 960 * 100%);
  width: calc(361.8328 / 1680 * 100%);
}

/* PROCESS */

.eternal-process {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

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

.eternal-details {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.eternal-details img{
  position: absolute;
  height: auto;
  margin: 0;
}

.process-01{
  left:calc(1055.4274 / 1680 * 100%);
  top:calc(505.7481 / 960 * 100%);
  width:calc(270.16802 / 1680 * 100%);
}

.process-02{
  left:calc(1355.8676 / 1680 * 100%);
  top:calc(324.4197 / 960 * 100%);
  width:calc(231.0764 / 1680 * 100%);
}

.process-03{
  left:calc(620.8961 / 1680 * 100%);
  top:calc(444.2718 / 960 * 100%);
  width:calc(96.073 / 1680 * 100%);
}

.process-04{
  left:calc(1055.4274 / 1680 * 100%);
  top:calc(115.1612 / 960 * 100%);
  width:calc(270.16802 / 1680 * 100%);
}

.process-05{
  left:calc(141.4945 / 1680 * 100%);
  top:calc(80.88 / 960 * 100%);
  width:calc(175.0347 / 1680 * 100%);
}

.process-06{
  left:calc(93.056 / 1680 * 100%);
  top:calc(362.0861 / 960 * 100%);
  width:calc(223.4733 / 1680 * 100%);
}

.process-07{
  left:calc(346.5293 / 1680 * 100%);
  top:calc(444.2718 / 960 * 100%);
  width:calc(244.3669 / 1680 * 100%);
}

.process-08{
  left:calc(1055.4274 / 1680 * 100%);
  top:calc(687.8707 / 960 * 100%);
  width:calc(270.16801 / 1680 * 100%);
}

.process-09{
  left:calc(746.9692 / 1680 * 100%);
  top:calc(444.2718 / 960 * 100%);
  width:calc(278.4582 / 1680 * 100%);
}

.process-10{
  left:calc(157.5511 / 1680 * 100%);
  top:calc(690.0504 / 960 * 100%);
  width:calc(158.9782 / 1680 * 100%);
}

.process-11{
  left:calc(346.5293 / 1680 * 100%);
  top:calc(98.3448 / 960 * 100%);
  width:calc(421.236 / 1680 * 100%);
}

.process-12{
  left:calc(346.5293 / 1680 * 100%);
  top:calc(645.0184 / 960 * 100%);
  width:calc(370.4399 / 1680 * 100%);
}

.process-13{
  left:calc(797.7653 / 1680 * 100%);
  top:calc(156.8706 / 960 * 100%);
  width:calc(227.6621 / 1680 * 100%);
}

/* EDITORIAL */

/* Exact 1680 x 960 composition measured from editorial-bonds.pdf. */

.eternal-editorial {
  width:100%;
  max-width:1680px;
  aspect-ratio:1680 / 960;
  height:auto;
  margin:0 auto;
  padding:0;
  position:relative;
  overflow:hidden;
}

.eternal-editorial h2 {
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
  position:absolute;
  left:calc(24 / 1680 * 100%);
  top:calc(13 / 960 * 100%);
  z-index:20;
  margin:0;
  font-size:clamp(12px, calc(44 / 1680 * 100vw), 44px);
  font-weight:300;
  letter-spacing:0;
  line-height:1;
}

.eternal-editorial-layout {
  position:absolute;
  left:0;
  top:calc(0 / 960 * 100%);
  width:100%;
  height:calc(960 / 960 * 100%);
  margin:0;
}

.eternal-editorial-layout img {
  position:absolute;
  display:block;
  width:calc(127.6307 / 1680 * 100%);
  height:auto;
}

.editorial-disclaimer {
  left:calc(1139.6 / 1680 * 100%);
  top:calc(63.1544 / 960 * 100%);
  width:calc(260.044 / 1680 * 100%);
}

/* EDITORIAL Y COORDINATES */

.editorial-01,
.editorial-02,
.editorial-03,
.editorial-04,
.editorial-05,
.editorial-06,
.editorial-07,
.editorial-08 {
  top:calc(91.4875 / 960 * 100%);
}

.editorial-09,
.editorial-10,
.editorial-11,
.editorial-12,
.editorial-13,
.editorial-14,
.editorial-15,
.editorial-16 {
  top:calc(296.4968 / 960 * 100%);
}

.editorial-17,
.editorial-18,
.editorial-19,
.editorial-20,
.editorial-21,
.editorial-22,
.editorial-23,
.editorial-24 {
  top:calc(501.5061 / 960 * 100%);
}

.editorial-25,
.editorial-26,
.editorial-27,
.editorial-28,
.editorial-29,
.editorial-30,
.editorial-31,
.editorial-32 {
  top:calc(706.5153 / 960 * 100%);
}

/* EDITORIAL X COORDINATES */

.editorial-01,
.editorial-09,
.editorial-17,
.editorial-25 {
  left:calc(280.372 / 1680 * 100%);
}

.editorial-02,
.editorial-10,
.editorial-18,
.editorial-26 {
  left:calc(422.0351 / 1680 * 100%);
}

.editorial-03,
.editorial-11,
.editorial-19,
.editorial-27 {
  left:calc(563.6981 / 1680 * 100%);
}

.editorial-04,
.editorial-12,
.editorial-20,
.editorial-28 {
  left:calc(705.3611 / 1680 * 100%);
}

.editorial-05,
.editorial-13,
.editorial-21,
.editorial-29 {
  left:calc(847.0242  / 1680 * 100%);
}

.editorial-06,
.editorial-14,
.editorial-22,
.editorial-30 {
  left:calc(988.6872 / 1680 * 100%);
}

.editorial-07,
.editorial-15,
.editorial-23,
.editorial-31{
  left:calc(1130.3502 / 1680 * 100%);
}

.editorial-08,
.editorial-16,
.editorial-24,
.editorial-32 {
  left:calc(1272.0133 / 1680 * 100%);
}

.project-photography-credit {
  position: absolute;
  left: 1208.255px;
  bottom: 20px;
  width: 100%;
  margin: 0;
  padding: 0 80px;
  text-align: right;
  z-index: 30;
}

/* RUNWAY */

.eternal-runway {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

.eternal-runway h2 {
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
  position:absolute;
  left: calc(24 / 1680 * 100%);
  top: calc(13 / 960 * 100%);
  z-index:20;
  margin:0;
  font-size:44px;
  font-weight:300;
  letter-spacing:0;
  line-height:1;
}

.eternal-runway-layout {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.eternal-runway-layout img{
  position: absolute;
  height: auto;
  margin: 0;
}

.runway-01 {
  position: absolute;
  left: calc(238.3304 / 1680 * 100%);
  top: calc(29.0085 / 960 * 100%);
  width: calc(258.579 / 1680 * 100%);
}

.runway-02 {
  position: absolute;
  left: calc(526.9094 / 1680 * 100%);
  top: calc(11.4743 / 960 * 100%);
  width: calc(310.1735 / 1680 * 100%);
}

.runway-03 {
  position: absolute;
  left: calc(867.0829 / 1680 * 100%);
  top: calc(11.4743 / 960 * 100%);
  width: calc(267.3053 / 1680 * 100%);
}

.runway-04 {
  position: absolute;
  left: calc(1164.3882 / 1680 * 100%);
  top: calc(25.4251 / 960 * 100%);
  width: calc(281.0278 / 1680 * 100%);
}

.runway-05 {
  position: absolute;
  left: calc(234.584 / 1680 * 100%);
  top: calc(446.925 / 960 * 100%);
  width: calc(262.3254 / 1680 * 100%);
}

.runway-06 {
  position: absolute;
  left: calc(526.9094 / 1680 * 100%);
  top: calc(506.0903 / 960 * 100%);
  width: calc(242.4773 / 1680 * 100%);
}

.runway-07 {
  position: absolute;
  left: calc(798.5276 / 1680 * 100%);
  top: calc(442.4321 / 960 * 100%);
  width: calc(335.8606 / 1680 * 100%);
  z-index: under;
}

.runway-08 {
  position: absolute;
  left: calc(1164.3882 / 1680 * 100%);
  top: calc(476.925 / 960 * 100%);
  width: calc(281.0278 / 1680 * 100%);
}

.eternal-runway-layout .runway-07 {
  z-index: 0;
}

.runway-outline {
  position: absolute;
  left: calc(234.584 / 1680 * 100%);
  top: calc(11.4743 / 960 * 100%);
  width: calc(1210.8321 / 1680 * 100%);
  z-index: 4;
  pointer-events: none;
}

/* NEXT PROJECT */

.eternal-next-project {
  width:1680px;
  height:100px;
  margin:0 auto;
  padding:25px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}

.eternal-next-project p {
  margin:0 0 15px;
  font-size:22px;
  opacity:0.5;
}

.eternal-next-project a {
  color:black;
  text-decoration:none;
  font-size:70px;
  line-height:1;
}

/* =========================================================
   PAGE SPACING
   ========================================================= */

.eternal-opening + .eternal-moodboard {
  margin-top: calc(100 / 880 * 100vh);
}

.eternal-moodboard + .eternal-sketches {
  margin-top: calc(100 / 960 * 100vh);
}

.eternal-sketches + .eternal-process {
  margin-top: calc(100 / 960 * 100vh);
}

.eternal-process + .eternal-editorial {
  margin-top: calc(100 / 960 * 100vh);
}

.eternal-editorial + .eternal-runway {
  margin-top: calc(100 / 960 * 100vh);
}

.eternal-runway + .eternal-next-project {
  margin-top: calc(50 / 960 * 100vh);
}

.eternal-next-project + .footer {
  margin-top: calc(0 / 960 * 100vh);
}

/* FOOTER */

.footer {
  width:1680px;
  height:450px;
  margin:125px auto 0;
  padding:45px 80px 35px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:75px;
  font-family:"futura-pt-condensed", sans-serif;
  text-decoration:#888;
}

.footer::before {
  content:"";
  position:absolute;
  top:0;
  left:80px;
  right:80px;
  border-top:1px solid rgba(0, 0, 0, 0.18);
}

.project-photography-credit {
  width:1680px;
  max-width:100%;
  margin:0 auto;
  color:#888;
  font-size:20px;
  font-weight:300;
  line-height:1.2;
  text-align:right;
  position: absolute;
}

.project-photography-credit a,
.project-photography-credit a:visited,
.project-photography-credit a:hover,
.project-photography-credit a:active {
  color:inherit;
  text-decoration:none;
}

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

.footer-divider {
  display:block;
  width:2.25px;
  height:50px;
  background-color:#888;
}

.footer-social {
  display:flex;
  align-items:center;
  justify-content:center;
  filter: brightness(0) invert(75%)
}

.footer-social img {
  display:block;
  width:44px;
  height:44px;
  filter: brightness(0) invert(75%)
}

.footer-copyright {
  margin:0;
  color:#888;
  align-content:center;
  font-size:32px;
}

.footer a,
.footer a:visited,
.footer a:hover,
.footer a:active {
  color:#888;
  text-decoration:none;
}

.footer-main .footer-name,
.footer-main .footer-email {
  font-family: "futura-pt-condensed", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  transform: none;
  white-space: nowrap;
  color: #888;
  text-decoration: none;
}


/* Align Editorial metadata to the right edge of the rightmost photo column. */
.eternal-editorial > .editorial-disclaimer {
  position:absolute !important;
  left:calc(1099.6439 / 1680 * 100%);
  right:auto;
  top:calc(62 / 960 * 100%);
  width:calc(300 / 1680 * 100%);
  height:auto;
}

.eternal-editorial .project-photography-credit {
  position:absolute;
  left:auto;
  right:calc(280.356 / 1680 * 100%);
  top:auto;
  bottom:20px;
  width:max-content;
  max-width:none;
  margin:0;
  padding:0;
  text-align:right;
  white-space:nowrap;
  z-index:30;
}