/*
  HOMEPAGE TABLET TEMPLATE

  Portrait artboard: 812 x 1062
  Landscape artboard: 1194 x 638
  Header: 64px and excluded from both artwork frames.

  Fill every 0 below with the matching Illustrator measurement.
  Horizontal values use the artboard width.
  Vertical values use the artboard height.
*/

:root {
  --header-height: 64px;
  --tablet-margin: 2.5%;
  --black: #000;
  --white: #fff;
  --gray: #888;
  --green: #006837;
}

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

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

.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: 1062px;
  height: auto;
}

html.is-zoomed {
  scroll-snap-type: none;
}

body {
  overflow-x: hidden;
  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;
}input,
textarea,
select {
  font: inherit;
}

main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* HEADER */


/* =========================================================
   SHARED812 × 1062 ARTBOARD
   ========================================================= */

.landing,
.project-preview:not(.catelier),
.about,
.end-of-preview {
  scroll-snap-align: start;
  scroll-snap-stop: always;

  width: 100%;
  max-width:812px;

  aspect-ratio:812 / 1062;

  margin-right: auto;
  margin-left: auto;

  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;

}


.landing {
  scroll-margin-top: var(--header-height);
}


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

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

  height: auto;

  margin: 0;
}

/*
  Do not add a generic width:auto rule for SVG files here.
  Each title/text SVG must keep its individual calculated width.
*/

.project-preview a {
  display: inline;
}

.project-preview.catelier {
  isolation: isolate;
}

/* END OF PREVIEWS */

.end-of-preview {
  width: 100%;
  min-height: 140px;
  padding: 48px var(--tablet-margin);
  display: grid;
  place-items: center;
}

.end-of-preview-text {
  margin: 0;
  text-align: center;
  font-size: clamp(28px, 4vw, 38px);
  font-style: italic;
  font-weight: 100;
}

/* 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;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 96%);
  cursor: zoom-out;
}

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

/* TABLET PORTRAIT:812 x 1062 */

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

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

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

.reflections + .catelier-scroll-section {
  margin-top: calc(84 / 1062 * 100vw);
}

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

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


