/* =========================================================
   PART 1
   VARIABLES, RESET, MAIN, HEADER AND MOBILE MENU

   Illustrator artboard: 440 × 956px
   Side margins: 22px
   Content width: 420px
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --artboard-width: 440;
  --artboard-height: 796;

  --mobile-margin: 2.5%;
  --mobile-content-width: calc(100% - (var(--mobile-margin) * 2));

  --header-height: 64px;

  --black: #000;
  --white: #fff;
  --gray: #888;
  --green: #006837;
}

/* =========================================================
   RESET
   ========================================================= */

*,
*::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: var(--header-height);
}

.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: 836px;
  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;
}input,
textarea,
select {
  font: inherit;
}

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


/* =========================================================
   MAIN
   ========================================================= */

main {
  width: 100%;
  margin: 0;

  /* Prevents content from sitting beneath the fixed header */
  padding: var(--header-height) 0 0;
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */


/* =========================================================
   HEADER LEFT
   ========================================================= */


/* =========================================================
   HEADER CENTER
   ========================================================= */


/* =========================================================
   DESKTOP NAVIGATION
   Hidden in mobile.css
   ========================================================= */


/* =========================================================
   HAMBURGER BUTTON
   ========================================================= */


/* =========================================================
   HAMBURGER OPEN STATE
   Changes the three lines into an X
   ========================================================= */


/* =========================================================
   MOBILE DROPDOWN MENU
   ========================================================= */


/* =========================================================
   HEADER LINKS
   ========================================================= */


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

/* =========================================================
   PART 2
   SHARED ARTBOARDS, LANDING AND ETERNAL BONDS

   Illustrator artboard: 440 × 956px

   Landing and existing Eternal Bonds values are preserved.
   ========================================================= */


/* =========================================================
   SHARED 440 × 956 ARTBOARD
   ========================================================= */

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

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

  aspect-ratio: 440 / 732;

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

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

}


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

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

  height: auto;

  margin: 0;
}

