/* Eternal Bonds responsive project layout.
   Derived directly from bonds.escss desktop measurements.
   Mobile artboard: 440px portrait / 832px short landscape. */

:root {
  --project-max-width: 440px;
  --header-height: 64px;
  --page-margin: 2.5%;
  --black: #000;
  --white: #fff;
  --gray: #888;
}

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

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  background: var(--white);
  color: var(--black);
  font-family: "futura-pt-condensed", sans-serif;
}

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

main {
  width: 100%;
  max-width: var(--project-max-width);
  margin: 0 auto;
}

/* Shared 440 x 772 composition */

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

/* Opening statement */

.eternal-opening {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.eternal-statement {
  font-size:16px;
  font-weight:400;
  font-style:oblique;
  line-height:1.15;
}

.eternal-statement p {
  margin:0 0 1em;
}

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

.eternal-statement span {
  display:block;
}

.eternal-statement {
  position:absolute;
  margin:0;
  text-align:left;
  left:calc(76.7822 / 440 * 100%);
  top:calc(284.546 / 732 * 100%);
  width:calc(286.4355  / 440 * 100%);
  height:auto;
}

.eternal-opening-image {
  position: absolute;
  left: calc(74.1413 / 440 * 100%);
  top: calc(20.016 / 772 * 100%);
  width: calc(291.7175 / 440 * 100%);
}

/* Mood board and process use the desktop 440 x 772 inner canvas. */

.eternal-moodboard {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.eternal-moodboard-canvas {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(64 / 772 * 100%);
  width: 100%;
}

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

.mood-01 {
  left: calc(182.7577 / 440 * 100%);
  top: calc(425.9265 / 772 * 100%);
  width: calc(201.3093 / 440 * 100%);
}

.mood-02 {
  left: calc(14.9069 / 440 * 100%);
  top: calc(425.9265 / 772 * 100%);
  width: calc(143.7505 / 440 * 100%);
}

.mood-03 {
  left: calc(178.6574 / 440 * 100%);
  top: calc(241.1117 / 772 * 100%);
  width: calc(246.2423 / 440 * 100%);
}

.mood-04 {
  left: calc(11 / 440 * 100%);
  top: calc(170.8836 / 772 * 100%);
  width: calc(147.6574 / 440 * 100%);
}

.mood-05 {
  left: calc(17.9912 / 440 * 100%);
  top: calc(37.6144  / 772 * 100%);
  width: calc(140.6662 / 440 * 100%);
}

.mood-06 {
  left: calc(324.5476 / 440 * 100%);
  top: calc(55.2345 / 772 * 100%);
  width: calc(104.5529 / 440 * 100%);
}

.mood-07 {
  left: calc(178.6574 / 440 * 100%);
  top: calc(28.8233 / 772 * 100%);
  width: calc(125.8902 / 440 * 100%);
}

/* SKETCHES */

.eternal-sketches {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

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

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

.sketches-01 {
  left: calc(171.5267 / 440 * 100%);
  top: calc(30.872 / 772 * 100%);
  width: calc(260.052 / 440 * 100%);
}

.sketches-02 {
  left: calc(17.3393 / 440 * 100%);
  top: calc(453.5677 / 772 * 100%);
  width: calc(202.6607 / 440 * 100%);
}

.sketches-03 {
  left: calc(145.0936 / 440 * 100%);
  top: calc(207.7247 / 772 * 100%);
  width: calc(172.1879 / 440 * 100%);
}

.sketches-04 {
  left: calc(14.6126 / 440 * 100%);
  top: calc(247.5782 / 772 * 100%);
  width: calc(153.3015 / 440 * 100%);
}

.sketches-05 {
  left: calc(286.1715 / 440 * 100%);
  top: calc(237.8383 / 772 * 100%);
  width: calc(153.8285 / 440 * 100%);
}

.sketches-06 {
  left: calc(145.0936 / 440 * 100%);
  top: calc(317.3973 / 772 * 100%);
  width: calc(160.5267 / 440 * 100%);
}

.sketches-07 {
  left: calc(23.4165 / 440 * 100%);
  top: calc(34.949 / 772 * 100%);
  width: calc(160.5267 / 440 * 100%);
}

.sketches-08 {
  left: calc(262.3727 / 440 * 100%);
  top: calc(441.9797 / 772 * 100%);
  width: calc(177.6273 / 440 * 100%);
}

/* PROCESS */

.eternal-process {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.eternal-details {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(64 / 772 * 100%);
  width: 100%;
}

.eternal-details img {
  position: absolute;
  display: block;
  height: auto;
  padding: 0;
}

.process-01 {
  left: calc(297.1046 / 440 * 100%);
  top: calc(499.1852 / 772 * 100%);
  width: calc(113.4359 / 440 * 100%);
}

.process-02 {
  left: calc(297.1046 / 440 * 100%);
  top: calc(312.022 / 772 * 100%);
  width: calc(96.9248 / 440 * 100%);
}

.process-03 {
  left: calc(241.8069 / 440 * 100%);
  top: calc(225.4026 / 772 * 100%);
  width: calc(40.2977 / 440 * 100%);
}

.process-04 {
  left: calc(15.8805 / 440 * 100%);
  top: calc(430.7937 / 772 * 100%);
  width: calc(93.427 / 440 * 100%);
}

.process-05 {
  left: calc(35.8893 / 440 * 100%);
  top: calc(70.5617 / 772 * 100%);
  width: calc(73.4181 / 440 * 100%);
}

.process-06 {
  left: calc(15.5718 / 440 * 100%);
  top: calc(190.9298 / 772 * 100%);
  width: calc(93.7356 / 440 * 100%);
}

.process-07 {
  left: calc(124.3075 / 440 * 100%);
  top: calc(225.4026 / 772 * 100%);
  width: calc(102.4994 / 440 * 100%);
}

.process-08 {
  left: calc(297.1046 / 440 * 100%);
  top: calc(225.4025 / 772 * 100%);
  width: calc(127.3235 / 440 * 100%);
}

.process-09 {
  left: calc(124.3075 / 440 * 100%);
  top: calc(412.5156 / 772 * 100%);
  width: calc(157.7972 / 440 * 100%);
}

.process-10 {
  left: calc(42.6242 / 440 * 100%);
  top: calc(330.9107 / 772 * 100%);
  width: calc(66.6832 / 440 * 100%);
}

.process-11 {
  left: calc(124.3075 / 440 * 100%);
  top: calc(77.8873 / 772 * 100%);
  width: calc(176.687 / 440 * 100%);
}

.process-12 {
  left: calc(124.3075 / 440 * 100%);
  top: calc(312.022 / 772 * 100%);
  width: calc(157.7972 / 440 * 100%);
}

.process-13 {
  left: calc(315.9945 / 440 * 100%);
  top: calc(102.4359 / 772 * 100%);
  width: calc(95.4926 / 440 * 100%);
}

/* Editorial: exact 440 x 772 composition measured from editorial-nds.pdf. */


.eternal-editorial {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.eternal-editorial-layout {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(0 / 772 * 100%);
  width: 100%;
}

.eternal-editorial-layout img {
  position:absolute;
  max-width:none;
  height:auto;
  margin:0;
}

.editorial-disclaimer {
  left: calc(314.8556 / 440 * 100%);
  top: calc(60 / 772 * 100%);
  width: calc(113.4814 / 440 * 100%);
  height: auto;
}

.editorial-01 {
  left: calc(11.6716 / 440 * 100%);
  top: calc(80.6235 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-02 {
  left: calc(81.9477 / 440 * 100%);
  top: calc(80.6235 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-03 {
  left: calc(152.2239 / 440 * 100%);
  top: calc(80.6235 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-04 {
  left: calc(222.5 / 440 * 100%);
  top: calc(80.6235 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-05 {
  left: calc(292.7761 / 440 * 100%);
  top: calc(80.6235 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-06 {
  left: calc(363.0523/ 440 * 100%);
  top: calc(80.6235 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-07 {
  left: calc(11.6716 / 440 * 100%);
  top: calc(183.5622 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-08 {
  left: calc(81.9477 / 440 * 100%);
  top: calc(183.5622 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-09 {
  left: calc(152.2239 / 440 * 100%);
  top: calc(183.5622 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-10 {
  left: calc(222.5 / 440 * 100%);
  top: calc(183.5622 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-11 {
  left: calc(292.7761 / 440 * 100%);
  top: calc(183.5622 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-12 {
  left: calc(363.0523/ 440 * 100%);
  top: calc(183.5622 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-13 {
  left: calc(11.6716 / 440 * 100%);
  top: calc(286.5009 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-14 {
  left: calc(81.9477 / 440 * 100%);
  top: calc(286.5009 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-15 {
  left: calc(152.2239 / 440 * 100%);
  top: calc(286.5009 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-16 {
  left: calc(222.5 / 440 * 100%);
  top: calc(286.5009 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-17 {
  left: calc(292.7761 / 440 * 100%);
  top: calc(286.5009 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-18 {
  left: calc(363.0523/ 440 * 100%);
  top: calc(286.5009 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-19 {
  left: calc(11.6716 / 440 * 100%);
  top: calc(389.4396 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-20 {
  left: calc(81.9477 / 440 * 100%);
  top: calc(389.4396 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-21 {
  left: calc(152.2239 / 440 * 100%);
  top: calc(389.4396 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-22 {
  left: calc(222.5 / 440 * 100%);
  top: calc(389.4396 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-23 {
  left: calc(292.7761 / 440 * 100%);
  top: calc(389.4396 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-24 {
  left: calc(363.0523/ 440 * 100%);
  top: calc(389.4396 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-25 {
  left: calc(11.6716 / 440 * 100%);
  top: calc(492.3783 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-26 {
  left: calc(81.9477 / 440 * 100%);
  top: calc(492.3783 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-27 {
  left: calc(152.2239 / 440 * 100%);
  top: calc(492.3783 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-28 {
  left: calc(222.5 / 440 * 100%);
  top: calc(492.3783 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-29 {
  left: calc(292.7761 / 440 * 100%);
  top: calc(492.3783 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-30 {
  left: calc(363.0523/ 440 * 100%);
  top: calc(492.3783 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-31 {
  left: calc(81.9477 / 440 * 100%);
  top: calc(595.317 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

.editorial-32 {
  left: calc(292.7761 / 440 * 100%);
  top: calc(595.317 / 772 * 100%);
  width: calc(65.2761 / 440 * 100%);
}

/* Runway: desktop 440 x 772 section and 440 x 772 inner layout */

.eternal-runway {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.eternal-runway-layout {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(0 / 772 * 100%);
  width: 100%;
}

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

.runway-01 {
  left: calc(18.0087 / 440 * 100%);
  top: calc(75.6141 / 772 * 100%);
  width: calc(123.4742 / 440 * 100%);
}

.runway-02 {
  left: calc(156.0074 / 440 * 100%);
  top: calc(56.5033 / 772 * 100%);
  width: calc(136.23 / 440 * 100%);
}

.runway-03 {
  left: calc(306.7619 / 440 * 100%);
  top: calc(88.0041 / 772 * 100%);
  width: calc(115.2294 / 440 * 100%);
}

.runway-04 {
  left: calc(16.3843 / 440 * 100%);
  top: calc(275.8483/ 772 * 100%);
  width: calc(132.1214 / 440 * 100%);
}

.runway-05 {
  left: calc(163.4857 / 440 * 100%);
  top: calc(275.8483 / 772 * 100%);
  width: calc(142.5066 / 440 * 100%);
}

.runway-06 {
  left: calc(320.9923 / 440 * 100%);
  top: calc(305.7705 / 772 * 100%);
  width: calc(102.6234 / 440 * 100%);
}

.runway-07 {
  left: calc(45.1002 / 440 * 100%);
  top: calc(504.6083 / 772 * 100%);
  width: calc(171.5892 / 440 * 100%);
}

.runway-08 {
  left: calc(231.6894 / 440 * 100%);
  top: calc(504.6083 / 772 * 100%);
  width: calc(163.2105 / 440 * 100%);
}

.runway-outline {
  position:absolute;
  left: calc(500 / 440 * 100%);
  top: calc(900/ 772 * 100%);
  width: calc(0 / 440 * 100%);
  opacity:0;
  object-fit:contain;
  pointer-events:none;
}

/* Next project and footer */
.eternal-next-project {
  width: 100%;
  min-height: 360px;
  padding: 48px var(--page-margin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

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

.eternal-next-project a {
  font-size: clamp(54px, 7vw, 70px);
  line-height: 1;
}

.project-photography-credit {
  width: 100%;
  margin: 0 auto;
  padding: 20px var(--page-margin);
  color: var(--gray);
  font-size: 20px;
  text-align: left;
}

.footer {
  width: 100%;
  min-height: 360px;
  margin: 0 auto;
  padding: 48px var(--page-margin) 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 42px;
  color: var(--gray);
}

.footer::before {
  display: none;
}

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

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

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

.footer-name,
.footer-email {
  font-size: 22px;
  white-space: nowrap;
}

.footer-copyright {
  margin: 0;
  font-size: 20px;
}

.image-lightbox[hidden] {
  display: none;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 96%);
}

.image-lightbox-image {
  width: auto;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  object-fit: contain;
}

/* Keep the existing mobile fixed-header behavior without changing the project boards. */
main {
  padding-top: var(--header-height);
}

@media (orientation:landscape) and (max-height:500px) {
  :root {
    --project-max-width: 832px;
  }
}


body {
  text-size-adjust:none;
  -webkit-text-size-adjust:none;
}

/* Eternal Bonds mobile cascade repair. */
@media screen and (max-width:767px),
       screen and (orientation:landscape) and (max-height:500px) {
  html:has(body.eternal-bonds-page) {
    scroll-behavior:auto;
    scroll-snap-type:none !important;
  }

  body.eternal-bonds-page main > section {
    scroll-snap-align:none !important;
    scroll-snap-stop:normal;
  }
}


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

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