/* Eternal Bonds responsive project layout.
   Derived directly from eternal-bonds.css desktop measurements.
   Tablet artboard: 834px portrait / 1194px landscape. */

:root {
  --project-max-width: 834px;
  --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;
}
img { display:block; }
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 1440 x 1024 composition */
.eternal-section {
  width:100%;
  max-width:var(--project-max-width);
  aspect-ratio:1440 / 1024;
  margin:0 auto;
  padding:0;
  position:relative;
  overflow:hidden;
}
.eternal-section h2 {
  position:absolute;
  left:calc(24 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  z-index:20;
  margin:0;
  font-size:clamp(12px, calc(44 / 1440 * 100vw), 44px);
  font-weight:300;
  line-height:1;
}

/* Opening statement */
.eternal-statement-copy {
  position:absolute;
  left:calc(80 / 1440 * 100%);
  top:calc(140 / 1024 * 100%);
  width:calc(487.5 / 1440 * 100%);
  margin:0;
}
.opening-statement {
  font-size:clamp(8px, calc(34.6931 / 1440 * 100vw), 34.6931px);
  font-weight:200;
  font-style:italic;
  line-height:1.18;
}
.scaled-text {
  display:block;
  width:calc(571.42 / 487.5 * 100%);
  transform:scaleX(.85314);
  transform-origin:left top;
}
.opening-statement p { margin:0 0 1.125em; }
.opening-statement p:last-child { margin-bottom:0; }
.opening-statement span { display:block; white-space:nowrap; }
.eternal-statement-image {
  position:absolute;
  right:calc(130.3 / 1440 * 100%);
  top:calc(228.53 / 1024 * 100%);
  width:calc(540 / 1440 * 100%);
  height:auto;
}

/* Mood board and process use the desktop 1440 x 1024 inner canvas. */
.eternal-section:has(> .eternal-moodboard-canvas),
.eternal-section:has(> .eternal-details) {
  aspect-ratio:1440 / 1174;
}
.eternal-moodboard-canvas,
.eternal-details {
  position:absolute;
  left:0;
  top:calc(150 / 1174 * 100%);
  width:100%;
  height:calc(1024 / 1174 * 100%);
}
.eternal-moodboard-canvas img,
.eternal-details img {
  position:absolute;
  display:block;
  height:auto;
  margin:0;
}
.mood-01 {
  right:calc(294.8701 / 1440 * 100%);
  top:calc(218.9568 / 1024 * 100%);
  width:calc(324.1984 / 1440 * 100%);
}

.mood-02 {
  right:calc(196.8181 / 1440 * 100%);
  top:calc(575.4273 / 1024 * 100%);
  width:calc(285.5449 / 1440 * 100%);
}

.mood-03 {
  right:calc(517.363 / 1440 * 100%);
  top:calc(610.4273 / 1024 * 100%);
  width:calc(415.7927 / 1440 * 100%);
}

.mood-04 {
  right:calc(968.1554 / 1440 * 100%);
  top:calc(434.1261 / 1024 * 100%);
  width:calc(311.8441 / 1440 * 100%);
}

.mood-05 {
  right:calc(968.1554 / 1440 * 100%);
  top:calc(162.0566 / 1024 * 100%);
  width:calc(311.8441 / 1440 * 100%);
}

.mood-06 {
  right:0;
  top:calc(93.1332 / 1024 * 100%);
  width:calc(255.8539 / 1440 * 100%);
}

.mood-07 {
  right:calc(654.0685 / 1440 * 100%);
  top:calc(149.1416 / 1024 * 100%);
  width:calc(274.7737 / 1440 * 100%);
}

.process-01{
  right:calc(626.775 / 1440 * 100%);
  top:calc(305.44 / 1024 * 100%);
  width:calc(236.232 / 1440 * 100%);
}

.process-02{
  right:calc(1148.1144 / 1440 * 100%);
  top:calc(499.8479 / 1024 * 100%);
  width:calc(115.3042 / 1440 * 100%);
}

.process-03{
  right:calc(366.9961 / 1440 * 100%);
  top:calc(686.435 / 1024 * 100%);
  width:calc(209.799 / 1440 * 100%);
}

.process-04{
  right:calc(366.9961 / 1440 * 100%);
  top:calc(355.44 / 1024 * 100%);
  width:calc(211.68 / 1440 * 100%);
}

.process-05{
  right:calc(978.0041 / 1440 * 100%);
  top:calc(499.501 / 1024 * 100%);
  width:calc(129.857 / 1440 * 100%);
}

.process-06{
  right:calc(51.3881 / 1440 * 100%);
  top:calc(355.44 / 1024 * 100%);
  width:calc(265.608 / 1440 * 100%);
}

.process-07{
  right:calc(577.742 / 1440 * 100%);
  top:calc(49.9999 / 1024 * 100%);
  width:calc(285.266 / 1440 * 100%);
}

.process-08{
  right:calc(626.7761 / 1440 * 100%);
  top:calc(500.4253 / 1024 * 100%);
  width:calc(301.229 / 1440 * 100%);
}

.process-09{
  right:calc(912.484 / 1440 * 100%);
  top:calc(0 / 1024 * 100%);
  width:calc(253.44 / 1440 * 100%);
}

.process-10{
  right:calc(104.6465 / 1440 * 100%);
  top:calc(761.435 / 1024 * 100%);
  width:calc(212.3496 / 1440 * 100%);
}

.process-11{
  right:calc(892.83 / 1440 * 100%);
  top:calc(736.435 / 1024 * 100%);
  width:calc(388 / 1440 * 100%);
}

.process-12{
  right:calc(0 / 1440 * 100%);
  top:calc(0 / 1024 * 100%);
  width:calc(527.7421 / 1440 * 100%);
}

.process-13{
  right:calc(626.775 / 1440 * 100%);
  top:calc(736.435 / 1024 * 100%);
  width:calc(216.055 / 1440 * 100%);
}

/* Sketches */
.eternal-sketch-layout {
  position:absolute;
  left:calc(80 / 1440 * 100%);
  top:calc(150 / 1024 * 100%);
  width:calc(1280 / 1440 * 100%);
  height:calc(794 / 1024 * 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.eternal-sketch-layout img {
  display:block;
  width:auto;
  max-width:87.5%;
  height:auto;
  max-height:98.24%;
  mix-blend-mode:multiply;
}

/* Filmstrip: desktop 1440 x 430 section */
.eternal-filmstrip { aspect-ratio:1440 / 430; }
.eternal-filmstrip h2 { top:calc(80 / 430 * 100%); }
.eternal-film {
  position:absolute;
  left:calc(98.9165 / 1440 * 100%);
  top:calc(150 / 430 * 100%);
  width:calc(1242.167 / 1440 * 100%);
  height:calc(248.481 / 430 * 100%);
}
.eternal-film img { width:100%; height:100%; object-fit:contain; }

/* Editorial: exact 1680 x 960 composition measured from editorial-bonds.pdf. */
.eternal-editorial {
  width:100%;
  max-width:1680px;
  aspect-ratio:1680 / 1040;
  height:auto;
  margin:0 auto;
  padding:0;
  position:relative;
  overflow:hidden;
}
.eternal-editorial h2 {
  position:absolute;
  left:calc(24 / 1680 * 100%);
  top:calc(13 / 1040 * 100%);
  z-index:20;
  margin:0;
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
  font-size:clamp(12px, calc(44 / 1680 * 100vw), 44px);
  font-weight:300;
  line-height:1;
}
.eternal-editorial-layout {
  position:absolute;
  left:0;
  top:calc(80 / 1040 * 100%);
  width:100%;
  height:calc(960 / 1040 * 100%);
}
.eternal-editorial-layout img {
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
}
.editorial-disclaimer {
  right:calc(238.9649 / 1680 * 100%);
  top:calc(10.8574 / 960 * 100%);
  width:calc(235.4443 / 1680 * 100%);
  height:auto;
}

.editorial-02 {
  left:calc(238.25 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-01 {
  left:calc(389.45 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-03 {
  left:calc(541.31 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-04 {
  left:calc(692.51 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-32 {
  left:calc(845.02 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-30 {
  left:calc(996.22 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-31 {
  left:calc(1146.76 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-29 {
  left:calc(1299.27 / 1680 * 100%);
  top:calc(39.93 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-24 {
  left:calc(238.25 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-25 {
  left:calc(389.45 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-26 {
  left:calc(541.31 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-27 {
  left:calc(692.51 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-28 {
  left:calc(845.02 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-23 {
  left:calc(996.22 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-21 {
  left:calc(1146.76 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-22 {
  left:calc(1299.27 / 1680 * 100%);
  top:calc(262.47 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-15 {
  left:calc(238.25 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-18 {
  left:calc(389.45 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-13 {
  left:calc(541.31 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-19 {
  left:calc(692.51 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-17 {
  left:calc(845.02 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-14 {
  left:calc(996.22 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-20 {
  left:calc(1146.76 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-16 {
  left:calc(1299.27 / 1680 * 100%);
  top:calc(484.36 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-08 {
  left:calc(238.25 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-07 {
  left:calc(389.45 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-12 {
  left:calc(541.31 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-06 {
  left:calc(692.51 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-10 {
  left:calc(845.02 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-09 {
  left:calc(996.22 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-05 {
  left:calc(1146.76 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

.editorial-11 {
  left:calc(1299.27 / 1680 * 100%);
  top:calc(706.91 / 960 * 100%);
  width:calc(142 / 1680 * 100%);
}

/* Runway: desktop 1440 x 1174 section and 1281 x 1024 inner layout */
.eternal-runway { aspect-ratio:1440 / 1174; }
.eternal-runway h2 { top:calc(80 / 1174 * 100%); }
.eternal-runway-layout {
  position:absolute;
  left:calc(79.5 / 1440 * 100%);
  top:calc(150 / 1174 * 100%);
  width:calc(1281 / 1440 * 100%);
  height:calc(1024 / 1174 * 100%);
}
.eternal-runway-layout img {
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
}
.runway-01 {
  left:calc(1 / 1281 * 100%);
  top:calc(35.396 / 1024 * 100%);
  width:calc(312.852 / 1281 * 100%);
}

.runway-02 {
  left:calc(363.714 / 1281 * 100%);
  top:0;
  width:calc(282.906 / 1281 * 100%);
}

.runway-03 {
  left:calc(1049.293 / 1281 * 100%);
  top:calc(44.765 / 1024 * 100%);
  width:calc(231.592 / 1281 * 100%);
}

.runway-04 {
  left:calc(695.26 / 1281 * 100%);
  top:calc(42.683 / 1024 * 100%);
  width:calc(298.951 / 1281 * 100%);
}

.runway-05 {
  left:0;
  top:calc(596.204 / 1024 * 100%);
  width:calc(250.88 / 1281 * 100%);
}

.runway-06 {
  left:calc(303.318 / 1281 * 100%);
  top:calc(540.278 / 1024 * 100%);
  width:calc(233.625 / 1281 * 100%);
}

.runway-07 {
  left:calc(589.903 / 1281 * 100%);
  top:calc(561.98 / 1024 * 100%);
  width:calc(309.12 / 1281 * 100%);
}

.runway-08 {
  left:calc(950.192 / 1281 * 100%);
  top:calc(526.922 / 1024 * 100%);
  width:calc(330.525 / 1281 * 100%);
}

/* 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:right;
}
.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; }

@media (orientation:landscape) {
  :root { --project-max-width:1194px; }
}


/* Current Eternal Bonds markup repair. */
.eternal-opening,
.eternal-moodboard,
.eternal-process,
.eternal-runway {
  width:100%;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.eternal-opening {
  aspect-ratio:440 / 772;
}

.eternal-statement {
  position:absolute;
  left:calc(76.7822 / 440 * 100%);
  top:calc(284.546 / 772 * 100%);
  width:calc(286.4355 / 440 * 100%);
  margin:0;
  font-size:clamp(16px, 2.15vw, 22px);
  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-opening-image {
  position:absolute;
  left:calc(74.1413 / 440 * 100%);
  top:calc(20.016 / 772 * 100%);
  width:calc(291.7175 / 440 * 100%);
  height:auto;
}

.eternal-moodboard,
.eternal-process {
  aspect-ratio:1440 / 1174;
}

.eternal-moodboard h2,
.eternal-sketches h2,
.eternal-process h2,
.eternal-runway h2 {
  position:absolute;
  left:calc(24 / 1440 * 100%);
  top:calc(55 / 1174 * 100%);
  z-index:30;
  margin:0;
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
  font-size:clamp(20px, 3vw, 36px);
  font-weight:300;
  line-height:1;
}

.eternal-sketches {
  width:100%;
  aspect-ratio:440 / 772;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.eternal-sketches-canvas {
  position:absolute;
  left:0;
  top:calc(64 / 772 * 100%);
  width:100%;
  height:100%;
}

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

.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%); }

.eternal-runway {
  aspect-ratio:1440 / 1174;
}

.runway-outline {
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

@media (orientation:landscape) {
  main {
    max-width:1194px;
  }
}


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

.eternal-editorial .project-photography-credit {
  position:absolute;
  left:auto;
  right:calc(238.73 / 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;
}