@media (orientation: portrait) {
/* =========================================================
   LANDING
   Existing values preserved
   ========================================================= */

.landing{
aspect-ratio: 440 / 732;
}

.landing-image {
  position: absolute;
  left: calc(11 / 440 * 100%);
  bottom: calc(0 / 732 * 100%);
  width: calc(125 / 440 * 100%);
}

.landing-statement {
  position: absolute;
  right: calc(11 / 440 * 100%);
  width: calc(134.481 / 440 * 100%);
  top: calc(196.70 / 732 * 100%);
}
/* =========================================================
   PROJECT PREVIEW SHARED RULES
   ========================================================= */


/* Eternal Bonds 01 */

.eternal-bonds-01 {
  right: var(--mobile-margin);
  top: calc(0 / 732 * 100%);
  width: calc(99.5793 / 440 * 100%);
}

/* Eternal Bonds 02 */

.eternal-bonds-02 {
  right: var(--mobile-margin);
  bottom: calc(372.2909 / 732 * 100%);
  width: calc(81.4025 / 440 * 100%);
}

/* Eternal Bonds 03 */

.eternal-bonds-03 {
  left: calc(194.2237 / 440 * 100%);
  top: calc(8.175 / 732 * 100%);
  width: calc(75.8709 / 440 * 100%);
}

/* Eternal Bonds 04 */

.eternal-bonds-04 {
  right: calc(111.7768 / 440 * 100%);
  top: calc(15.557 / 732 * 100%);
  width: calc(87.8166 / 440 * 100%);
}

/* Eternal Bonds 05 */

.eternal-bonds-05 {
  left: calc(28.3959 / 440 * 100%);
  top: calc(223.6756 / 732 * 100%);
  width: calc(87.0213 / 440 * 100%);
}

/* Eternal Bonds 06 */

.eternal-bonds-06 {
  left: var(--mobile-margin);
  top: calc(146.9644 / 732 * 100%);
  width: calc(332.6555 / 440 * 100%);
}

/* Eternal Bonds 07 */

.eternal-bonds-07 {
  left: var(--mobile-margin);
  top: calc(0 / 732 * 100%);
  width: calc(97.6892 / 440 * 100%);
}

/* Eternal Bonds 08 */

.eternal-bonds-08 {
  left: var(--mobile-margin);
  bottom: calc(245.1773 / 732 * 100%);
  width: calc(67.5532 / 440 * 100%);
}

/* Eternal Bonds 09 */

.eternal-bonds-09 {
  left: calc(197.0242 / 440 * 100%);
  bottom: calc(113.4196 / 732 * 100%);
  width: calc(90.2208 / 440 * 100%);
}

/* Eternal Bonds 10 */

.eternal-bonds-10 {
  right: var(--mobile-margin);
  bottom: calc(120.8013 / 732 * 100%);
  width: calc(111.3159 / 440 * 100%);
}

/* Eternal Bonds 11 */

.eternal-bonds-11 {
  right: var(--mobile-margin);
  bottom: calc(497.1514 / 732 * 100%);
  width: calc(62.9145 / 440 * 100%);
}

/* Eternal Bonds 12 */

.eternal-bonds-12 {
  left: calc(203.1779 / 440 * 100%);
  top: calc(247.1475 / 732 * 100%);
  width: calc(130.4244 / 440 * 100%);
}

/* Eternal Bonds 13 */

.eternal-bonds-13 {
  right: calc(66.9484 / 440 * 100%);
  bottom: calc(272.9699 / 732 * 100%);
  width: calc(168.7489 / 440 * 100%);
}

/* Eternal Bonds 14 */

.eternal-bonds-14 {
  left: calc(101.5804 / 440 * 100%);
  top: calc(12.372 / 732 * 100%);
  width: calc(87.0284 / 440 * 100%);
}

/* Eternal Bonds 15 */

.eternal-bonds-15 {
  left: var(--mobile-margin);
  bottom: calc(117.9667 / 732 * 100%);
  width: calc(192.3096 / 440 * 100%);
}

/* Eternal Bonds Title */

.eternal-title {
  right: var(--mobile-margin);
  bottom: calc(0 / 732 * 100%);
  width: calc(258.7577 / 440 * 100%);
}

/* Eternal Bonds Text */

.eternal-text {
  left: calc(69.3611 / 440 * 100%);
  bottom: calc(370.1237 / 732 * 100%);
  width: calc(211 / 440 * 100%);
}

/* Eternal Bonds Disclaimer */

.eternal-disclaimer {
  right: var(--mobile-margin);
  bottom: calc(30.8836 / 732 * 100%);
  width: calc(90.0078 / 440 * 100%);
}


/* =========================================================
   PART 3
   REFLECTIONS OF DISPLACEMENT

   Coordinates taken from:
   mobile-home-reflections.svg
   Artboard: 440 * 956px
   ========================================================= */

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


/* =========================================================
   REFLECTIONS 01
  ========================================================= */

.reflections-of-displacement-01 {
  left: calc(165.7577 / 440 * 100%);
  bottom: calc(101.8089 / 732 * 100%);
  width: calc(63.6765 / 440 * 100%);
}

/* =========================================================
   REFLECTIONS 02
  ========================================================= */

.reflections-of-displacement-02 {
  left: calc(199.6314 / 440 * 100%);
  top: calc(202.0031 / 732 * 100%);
  width: calc(57.9823  / 440 * 100%);
}

/* =========================================================
   REFLECTIONS 03
  ========================================================= */

.reflections-of-displacement-03 {
  left: calc(179.0177 / 440 * 100%);
  top: calc(333.0521 / 732 * 100%);
  width: calc(85.7012 / 440 * 100%);
}

/* =========================================================
   REFLECTIONS 04
   ========================================================= */

.reflections-of-displacement-04 {
  left: var(--mobile-margin);
  top: calc(311.3025 / 732 * 100%);
  width: calc(122.9724 / 440 * 100%);
}

/* =========================================================
   REFLECTIONS 05
   ========================================================= */

.reflections-of-displacement-05 {
  left: var(--mobile-margin);
  top: calc(253.4033 / 732 * 100%);
  width: calc(45.5915  / 440 * 100%);
}

/* =========================================================
   REFLECTIONS 06
   ========================================================= */

.reflections-of-displacement-06 {
  left: calc(306.6987 / 440 * 100%);
  top: calc(55.3522 / 732 * 100%);
  width: calc(125.8013 / 440 * 100%);
  mix-blend-mode: multiply;
}


/* =========================================================
   REFLECTIONS 07
   ========================================================= */

.reflections-of-displacement-07 {
  left: calc(95.8445  / 440 * 100%);
  bottom: calc(100.4795 / 732 * 100%);
  width: calc(79.7047 / 440 * 100%);
  mix-blend-mode: multiply;
}


/* =========================================================
   REFLECTIONS 08
  ========================================================= */

.reflections-of-displacement-08 {
  left: calc(259.8636 / 440 * 100%);
  top: calc(383.0884  732 * 100%);
  width: calc(63.1191 / 440 * 100%);
}


/* =========================================================
   REFLECTIONS 09
  ========================================================= */

.reflections-of-displacement-09 {
  left: calc(115.5643 / 440 * 100%);
  top: calc(0 / 732 * 100%);
  width: calc(161.6844 / 440 * 100%);
}


/* =========================================================
   REFLECTIONS 10
  ========================================================= */

.reflections-of-displacement-10 {
  left: calc(260.6374 / 440 * 100%);
  top: calc(196.3385 / 732 * 100%);
  width: calc(61.2518 / 440 * 100%);
}


/* =========================================================
   REFLECTIONS 11
  ========================================================= */

.reflections-of-displacement-11 {
  left: calc(135.418 / 440 * 100%);
  top: calc(206.3559 / 732 * 100%);
  width: calc(69.5474 / 440 * 100%);
}

/*
  =========================================================
   REFLECTIONS 12
  ========================================================= */


.reflections-of-displacement-12 {
  left: calc(50.2073 / 440 * 100%);
  top: calc(250.489 / 732 * 100%);
  width: calc(136.9925 / 440 * 100%);
}


/* =========================================================
   REFLECTIONS 13
  ========================================================= */

.reflections-of-displacement-13 {
  right: var(--mobile-margin);
  top: calc(0 / 732 * 100%);
  width: calc(140.5462 / 440 * 100%);
}


/*
  =========================================================
   REFLECTIONS 14
  ========================================================= */

.reflections-of-displacement-14 {
  right: var(--mobile-margin);
  top: calc(282.6628 / 732 * 100%);
  width: calc(100.0095 / 440 * 100%);
}


/*
  ========================================================
   REFLECTIONS 15
  ========================================================= */

.reflections-of-displacement-15 {
  left: var(--mobile-margin);
  top: calc(0 / 732 * 100%);
  width: calc(122.621 / 440 * 100%);
  mix-blend-mode: multiply;
}

/*
  =========================================================
   REFLECTIONS 16
  ========================================================= */

.reflections-of-displacement-16 {
  left: calc(135.7766 / 440 * 100%);
  top: calc(122.1848 / 732 * 100%);
  width: calc(151.9695 / 440 * 100%);
}

/*
  =========================================================
   REFLECTIONS 17
  ========================================================= */


.reflections-of-displacement-17 {
  right: var(--mobile-margin);
  top: calc(472.5059 / 732 * 100%);
  width: calc(212.1853 / 440 * 100%);
}


/*
  =========================================================
   REFLECTIONS 18
  ========================================================= */

.reflections-of-displacement-18 {
  left: calc(131.0919 / 440 * 100%);
  top: calc(370.6785 / 732 * 100%);
  width: calc(50.8979 / 440 * 100%);
}


/*
  =========================================================
  REFLECTIONS 19
  ========================================================= */

.reflections-of-displacement-19 {
  left: calc(287.2078 / 440 * 100%);
  top: calc(82.7284 / 732 * 100%);
  width: calc(46.354 / 440 * 100%);
  mix-blend-mode: multiply;
}

/*
  =========================================================
  REFLECTIONS TITLE
  ========================================================= */

.reflections-title {
  right: calc(11 / 440 * 100%);
  bottom: calc(0 / 732 * 100%);
  width: calc(310.6333 / 440 * 100%);
}

.reflections-disclaimer {
  right: calc(11 / 440 * 100%);
  bottom: calc(17.0371 / 732 * 100%);
  width: calc(181.0078 / 440 * 100%);
}

/* =========================================================
   PART 4
   CATELIER

   Coordinates taken from:
   mobile-home-catelier.svg

   Illustrator artboard: 440 * 956px
   ========================================================= */


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

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

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

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

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

  -webkit-overflow-scrolling: touch;
}

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

  width: 100%;
  height: 836px;
  min-height: 836px;
  max-width: 440px;

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

