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

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

html {
  overflow-x:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
}

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

/* =========================================================
   SHARED 1600 × 960ARTBOARD
   ========================================================= */

.landing{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  max-width: 1680px;

  aspect-ratio: 1600 / 880;

  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top:80px

}

.project-preview,
.about {
  scroll-snap-align: start;
  scroll-snap-stop: always;

  width: calc(100% - 80px);
  max-width: 1600px;
  aspect-ratio: 1600 / 960;

  margin-inline: auto;
  position: relative;
  overflow: hidden;
}


/* Images use the section as their positioning canvas */

.landing img,
.project-preview img,
.about img {
  position: absolute;
  display: block;

  height: auto;

  margin: 0;
}

/* LANDING */

.landing {
  width:calc(100% - 80px);
  max-width:1600px;
  aspect-ratio:1680 / 880;
  padding-top:80px;
  margin:0 auto;
  position:relative;
}

.landing-image {
  position:absolute;
  left:calc(0 / 1600 * 100%);
  bottom:calc(0 / 880 * 100%);
  width:calc(175 / 1600 * 100%);
  height:auto;
}

.landing-statement {
  position:absolute;
  left: calc(1285.1505 / 1600 * 100%);
  top: calc(236.5131 / 880 * 100%);
  width: calc(314.8495 / 1600 * 100%);
}

/* PROJECT PREVIEW */

.project-preview a {
  display:inline;
}

.project-preview {
  width: calc(100% - 80px);
  aspect-ratio:1600 / 960;
  margin-inline: auto;
  position:relative;
  overflow:hidden;
}


.project-preview.eternal-bonds img,
.project-preview.catelier img {
  position: absolute;
  display: block;
  height: auto;
}

/*
  =========================================================
  ETERNAL BONDS SECTION
  =========================================================
*/