@media (orientation: portrait) {
  .about-text {
    position: absolute;
  }

  .landing,
  .project-preview {
    max-width:812px;
    aspect-ratio:812 / 998;
  }

  .landing-image {
    left: calc(0 /812 * 100%);
    bottom: calc(0 / 998 * 100%);
    width: calc(200 /812 * 100%);
    position: absolute;
  }

  .landing-statement {
    position: absolute;
    left: calc(583.734 /812 * 100%);
    top: calc(268.22 / 998 * 100%);
    width: calc(228.266 /812 * 100%);
    height: auto;
  }

   .project-section {
    min-height: calc(100dvh - 64px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .project-preview {
    position: relative;
    width: 100%;
    max-width:812px;
    aspect-ratio:812 / 1062;
    flex: 0 0 auto;
  }

  /*
    ================================
    Eternal Bonds
    ================================
  */

  .eternal-bonds-01 {
    left: calc(453.4469 /812 * 100%);
    top: calc(455.1738 / 1062 * 100%);
    width: calc(131.521 /812 * 100%);
  }

  .eternal-bonds-02 {
    left: calc(0 /812 * 100%);
    top: calc(162.1695 / 1062 * 100%);
    width: calc(163.6779 /812 * 100%);
  }

  .eternal-bonds-03 {
    left: calc(659.5354 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(152.4646 /812 * 100%);
  }

  .eternal-bonds-04 {
    left: calc(0 /812 * 100%);
    top: calc(436.0117 / 1062 * 100%);
    width: calc(143.6855 /812 * 100%);
  }

  .eternal-bonds-05 {
    left: calc(0 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(145.9441 /812 * 100%);
  }

  .eternal-bonds-06 {
    left: calc(272.5025 /812 * 100%);
    top: calc(723.94 / 1062 * 100%);
    width: calc(538.9612 /812 * 100%);
  }

  .eternal-bonds-07 {
    left: calc(303.1744 /812 * 100%);
    top: calc(484.2786 / 1062 * 100%);
    width: calc(156.4507 /812 * 100%);
  }

  .eternal-bonds-08 {
    left: calc(640.2612 /812 * 100%);
    top: calc(244.9417 / 1062 * 100%);
    width: calc(171.7388 /812 * 100%);
  }

  .eternal-bonds-09 {
    left: calc(593.8047 /812 * 100%);
    top: calc(468.5877 / 1062 * 100%);
    width: calc(108.4965 /812 * 100%);
  }

  .eternal-bonds-10 {
    left: calc(117.9195 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(238.373 /812 * 100%);
  }

  .eternal-bonds-11 {
    left: calc(290.2747 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(104.7084 /812 * 100%);
  }

  .eternal-bonds-12 {
    left: calc(176.9129 /812 * 100%);
    top: calc(364.812 / 1062 * 100%);
    width: calc(234.7613 /812 * 100%);
  }

  .eternal-bonds-13 {
    left: calc(300.7528 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(364.755 /812 * 100%);
  }

  .eternal-bonds-14 {
    left: calc(386.7033 /812 * 100%);
    top: calc(219.4485 / 1062 * 100%);
    width: calc(267.0238 /812 * 100%);
  }

  .eternal-bonds-15 {
    left: calc(0 /812 * 100%);
    top: calc(502.9755 / 1062 * 100%);
    width: calc(305.0687 /812 * 100%);
  }

  .eternal-title {
    left: calc(438.8546 /812 * 100%);
    bottom: calc(0 / 1062 * 100%);
    width: calc(373.1456 /812 * 100%);
  }

  .eternal-text {
    left: calc(449.4955 /812 * 100%);
    top: calc(642.8676 / 1062 * 100%);
    width: calc(362.5045 /812 * 100%);
  }

  .eternal-disclaimer {
    left: calc(667.0588 /812 * 100%);
    bottom: calc(42.8833 / 1062 * 100%);
    width: calc(144.9414 /812 * 100%);
  }

  /*
    ================================
    Reflections
    ================================
  */

  .reflections-of-displacement-01 {
    left: calc(532.0079 /812 * 100%);
    top: calc(279.392 / 1062 * 100%);
    width: calc(78.2812 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-02 {
    left: calc(608.4222 /812 * 100%);
    top: calc(587.2376 / 1062 * 100%);
    width: calc(62.0701 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-03 {
    left: calc(654.1311 /812 * 100%);
    top: calc(590.8951 / 1062 * 100%);
    width: calc(157.8689 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-04 {
    left: calc(340.475 /812 * 100%);
    top: calc(463.6475 / 1062 * 100%);
    width: calc(152.7137 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-05 {
    left: calc(726.5062 /812 * 100%);
    top: calc(268.1078 / 1062 * 100%);
    width: calc(85.4938 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-06 {
    left: calc(518.5526 /812 * 100%);
    top: calc(-16.0269 / 1062 * 100%);
    width: calc(173.8634 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-07 {
    left: calc(569.8618 /812 * 100%);
    top: calc(225.7586 / 1062 * 100%);
    width: calc(174.9161 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-08 {
    left: calc(383.981 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(165.1909 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-09 {
    left: calc(606.699 /812 * 100%);
    top: calc(424.72 / 1062 * 100%);
    width: calc(205.301 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-10 {
    left: calc(480.3424 /812 * 100%);
    top: calc(449.2781 / 1062 * 100%);
    width: calc(68.8296 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-11 {
    left: calc(467.5464 /812 * 100%);
    top: calc(746.9455 / 1062 * 100%);
    width: calc(185.1147 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-12 {
    left: calc(238.6195 /812 * 100%);
    top: calc(107.6233 / 1062 * 100%);
    width: calc(164.4577 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-13 {
    left: calc(0 /812 * 100%);
    top: calc(680.9732 / 1062 * 100%);
    width: calc(331.023 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-14 {
    left: calc(672.8529 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(139.1471 /812 * 100%);
    mix-blend-mode: multiply;
  }

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

  .reflections-of-displacement-16 {
    left: calc(329.4023 /812 * 100%);
    top: calc(418.3238 / 1062 * 100%);
    width: calc(170.334 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-17 {
    left: calc(301.8421 /812 * 100%);
    top: calc(245.8811 / 1062 * 100%);
    width: calc(245.4385 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-18 {
    left: calc(266.3739 /812 * 100%);
    top: calc(0 / 1062 * 100%);
    width: calc(80.8118 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-of-displacement-19 {
    left: calc(525.4059 /812 * 100%);
    top: calc(535.3063 / 1062 * 100%);
    width: calc(89.4211 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-title {
    left: calc(169.606 /812 * 100%);
    bottom: calc(0 / 1062 * 100%);
    width: calc(641.1653 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .reflections-disclaimer {
    left: calc(544.8742 /812 * 100%);
    top: calc(985.688 / 1062 * 100%);
    width: calc(265.897 /812 * 100%);
    mix-blend-mode: multiply;
  }

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

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

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

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

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

    -webkit-overflow-scrolling: touch;
  }

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

    width: 100%;
    height: 1141px;
    min-height: 1141px;
    max-width:812px;

    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 IMAGES
    ================================
  */

  .catelier-01 {
    left: calc(638.2859 /812 * 100%);
    top: calc(0 / 1141 * 100%);
    width: calc(184.7141 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-02 {
    left: calc(68.8251 /812 * 100%);
    top: calc(144.0244 / 1141 * 100%);
    width: calc(159.0003 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-03 {
    left: calc(494.1991 /812 * 100%);
    top: calc(336.0093 / 1141 * 100%);
    width: calc(227.9481 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-04 {
    left: calc(233.3353 /812 * 100%);
    top: calc(215.488 / 1141 * 100%);
    width: calc(184.6796 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-05 {
    left: calc(177.9317 /812 * 100%);
    top: calc(0 / 1141 * 100%);
    width: calc(307.0739 /812 * 100%);
  }

  .catelier-06 {
    left: calc(517.3673 /812 * 100%);
    top: calc(424.1198 / 1141 * 100%);
    width: calc(188.8621 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-07 {
    left: calc(11 /812 * 100%);
    top: calc(163.5584 / 1141 * 100%);
    width: calc(71.4385 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-08 {
    left: calc(507.9112 /812 * 100%);
    top: calc(-25.2 / 1141 * 100%);
    width: calc(112.1212 /812 * 100%);
    mix-blend-mode: multiply;
    transform: rotate(27.5deg)
  }

  .catelier-09 {
    left: calc(187.93 /812 * 100%);
    top: calc(390.5884 / 1141 * 100%);
    width: calc(225.3721 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-10 {
    left: calc(398.9441 /812 * 100%);
    top: calc(379.5989 / 1141 * 100%);
    width: calc(146.8524 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-11 {
    left: calc(11 /812 * 100%);
    top: calc(390.7485 / 1141 * 100%);
    width: calc(261.7594 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-12 {
    left: calc(400.5968 /812 * 100%);
    top: calc(697.016 / 1141 * 100%);
    width: calc(422.4032 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-13 {
    left: calc(675.0951 /812 * 100%);
    top: calc(217.3208 / 1141 * 100%);
    width: calc(147.9049 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-14 {
    left: calc(11 /812 * 100%);
    top: calc(0 / 1141 * 100%);
    width: calc(161.2717 /812 * 100%);
  }

  .catelier-15 {
    left: calc(276.0352 /812 * 100%);
    top: calc(622.5175 / 1141 * 100%);
    width: calc(127.0385 /812 * 100%);
  }

  .catelier-16 {
    left: calc(377.0861 /812 * 100%);
    top: calc(462.8158 / 1141 * 100%);
    width: calc(172.0839 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-title {
    left: calc(614.0278  /812 * 100%);
    top: calc(858.5539 / 1141 * 100%);
    width: calc(197.9722 /812 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-text {
    left: calc(398.9823 /812 * 100%);
    top: calc(219.5027 / 1141 * 100%);
    width: calc(328.5636 /812 * 100%);
    mix-blend-mode: multiply;
  }


/*
=========================================================
SEE MORE WORK
=========================================================
*/

  .end-of-preview {
    left: calc(315.5749 /812 * 100%);
    top: calc(1102.9426 / 1141 * 100%);
    width: calc(180.8503 /812 * 100%);
  }


/*
  =========================================================
  ABOUT
  =========================================================
*/

  .about {
    min-height: 620px;
    padding: 64px var(--tablet-margin);
  }

  .about h2{
    position: absolute;

    left: calc(53.6346 / 834 * 100%);
    top: calc(59.347 / 1062 * 100%);
    width: calc(150 / 834 * 100%);
    height:59.5928;

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

    color: var(--black);

    z-index: 3;
  }

  .about img{
    left: calc(239.1992 /812 * 100%);
    top: calc(159.17 / 1062 * 100%);
    width: calc(333.6017 /812 * 100%);
  }

  .about-text {
    left: calc(216.5547 /812 * 100%);
    top: calc(644.3162 / 1062 * 100%);
    width: calc(378.8906 /812 * 100%);
    margin: 0;
    font-size: clamp(28px, 3.6vw, 38px);
    font-style: italic;
    font-weight: 100;
    line-height: 1.28;
  }

  .about-text p {
    margin: 0;
  }

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

  .location {
    color: var(--green);
  }


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

  .back-to-top-text {
    position: absolute;

    left: calc(693.7782 / 834 * 100%);
    top: calc(940.4583 / 1062 * 100%);;

    width: calc(100 / 834 * 100%);
    margin: 0;

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

    font-family: "futura-pt-condensed", sans-serif;
    font-size: clamp(16px, 4.1vw, 18px);
    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: 100%;
    min-height: 360px;
    margin: 64px auto 0;
    padding: 48px var(--tablet-margin) 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 56px;
    color: var(--gray);
  }

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

  .footer-divider {
    width: 2px;
    height: 44px;
    background: var(--gray);
  }

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

  .footer-social img {
    filter: brightness(0) invert(75%);
  }

  .footer-name,
  .footer-email {
    white-space: nowrap;
    font-size: clamp(20px, 3vw, 28px);
  }

  .footer-copyright {
    margin: 0;
    font-size: clamp(22px, 3vw, 30px);
  }
}


/* TABLET LANDSCAPE: 1194 x 796 */

@media (orientation: landscape) {

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

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

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

  .reflections + .catelier-scroll-section {
    margin-top: calc(84 / 796 * 100vw);
  }

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

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

  .landing,
  .project-preview {
    max-width: 1194px;
    aspect-ratio: 1194 / 638;
  }

  .landing-image {
    left: calc(0 / 1194 * 100%);
    top: calc(374.2031 / 638 * 100%);
    width: calc(149.25 / 1194 * 100%);
  }

  .landing-statement {
    position: absolute;
    left: calc(943.734 / 1194 * 100%);
    top: calc(171.472 / 638 * 100%);
    width: calc(228.266 / 1194 * 100%);
    margin: 0;
  }

  .eternal-bonds-01 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-02 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-03 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-04 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-05 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-06 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-07 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-08 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-09 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-10 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-11 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-12 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-13 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-14 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-bonds-15 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-title {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-text {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .eternal-disclaimer {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-01 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-02 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-03 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-04 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-05 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-06 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-07 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-08 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-09 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-10 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-11 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-12 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-13 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-14 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-15 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-16 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-17 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-18 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-of-displacement-19 {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-title {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  .reflections-disclaimer {
    left: calc(0 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 / 1194 * 100%);
  }

  /*
    ================================
    Catelier
    ================================
  */

  .catelier-01 {
    left: calc(1062.2859 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(184.7141 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-02 {
    left: calc(803.0691 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(200.0657 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-03 {
    left: calc(334.6637 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(227.9481 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-04 {
    left: calc(622.6667 / 1194 * 100%);
    top: calc(222.9667 / 638 * 100%);
    width: calc(200.7473 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-05 {
    left: calc(875.9261 / 1194 * 100%);
    top: calc(408.1694 / 638 * 100%);
    width: calc(307.0739 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-06 {
    left: calc(-9.4534 / 1194 * 100%);
    top: calc(129.606 / 638 * 100%);
    width: calc(166.9069 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-07 {
    left: calc(284.4512 / 1194 * 100%);
    top: calc(246.1639 / 638 * 100%);
    width: calc(48.0418 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-08 {
    left: calc(804.2179 / 1194 * 100%);
    top: calc(285.6476 / 638 * 100%);
    width: calc(157.991 / 1194 * 100%);
    mix-blend-mode: multiply;
    transform: rotate(27.5deg);
  }

  .catelier-09 {
    left: calc(198.7902 / 1194 * 100%);
    top: calc(50.9091 / 638 * 100%);
    width: calc(202.635 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-10 {
    left: calc(360.4668 / 1194 * 100%);
    top: calc(354.1383 / 638 * 100%);
    width: calc(182.8899 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-11 {
    left: calc(374.8329 / 1194 * 100%);
    top: calc(103.2661 / 638 * 100%);
    width: calc(130.8797 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-12 {
    left: calc(11 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(313.7141 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-13 {
    left: calc(736.0884 / 1194 * 100%);
    top: calc(316.4294 / 638 * 100%);
    width: calc(87.3255 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-14 {
    left: calc(996.5212 / 1194 * 100%);
    top: calc(233.2799 / 638 * 100%);
    width: calc(186.4788 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-15 {
    left: calc(130.4269 / 1194 * 100%);
    top: calc(120.0345 / 638 * 100%);
    width: calc(127.0385 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-16 {
    left: calc(622 / 1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(172.0839 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-title {
    left: calc(374.0278 / 1194 * 100%);
    top: calc(498.5539 / 638 * 100%);
    width: calc(197.9722 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  .catelier-text {
    left: calc(11 / 1194 * 100%);
    top: calc(369.1623 / 638 * 100%);
    width: calc(328.5636 / 1194 * 100%);
    mix-blend-mode: multiply;
  }

  /* ABOUT */

  .about {
    min-height: 620px;
    padding: 64px var(--tablet-margin);
  }

  .about h2{
    position: absolute;

    left: calc(53.6346 / 834 * 100%);
    bottom: calc(59.347 / 1062 * 100%);
    width: calc(82.8271 / 834 * 100%);
    height:59.5928;

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

    color: var(--black);

    z-index: 3;
  }

  .about img{
    left: calc(0 /1194 * 100%);
    top: calc(0 / 638 * 100%);
    width: calc(0 /1194 * 100%);
  }

  .about-text {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 38px);
    font-style: italic;
    font-weight: 100;
    line-height: 1.28;
  }

  .about-text p {
    margin: 0;
  }

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

  .location {
    color: var(--green);
  }

  /* FOOTER */

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

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

  .footer-divider {
    width: 2px;
    height: 44px;
    background: var(--gray);
  }

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

  .footer-social img {
    filter: brightness(0) invert(75%);
  }

  .footer-name,
  .footer-email {
    white-space: nowrap;
    font-size: clamp(20px, 3vw, 28px);
  }

  .footer-copyright {
    margin: 0;
    font-size: clamp(22px, 3vw, 30px);
  }

  /* 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;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 96%);
    cursor: zoom-out;
  }

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

}

/* FINAL HOMEPAGE SCREEN: ABOUT + FOOTER */

.homepage-final-screen {
  width:100%;
  height:calc(100svh - var(--header-height));
  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%;
  height:160px;
  min-height:160px;
  margin:0 auto;
  padding:20px var(--tablet-margin) 14px;
  flex:0 0 160px;
  gap:18px;
}

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