.catelier-01 {
  left: calc(44.0318 / 440 * 100%);
  top: calc(169.7997 / 836 * 100%);
  width: calc(97.6492 / 440 * 100%);
}


/* =========================================================
   CATELIER 02
   ========================================================= */

.catelier-02 {
  left: calc(11 / 440 * 100%);
  top: calc(0 / 836 * 100%);
  width: calc(110.8072 / 440 * 100%);

}


/* =========================================================
   CATELIER 03
   ========================================================= */

.catelier-03 {
  left: calc(176.8288 / 440 * 100%);
  top: calc(348.3111 / 836 * 100%);
  width: calc(120.5049 / 440 * 100%);


}


/* =========================================================
   CATELIER 04
   ========================================================= */

.catelier-04 {
  left: calc(246.2638 / 440 * 100%);
  top: calc(97.1946 / 836 * 100%);
  width: calc(97.631 / 440 * 100%);


}


/* =========================================================
   CATELIER 05
   ========================================================= */

.catelier-05 {
  left: calc(187.9418 / 440 * 100%);
  top: calc(0 / 836 * 100%);
  width: calc(161.8801 / 440 * 100%);


}


/* =========================================================
   CATELIER 06
   ========================================================= */

.catelier-06 {
  left: calc(313.3875 / 440 * 100%);
  top: calc(0 / 836 * 100%);
  width: calc(124.7399 / 440 * 100%);

}