.eternal-bonds-01 {
  left: calc(566.0528 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(183.9472 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-02 {
  left: calc(1377.8804 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(222.1196 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-03 {
  left: calc(850 / 1600 * 100%);
  top: calc(377.9398 / 960 * 100%);
  width: calc(142.5546 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-04 {
  left: calc(1182.6045 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(146.3115 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-05 {
  left: calc(1024.8898 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(189.4747 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-06 {
  left: calc(850 / 1600 * 100%);
  top: calc(688.7118 / 960 * 100%);
  width: calc(750 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-07 {
  left: calc(1076.543 / 1600 * 100%);
  top: calc(240.0177 / 960 * 100%);
  width: calc(184.7513 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-08 {
  left: calc(1430.4126 / 1600 * 100%);
  top: calc(376.6692 / 960 * 100%);
  width: calc(169.5874 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-09 {
  left: calc(628.0424 / 1600 * 100%);
  top: calc(299.9517 / 960 * 100%);
  width: calc(121.9576 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-10 {
  left: calc(850 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(247.6537 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-11 {
  left: calc(1243.6378 / 1600 * 100%);
  top: calc(339.57 / 960 * 100%);
  width: calc(227.1062 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-12 {
  left: calc(0 / 1600 * 100%);
  top: calc(189.9685 / 960 * 100%);
  width: calc(272.2965 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-13 {
  left: calc(0 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(311.6465 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-14 {
  left: calc(529.8506 / 1600 * 100%);
  top: calc(527.7235 / 960 * 100%);
  width: calc(220.1494 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-bonds-15 {
  left: calc(0 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(578.2665 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-title {
  left: calc(399.6416 / 1600 * 100%);
  bottom: calc(0 / 960 * 100%);
  width: calc(350.3584 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-text {
  left: calc(850 / 1600 * 100%);
  top: calc(563.5977 / 960 * 100%);
  width: calc(498.2514 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.eternal-disclaimer {
  left: calc(594.7017 / 1600 * 100%);
  bottom: calc(39.7706 / 960 * 100%);
  width: calc(151.9551 / 1600 * 100%);
  mix-blend-mode: multiply;
}

/*
  =========================================================
  REFLECTIONS SECTION
  =========================================================
*/

.reflections-of-displacement-01 {
  left: calc(1488.4564 / 1600 * 100%);
  top: calc(330.6815 / 960 * 100%);
  width: calc(111.5436 / 1600 * 100%);
}

.reflections-of-displacement-02 {
  left: calc(457.4053 / 1600 * 100%);
  top: calc(580.1492 / 960 * 100%);
  width: calc(111.8588 / 1600 * 100%);
}

.reflections-of-displacement-03 {
  left: calc(850 / 1600 * 100%);
  top: calc(206.1685 / 960 * 100%);
  width: calc(202.1253 / 1600 * 100%);
}

.reflections-of-displacement-04 {
  left: calc(1256.4058 / 1600 * 100%);
  top: calc(233.2893 / 960 * 100%);
  width: calc(214.3942 / 1600 * 100%);
}

.reflections-of-displacement-05 {
  left: calc(1481.8313 / 1600 * 100%);
  top: calc(570.5983 / 960 * 100%);
  width: calc(116.7583 / 1600 * 100%);
}

.reflections-of-displacement-06 {
  left: calc(1012.9793 / 1600 * 100%);
  top: calc(155.1194 / 960 * 100%);
  width: calc(202.2318 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.reflections-of-displacement-07 {
  left: calc(1168.6492 / 1600 * 100%);
  top: calc(88.6185 / 960 * 100%);
  width: calc(196.6013 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.reflections-of-displacement-08 {
  left: calc(524.4 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(225.6 / 1600 * 100%);
}

.reflections-of-displacement-09 {
  left: calc(850 / 1600 * 100%);
  top: calc(546.3619 / 960 * 100%);
  width: calc(293.6286 / 1600 * 100%);
}

.reflections-of-displacement-10 {
  left: calc(638.3077 / 1600 * 100%);
  top: calc(603.0403 / 960 * 100%);
  width: calc(111.6923 / 1600 * 100%);
}

.reflections-of-displacement-11 {
  left: calc(1231.2631 / 1600 * 100%);
  top: calc(4.2904 / 960 * 100%);
  width: calc(207.882 / 1600 * 100%);
}

.reflections-of-displacement-12 {
  left: calc(325.8808 / 1600 * 100%);
  top: calc(146.9803 / 960 * 100%);
  width: calc(224.5986 / 1600 * 100%);
}

.reflections-of-displacement-13 {
  left: calc(850 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(367.2 / 1600 * 100%);
}

.reflections-of-displacement-14 {
  left: calc(1428.4823 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(171.9177 / 1600 * 100%);
}

.reflections-of-displacement-15 {
  left: calc(0 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(470.3872 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.reflections-of-displacement-16 {
  left: calc(464.8576 / 1600 * 100%);
  top: calc(790.1261 / 960 * 100%);
  width: calc(203.5618 / 1600 * 100%);
}

.reflections-of-displacement-17 {
  left: calc(422.4265  / 1600 * 100%);
  top: calc(357.4365 / 960 * 100%);
  width: calc(324.9905 / 1600 * 100%);
}

.reflections-of-displacement-18 {
  left: calc(363.7849 / 1600 * 100%);
  top: calc(0 / 960 * 100%);
  width: calc(110.364 / 1600 * 100%);
}

.reflections-of-displacement-19 {
  left: calc(1128.933 / 1600 * 100%);
  top: calc(445.8027 / 960 * 100%);
  width: calc(122.1217 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.reflections-title {
  left: calc(850 / 1600 * 100%);
  top: calc(793.3881 / 960 * 100%);
  width: calc(602.8322 / 1600 * 100%);
}

.reflections-disclaimer {
  left: calc(1202.8322 / 1600 * 100%);
  top: calc(889.2753 / 960 * 100%);
  width: calc(250 / 1600 * 100%);
}

/*
  =========================================================
  CATELIER SECTION
  =========================================================
*/

.project-preview.catelier {
  /* Snap Catelier’s beginning below the fixed header */
  scroll-snap-align: start;
  scroll-snap-stop: normal;

  /* Preserve your canvas width but allow vertical expansion */
  position: relative;
  width: 100%;
  min-height: 1250px;
  height: auto;
}

.catelier-scroll-section {
  width: 100%;
  max-width: 1600px;
  height: 1250px;
  margin-inline: auto;

  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: calc(0 / 1250 * 100vh);
}

.catelier-scroll-window {
  width: 100%;
  height: 960px;

  overflow-x: hidden;
  overflow-y: auto;

  -webkit-overflow-scrolling: touch;
}

.catelier-scroll-window > .project-preview.catelier {
  position: relative;

  width: 100%;
  height: 1250px;
  min-height: 1250px;
  max-width: 1600px;

  aspect-ratio: auto;
  margin: 0 auto;
  overflow: hidden;

  scroll-snap-align: none;
}

.project-preview.catelier {
  margin-top: 0;
  isolation: isolate;
}

.project-preview.catelier img{
  mix-blend-mode: multiply;
}

.catelier-01 {
  left: calc(850 / 1600 * 100%);
  top: calc(266.7343 / 1250 * 100%);
  width: calc(176.3153 / 1600 * 100%);
  mix-blend-mode: multiply;

}

.catelier-02 {
  left: calc(-15.7926 / 1600 * 100%);
  top: calc(162.4335 / 1250 * 100%);
  width: calc(280.2321 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-03 {
  left: calc(198.6356  / 1600 * 100%);
  top: calc(527.7211 / 1250 * 100%);
  width: calc(333.4491 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-04 {
  left: calc(850 / 1600 * 100%);
  top: calc(0 / 1250 * 100%);
  width: calc(245.4944 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-05 {
  left: calc(398.9064 / 1600 * 100%);
  top: calc(0 / 1250 * 100%);
  width: calc(349.8736 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-06 {
  left: calc(519.2256/ 1600 * 100%);
  top: calc(193.9832 / 1250 * 100%);
  width: calc(257.6574 / 1600 * 100%);
  mix-blend-mode: multiply;
  z-index:1;
}

.catelier-07 {
  left: calc(1069.5908 / 1600 * 100%);
  top: calc(451.5205  / 1250 * 100%);
  width: calc(124.2485 / 1600 * 100%);
  mix-blend-mode: multiply;
  z-index:0;
}

.catelier-08 {
  left: calc(344.1809 / 1600 * 100%);
  top: calc(-23.2993 / 1250 * 100%);
  width: calc(137.4001 / 1600 * 100%);
  mix-blend-mode: multiply;
  transform: rotate(27.5deg)
}

.catelier-09 {
  left: calc(939.3017 / 1600 * 100%);
  top: calc(44.5185 / 1250 * 100%);
  width: calc(349.9503 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-10 {
  left: calc(1274.2391 / 1600 * 100%);
  top: calc(0 / 1250 * 100%);
  width: calc(325.7609  / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-11 {
  left: calc(1198.8253 / 1600 * 100%);
  top: calc(247.5 / 1250 * 100%);
  width: calc(401.1747 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-12 {
  left: calc(0 / 1600 * 100%);
  top: calc(657.0328 / 1250 * 100%);
  width: calc(436.5031 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-13 {
  left: calc(220.3875 / 1600 * 100%);
  top: calc(226.3752 / 1250 * 100%);
  width: calc(115.6779 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-14 {
  left: calc(335.4064 / 1600 * 100%);
  top: calc(301.5456 / 1250 * 100%);
  width: calc(246.5636 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-15 {
  left: calc(850 / 1600 * 100%);
  top: calc(550.3372 / 1250 * 100%);
  width: calc(232.0597 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-16 {
  left: calc(531.0422 / 1600 * 100%);
  top: calc(553 / 1250 * 100%);
  width: calc(206.7682 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-title {
  left: calc(564.4813 / 1600 * 100%);
  top: calc(829.3257 / 1250 * 100%);
  width: calc(185.5187 / 1600 * 100%);
  mix-blend-mode: multiply;
}

.catelier-text {
  left: calc(0 / 1600 * 100%);
  top: calc(0 / 1250 * 100%);
  width: calc(382.585 / 1600 * 100%);
  mix-blend-mode: multiply;

}

.end-of-preview {
  left: calc(709.5748 / 1600 * 100%);
  bottom: calc(20 / 1250 * 100%);
  width: calc(180.8503 / 1600 * 100%);
}

/* ABOUT */

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

.about {
  width: calc(100% - 80px);
  aspect-ratio:1600 / 625;
  margin-inline: auto;
  position:relative;
  overflow:hidden;
}


.about img {
  position:absolute;
  left: calc(403.3516 / 1600 * 100%);
  top: calc(89.9269 / 625 * 100%);
  width: calc(333.6017 / 1600 * 100%);
  height: auto;
}

.about-text {
  position:absolute;
  left: calc(817.7578 / 1600 * 100%);
  top: calc(215.2431 / 625 * 100%);
  width: calc(378.8906 / 1600 * 100%);
  height: auto;
  margin:0;
  font-family:"futura-pt-condensed", sans-serif;
  font-size:36px;
  font-weight:100;
  font-style:italic;
  line-height:1.28;
  letter-spacing:-0.25px;
}

.location {
  color:#006837;
}

.about-text p {
  margin:0;
}

.about-text p + p {
  margin-top:24px;
}

/* =========================================================
   BACK TO TOP

   Original SVG:
   X: 197.995
   Y: 814.707
   W: 54.67

   Relative Y:
   814.707 - 200 = 614.707
   ========================================================= */

.back-to-top-text {
  position:absolute;
  left: calc(1486.6472 / 1600 * 100%);
  top: calc(571.4227 / 625 * 100%);
  width: calc(100 / 1600 * 100%);
  height: auto;
  margin: 0;

  transform: translate(-50%, -50%);

  font-family: "futura-pt-condensed", sans-serif;
  font-size: clamp(16px, 4.1vw, 26px);
  font-weight: 300;
  font-style: italic;
  line-height: 1;

  text-align: center;
  white-space: nowrap;
}

.back-to-top-text a {
  position: relative;
  display: inline-block;

  color: var(--black);
  text-decoration: none;
}

.back-to-top-text a::before {
  content: "";

  position: absolute;
  inset: -14px -22px;
}

/* FOOTER */

.footer {
  width:1680px;
  height:510px;
  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;
  left:80px;
  right:80px;
  border-top:1px solid rgba(0, 0, 0, 0.18);
}

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

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

/* IMAGE LIGHTBOX */

.image-lightbox-trigger {
  cursor:zoom-in;
}

body.lightbox-open {
  overflow:hidden;
}

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

.image-lightbox {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:rgba(255, 255, 255, 0.96);
  cursor:zoom-out;
}

.image-lightbox-image {
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 80px);
  max-height:calc(100vh - 80px);
  object-fit:contain;
  cursor:default;
}.image-lightbox-trigger:focus-visible {
  outline:2px solid black;
  outline-offset:4px;
}


/* Hide all mobile navigation on desktop */

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

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

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

.reflections + .catelier-scroll-section {
  margin-top: calc(100 / 960 * 100vh);
}

.catelier-scroll-section + .about {
  margin-top: calc(100 / 960 * 100vh);
}

.about + .footer {
  margin-top: calc(-50 / 960 * 100vh);
}

/* FINAL HOMEPAGE SCREEN: ABOUT + FOOTER */

.homepage-final-screen {
  width:100%;
  height:calc(100svh - 80px);
  margin:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.homepage-final-screen .about {
  flex:1 1 auto;
  min-height:0;
  margin:0 auto;
  aspect-ratio:auto;
  scroll-snap-align:none;
  scroll-snap-stop:normal;
}

.homepage-final-screen .footer {
  width:100%;
  max-width:1680px;
  height:170px;
  min-height:170px;
  margin:0 auto;
  padding:24px 80px 18px;
  flex:0 0 170px;
  gap:24px;
}

.homepage-final-screen .footer::before {
  top:0;
}