/* =========================================================
   CATELIER 07
   Slight counterclockwise rotation from Illustrator
   ========================================================= */

.catelier-07 {
  left: calc(11 / 440 * 100%);
  top: calc(220.0748 / 836 * 100%);
  width: calc(37.766 / 440 * 100%);

}


/* =========================================================
   CATELIER 08
   Rotated image from Illustrator
   ========================================================= */

.catelier-08 {
  left: calc(118 / 440 * 100%);
  top: calc(-21.2801 / 836 * 100%);
  width: calc(85.8852 / 440 * 100%);
  transform: rotate(27.5deg)
}


/* =========================================================
   CATELIER 09
   ========================================================= */

.catelier-09 {
  left: calc(321.1212 / 440 * 100%);
  top: calc(209.4014 / 836 * 100%);
  width: calc(119.1431 / 440 * 100%);

}


/* =========================================================
   CATELIER 10
   Horizontally flipped in Illustrator
   ========================================================= */

.catelier-10 {
  left: calc(309.4375 / 440 * 100%);
  top: calc(181.1628 / 836 * 100%);
  width: calc(77.6336 / 440 * 100%);

}


/* =========================================================
   CATELIER 11
   Large rotated image clipped by the artboard
   ========================================================= */

.catelier-11 {
  left: calc(11 / 440 * 100%);
  top: calc(329.4789 / 836 * 100%);
  width: calc(178.0189 / 440 * 100%);

}


/* =========================================================
   CATELIER 12
   ========================================================= */

.catelier-12 {
  right: calc(11 / 440 * 100%);
  top: calc(560.2495 / 836 * 100%);
  width: calc(223.3037 / 440 * 100%);
}

/* =========================================================
   CATELIER 13
   Large rotated image clipped by the artboard
   ========================================================= */

.catelier-13 {
  right: calc(11 / 440 * 100%);
  top: calc(332.1954 / 836 * 100%);
  width: calc(78.19 / 440 * 100%);

}


/* =========================================================
   CATELIER 14
   ========================================================= */

.catelier-14 {
  left: calc(159.373 / 440 * 100%);
  top: calc(127.3697 / 836 * 100%);
  width: calc(85.2564 / 440 * 100%);

}


/* =========================================================
   CATELIER 15
   Large rotated image clipped by the artboard
   ========================================================= */

.catelier-15 {
  left: calc(293.2692 / 440 * 100%);
  top: calc(279.5858 / 836 * 100%);
  width: calc(83.3551 / 440 * 100%);

}


/* =========================================================
   CATELIER 16
   ========================================================= */

.catelier-16 {
  left: calc(215.8935 / 440 * 100%);
  top: calc(394.3834 / 836 * 100%);
  width: calc(124.4048 / 440 * 100%);

}

/* =========================================================
   CATELIER TITLE
   ========================================================= */

.catelier-title {
  right: calc(11 / 440 * 100%);
  top: calc(658.33 / 836 * 100%);
  width: calc(104.6581 / 440 * 100%);
}

/* =========================================================
   CATELIER TEXT
   ========================================================= */

.catelier-text {
  left: calc(136.8696 / 440 * 100%);
  top: calc(205.7772 / 836 * 100%);
  width: calc(203.2073 / 440 * 100%);

}

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

.end-of-preview {
  left: calc(157.6132 / 440 * 100%);
  top: calc(811 / 836 * 100%);
  width: calc(103.0957 / 440 * 100%);
}


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

   This section represents SVG coordinates Y = 200 through 847.

   Original section height:
   847 - 200 = 647px
   ========================================================= */

.about {
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 440 / 625;

  margin: 0 auto;

  position: relative;
  overflow: hidden;
}


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

   Original SVG:
   X: 41.457
   Y: 243.982

   Relative Y inside .about:
   243.982 - 200 = 43.982
   ========================================================= */

.about h2 {

  position: absolute;

  left: calc(23.3264 / 440 * 100%);
  bottom: calc(580.5262 / 625 * 100%);
  width: calc(100 / 440 * 100%);

  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 PORTRAIT

   Original SVG:
   X: 122.533
   Y: 281.973
   W: 194.933
   H: 260.112

   Relative Y:
   281.973 - 200 = 81.973
   ========================================================= */

.about > a {
  display: block;
}

.about img {
  position: absolute;

  left: 50%;
  bottom: calc(295.0461 / 625 * 100%);

  width: calc(194.933 / 440 * 100%);
  height: auto;

  margin: 0;

  z-index: 2;
  transform: translateX(-50%);
}


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

   Original SVG:
   X: 107.822
   Y: 557.993
   W: 224.357
   H: approximately 109.296

   Relative Y:
   557.993 - 200 = 357.993
   ========================================================= */

.about-text {
  position: absolute;

  left: 50%;
  bottom: calc(169.842 / 625 * 100%);

  width: calc(224.357 / 440 * 100%);
  height: auto;

  margin: 0;

  font-family: "futura-pt-condensed", sans-serif;
  font-size: clamp(13px, 3.2vw, 14px);
  font-weight: 200;
  font-style: italic;
  line-height: 1.38;
  letter-spacing: 0;

  color: var(--black);

  z-index: 3;
  transform: translateX(-50%);
}

.about-text p {
  margin: 0;
}

.about-text br + br {
  display: none;
}

.about-text p + p {
  margin-top: calc(24 / 625 * 100%);
}

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


/* =========================================================
   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: 50%;
  bottom: calc(20 / 625 * 100%);;

  width: calc(100 / 440 * 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

   Original SVG footer begins at Y: 846.967
   Remaining height:
   956 - 846.967 = 109.033px
   ========================================================= */

.footer {
  width: 100%;
  max-width: 440px;
  height: 108.5px;
  min-height: 108.5px;

  margin: 0 auto;
  padding: 0;

  position: relative;

  display: block;

  background: var(--white);
  color: var(--gray);

  font-family: "futura-pt-condensed", sans-serif;
}


/* Footer dividing line */

.footer::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  border-top: 1px solid rgba(0, 0, 0, 0.18);
}


/* =========================================================
   FOOTER MAIN ROW

   Original SVG row begins around Y: 905.969
   Relative footer Y:
   905.969 - 846.967 = 59.002px
   ========================================================= */

.footer-main {
  width: 100%;
  height: 24px;

  margin: 0;
  padding: 0;

  position: absolute;
  top: 58px;
  left: 0;

  display: block;
}


/* Darrius Parker / a-purpose.xyz link */

.footer-main .footer-name {
  position: absolute;

  left: calc(127.186 / 440 * 100%);
  top: 8px;

  margin: 0;

  font-size: clamp(8px, 2.25vw, 10px);
  font-weight: 300;
  line-height: 1;

  color: var(--gray);
  white-space: nowrap;
}


/* First divider */

.footer-main .footer-divider:nth-of-type(1) {
  position: absolute;

  left: calc(186.925 / 440 * 100%);
  top: 0;

  width: 1px;
  height: 23px;

  background: var(--gray);
}


/* LinkedIn */

.footer-main .footer-social:nth-of-type(2) {
  position: absolute;

  left: calc(199.314 / 440 * 100%);
  top: 2px;

  width: calc(14.812 / 440 * 100%);
  height: auto;
}


/* Second divider */

.footer-main .footer-divider:nth-of-type(2) {
  position: absolute;

  left: calc(224.515 / 440 * 100%);
  top: 0;

  width: 1px;
  height: 23px;

  background: var(--gray);
}


/* Instagram */

.footer-main .footer-social:nth-of-type(3) {
  position: absolute;

  left: calc(236.904 / 440 * 100%);
  top: 2px;

  width: calc(14.811 / 440 * 100%);
  height: auto;
}


/* Third divider */

.footer-main .footer-divider:nth-of-type(3) {
  position: absolute;

  left: calc(262.104 / 440 * 100%);
  top: 0;

  width: 1px;
  height: 23px;

  background: var(--gray);
}


/* Contact email */

.footer-main .footer-email {
  position: absolute;

  left: calc(276.368 / 440 * 100%);
  top: 7px;

  margin: 0;

  font-size: clamp(8px, 2.25vw, 10px);
  font-weight: 300;
  line-height: 1;

  color: var(--gray);
  white-space: nowrap;
}


/* =========================================================
   FOOTER SOCIAL ICONS
   ========================================================= */

.footer-social {
  display: block;
}

.footer-social img {
  display: block;

  width: 100%;
  height: auto;

  filter: brightness(0) invert(58%);
}


/* =========================================================
   COPYRIGHT

   Original SVG:
   X: 176.93
   Y: 940.727
   W: 86.14

   Relative footer Y:
   940.727 - 846.967 = 93.76px
   ========================================================= */

.footer-copyright {
  position: absolute;

  left: 50%;
  bottom: 4px;

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

  transform: translateX(-50%);

  color: var(--gray);

  font-size: clamp(8px, 2.25vw, 10px);
  font-weight: 300;
  line-height: 1;

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


/* =========================================================
   FOOTER LINKS
   ========================================================= */

.footer a,
.footer a:visited,
.footer a:hover,
.footer a:active {
  color: var(--gray);
  text-decoration: none;
}


/* =========================================================
   FOCUS STYLES
   ========================================================= */

.end-of-preview a:focus-visible,
.about a:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
}

/* =========================================================
   PART 6
   IMAGE LIGHTBOX + UTILITIES + MOBILE FINISHING
   ========================================================= */


/* =========================================================
   IMAGE LIGHTBOX
   ========================================================= */

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

body.lightbox-open {
  overflow: hidden;
}

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

.image-lightbox {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(255,255,255,0.96);

  cursor: zoom-out;

  z-index: 10000;
}

.image-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: calc(100vw - 48px);
  max-height: calc(100svh - 48px);

  object-fit: contain;

  cursor: default;
}


/* =========================================================
   FOCUS STATES
   ========================================================= */
.image-lightbox-trigger:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
}


/* =========================================================
   IMAGE DEFAULTS
   ========================================================= */

.project-preview img,
.about img,
.landing img {
  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   MOBILE MENU ANIMATION
   ========================================================= */


/* =========================================================
   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 / 440 * 100vw);
}

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

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

/* =========================================================
   SVG IMAGES
   ========================================================= */

img[src$=".svg"] {
  height: auto;
}

/* =========================================================
   PNG/JPG IMAGES
   ========================================================= */

img[src$=".png"],
img[src$=".jpg"],
img[src$=".jpeg"],
img[src$=".webp"] {
  image-rendering: auto;
}


/* =========================================================
   TAP HIGHLIGHT
   ========================================================= */
a {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   SAFE AREA
   ========================================================= */

@supports (padding: max(0px)) {
}


/* =========================================================
   MOBILE TYPOGRAPHY
   ========================================================= */

body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* =========================================================
   FINAL UTILITIES
   ========================================================= */

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

  border: 0;
}

}
/*
  Paste this entire block at the bottom of:
  css/pages/homepage/homepage-mobile.css

  Phone landscape viewport: 832 x 440
  Fixed header: 64px
  Artwork frame: 832 x 376

  Fill each 0 with the matching Illustrator measurement.
*/

/* PHONE LANDSCAPE: 832 x 376 */


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

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

  .landing-image {
    left: var(--mobile-margin);
    bottom: calc(0 / 376 * 100%);
    width: calc(100 / 832 * 100%);
    position: absolute;
  }

  .landing-statement {
    position: absolute;
    left: calc(697.519 / 832 * 100%);
    top: calc(101.056 / 376 * 100%);
    width: calc(134.481 / 832 * 100%);
    margin: 0;
  }

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

  .eternal-bonds-01 {
    left: calc (732.4207 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(99.5793 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-02 {
    left: calc(683.6927 / 832 * 100%);
    top: calc(228.3639 / 376 * 100%);
    width: calc(101.0996 / 832 * 100%);
    transform: rotate(-90deg);
    position: absolute;
  }

  .eternal-bonds-03 {
    left: calc(622.7414 / 832 * 100%);
    top: calc(186.9019 / 376 * 100%);
    width: calc(60.1969 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-04 {
    left: calc(221.5105 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(89.5995 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-05 {
    left: calc(213.6895 / 832 * 100%);
    top: calc(232.1889 / 376 * 100%);
    width: calc(64.4824 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-06 {
    left: calc(428.5 / 832 * 100%);
    top: calc(120.7512 / 376 * 100%);
    width: calc(294.0795 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-07 {
    left: calc(280.7782 / 832 * 100%);
    top: calc(146.812 / 376 * 100%);
    width: calc(83.1746 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-08 {
    left: calc(0 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(62.2597 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-09 {
    left: calc(312.387 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(91.113 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-10 {
    left: calc(645.3397 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(86.8122 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-11 {
    left: calc(555.2765 / 832 * 100%);
    top: calc(6.8456 / 376 * 100%);
    width: calc(89.1573 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-12 {
    left: calc(724.0167 / 832 * 100%);
    right: calc(11 / 376 * 100%);
    width: calc(107.9833 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-13 {
    left: calc(436.4002 / 832 * 100%);
    top: calc(217.0459 / 376 * 100%);
    width: calc(157.4012 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-14 {
    left: calc(428.5 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(109.0876 / 832 * 100%);
    position: absolute;
  }

  .eternal-bonds-15 {
    left: calc(0 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(233.6206 / 832 * 100%);
    position: absolute;
  }

  .eternal-title {
    right: calc(428.5 / 832 * 100%);
    bottom: calc(0 / 376 * 100%);
    width: calc(197.4122 / 832 * 100%);
    position: absolute;
  }

  .eternal-text {
    left: calc(428.5 / 832 * 100%);
    bottom: calc(0 / 376 * 100%);
    width: calc(235.1645 / 832 * 100%);
    position: absolute;
  }

  .eternal-disclaimer {
    right: calc(428.5 / 832 * 100%);
    bottom: calc(24.0452 / 376 * 100%);
    width: calc(68.6689 / 832 * 100%);
    position: absolute;
  }

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

  .reflections-of-displacement-01 {
    left: calc(180.0437 / 832 * 100%);
    top: calc(134.626 / 376 * 100%);
    width: calc(75.9786 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-02 {
    left: calc(605.6052 / 832 * 100%);
    top: calc(112.3754 / 376 * 100%);
    width: calc(57.9823 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-03 {
    left: calc(557.0447 / 832 * 100%);
    top: calc(241.0741 / 376 * 100%);
    width: calc(85.7012 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-04 {
    left: calc(327.8712 / 832 * 100%);
    top: calc(77.4704 / 376 * 100%);
    width: calc(86.6288 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-05 {
    left: calc(11 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(37.4861 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-06 {
    left: calc(524.8563 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(102.7515 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-07 {
    left: calc(200.5974 / 832 * 100%);
    top: calc(94.1597 / 376 * 100%);
    width: calc(124.356 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-08 {
    left: calc(428.5 / 832 * 100%);
    top: calc(256.608 / 376 * 100%);
    width: calc(79.8936 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-09 {
    left: calc(20.1475  / 832 * 100%);
    top: calc(170.9121 / 376 * 100%);
    width: calc(143.5025 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-10 {
    left: calc(770.56 / 832 * 100%);
    top: calc(196 / 376 * 100%);
    width: calc(61.44 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-11 {
    left: calc(607.3555 / 832 * 100%);
    top: calc(73.6472 / 376 * 100%);
    width: calc(69.84 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-12 {
    left: calc(11 / 832 * 100%);
    top: calc(108.4363 / 376 * 100%);
    width: calc(96.6375 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-13 {
    left: calc(625.185 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(121.7279 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-14 {
    left: calc(742.68 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(100.32 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-15 {
    left: calc(428.5 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(122.621 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-16 {
    left: calc(232.8621 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(170.3831 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-17 {
    left: calc(49.7946 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(170.0319 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-18 {
    left: calc(658.9137 / 832 * 100%);
    top: calc(261.3307 / 376 * 100%);
    width: calc(68.5264 / 832 * 100%);
    position: absolute;
  }

  .reflections-of-displacement-19 {
    left: calc(659.6971 / 832 * 100%);
    top: calc(62.4802 / 376 * 100%);
    width: calc(80.426 / 832 * 100%);
    position: absolute;
  }

  .reflections-title {
    right: calc(428.5 / 832 * 100%);
    bottom: calc(0 / 376 * 100%);
    width: calc(235.8261 / 832 * 100%);
    position: absolute;
  }

  .reflections-disclaimer {
    right: calc(428.5 / 832 * 100%);
    bottom: calc(23.0368 / 376 * 100%);
    width: calc(118.1791 / 832 * 100%);
    position: absolute;
  }

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

  .catelier-01 {
    left: calc(437.9349 / 832 * 100%);
    top: calc(65.5473 / 376 * 100%);
    width: calc(117.9575 / 832 * 100%);
    position: absolute;
  }

  .catelier-02 {
    left: calc(39.0001 / 832 * 100%);
    top: calc(60.6685 / 376 * 100%);
    width: calc(130.3702 / 832 * 100%);
    position: absolute;
    transform: rotate(-90deg)
  }

  .catelier-03 {
    left: calc(241.8932 / 832 * 100%);
    top: calc(210.3849 / 376 * 100%);
    width: calc(172.6068 / 832 * 100%);
    position: absolute;
  }

  .catelier-04 {
    left: calc(511.91 / 832 * 100%);
    top: calc(207.587 / 376 * 100%);
    width: calc(87.5661 / 832 * 100%);
    position: absolute;
  }

  .catelier-05 {
    left: calc(594. 796 / 832 * 100%);
    bottom: calc(0 / 376 * 100%);
    width: calc(169.2613 / 832 * 100%);
    position: absolute;
  }

  .catelier-06 {
    left: calc(555.693 / 832 * 100%);
    top: calc(198.9389 / 376 * 100%);
    width: calc(124.4334 / 832 * 100%);
    position: absolute;
  }

  .catelier-07 {
    left: calc(559.8801 / 832 * 100%);
    top: calc(51.4175 / 376 * 100%);
    width: calc(40.0152 / 832 * 100%);
    position: absolute;
  }

  .catelier-08 {
    left: calc(487.3858 / 832 * 100%);
    top: calc(-86.5036 / 376 * 100%);
    width: calc(88.1801 / 832 * 100%);
    position: absolute;
    transform: rotate(-90deg)
  }

  .catelier-09 {
    left: calc(222.3166 / 832 * 100%);
    top: calc(11.0088 / 376 * 100%);
    width: calc(104.1599 / 832 * 100%);
    position: absolute;
  }

  .catelier-10 {
    left: calc(317.5399 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(96.9601 / 832 * 100%);
    position: absolute;
  }

  .catelier-11 {
    left: calc(678.9297 / 832 * 100%);
    top: calc(84.6056 / 376 * 100%);
    width: calc(164.0703 / 832 * 100%);
    position: absolute;
  }

  .catelier-12 {
    left: calc(11 / 832 * 100%);
    top: calc(223.1816 / 376 * 100%);
    width: calc(234.1492 / 832 * 100%);
    position: absolute;
  }

  .catelier-13 {
    left: calc(186.1099 / 832 * 100%);
    top: calc(81.5151 / 376 * 100%);
    width: calc(48.4647 / 832 * 100%);
    position: absolute;
  }

  .catelier-14 {
    left: calc(221.8876 / 832 * 100%);
    top: calc(141.7288 / 376 * 100%);
    width: calc(99.2552 / 832 * 100%);
    position: absolute;
  }

  .catelier-15 {
    left: calc(439.8339 / 832 * 100%);
    top: calc(202.0082 / 376 * 100%);
    width: calc(98.5603 / 832 * 100%);
    position: absolute;
  }

  .catelier-16 {
    left: calc(306.6902 / 832 * 100%);
    top: calc(52.2469 / 376 * 100%);
    width: calc(107.8098 / 832 * 100%);
    position: absolute;
  }

  .catelier-title {
    right: calc(428.5 / 832 * 100%);
    bottom: calc(0 / 376 * 100%);
    width: calc(104.6581 / 832 * 100%);
    position: absolute;
  }

  .catelier-text {
    left: calc(11 / 832 * 100%);
    top: calc(0 / 376 * 100%);
    width: calc(226.0868 / 832 * 100%);
    position: absolute;
  }

}


/* FINAL HOMEPAGE SCREEN: ABOUT + FOOTER */

.homepage-final-screen {
  width:100%;
  min-height:calc(100svh - var(--header-height));
  margin:0;
  display:flex;
  flex-direction:column;
  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 {
  margin:0 auto;
  flex:0 0 108.5px;
}