/* Reflections of Displacement desktop project layout.
   Composition controls follow the same section/canvas structure as Eternal Bonds. */

:root {
  --project-max-width:1680px;
  --header-height:80px;
  --page-margin:80px;
  --section-height:930px;
  --opening-height:850px;
  --canvas-top:calc(118.8246 / 930 * 100%);
  --canvas-height:calc(960 / 930 * 100%);
  --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;
}

/* HEADER */

/* REFLECTIONS PAGE */

.reflections-page {
  margin:0;
  background:var(--white);
  color:var(--black);
}

main {
  width:100%;
}

/* OPENING STATEMENT
   Coordinate system: 1680 x 850. */
/* Reflections of Displacement opening board
   Desktop coordinates are translated from the 1440 × 1024 Illustrator artboard. */

.reflections-opening {
  width:1680px;
  min-height:880px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.reflections-statement {
  font-size:28px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:0;
  word-spacing:0;
}

.reflections-statement-body {
  position:absolute;
  left:calc(276.25 / 1680 * 100%);
  top:calc(115 / 880 * 100%);
  width:calc(487.5 / 1680 * 100%);
}

.reflections-opening span {
  display:block;
}

.reflections-question-03 p {
  margin:0;
}

.reflections-question-03 p:nth-child(1),
.reflections-question-03 p:nth-child(3) {
  text-align:left;
}

.reflections-question-03 p:nth-child(2) {
  text-align:right;
}

.reflections-question-01 {
  position:absolute;
  margin:0;
  text-align:left;
  left:calc(936.3108 / 1680 * 100%);
  top:calc(75.2988 / 880 * 100%);
  width:calc(487.5 / 1680 * 100%);
}

.reflections-question-02 {
  position:absolute;
  margin:0;
  text-align:right;
  white-space:nowrap;
  left:calc(1240.0774 / 1680 * 100%);
  top:calc(149.209 / 880 * 100%);
  width:calc(183.7334 / 1680 * 100%);
}

.reflections-statement-01 {
  position:absolute;
  margin:0;
  text-align:left;
  left:calc(936.3108 / 1680 * 100%);
  top:calc(210.76 / 880 * 100%);
  width:calc(487.5 / 1680 * 100%);
}

.reflections-question-03 {
  position:absolute;
  margin:0;
  left:calc(936.3108 / 1680 * 100%);
  top:calc(683.5899 / 880 * 100%);
  width:calc(487.5 / 1680 * 100%);
}

.reflections-opening-image {
  position:absolute;
  left:calc(256.1892 / 1680 * 100%);
  top:calc(255.7495 / 880 * 100%);
  width:calc(573.8 / 1680 * 100%);
  height:auto;
}

/* MOOD BOARD
   Inner-canvas coordinate system: 1680 x 960. */

.reflections-moodboard {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

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

.reflections-moodboard-canvas {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

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

.reflections-mood-01 {
  left:calc(1122.5545 / 1680 * 100%);
  top:calc(604.3654 / 960 * 100%);
  width:calc(335.1698 / 1680 * 100%);
}

.reflections-mood-02 {
  left:calc(592.4265 / 1680 * 100%);
  top:calc(453.3106 / 960 * 100%);
  width:calc(505.0441 / 1680 * 100%);
}

.reflections-mood-03 {
  left:calc(831.5428 / 1680 * 100%);
  top:calc(258.2282 / 960 * 100%);
  width:calc(270.6985 / 1680 * 100%);
}

.reflections-mood-04 {
  left:calc(835.5199 / 1680 * 100%);
  top:calc(60.4968 / 960 * 100%);
  width:calc(262.2527 / 1680 * 100%);
}

.reflections-mood-05 {
  left:calc(593.4612 / 1680 * 100%);
  top:calc(164.1825 / 960 * 100%);
  width:calc(217.7685 / 1680 * 100%);
}

.reflections-mood-06 {
  left:calc(271.3981 / 1680 * 100%);
  top:calc(183.6157 / 960 * 100%);
  width:calc(293.348 / 1680 * 100%);
}

.reflections-mood-07 {
  left:calc(222.2757 / 1680 * 100%);
  top:calc(429.3747 / 960 * 100%);
  width:calc(344.5069 / 1680 * 100%);
}

.reflections-mood-08 {
  left:calc(1122.5546 / 1680 * 100%);
  top:calc(184.193 / 960 * 100%);
  width:calc(314.7969 / 1680 * 100%);
}

/* SKETCHES
   Inner-canvas coordinate system: 1680 x 960. */

.reflections-sketches {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

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

.reflections-sketch-canvas {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.reflections-sketch-canvas img{
  position: absolute;
  height: auto;
  margin: 0;
  mix-blend-mode: multiply;
}

.reflections-sketch-01,
.reflections-sketch-02,
.reflections-sketch-03,
.reflections-sketch-04,
.reflections-sketch-05,
.reflections-sketch-06,
.reflections-sketch-07,
.reflections-sketch-08,
.reflections-sketch-09,
.reflections-sketch-10 {
    height:auto;
    mix-blend-mode:multiply;
}

.reflections-sketch-01 {
    left:calc(1291.8285 / 1680 * 100%);
    top:calc(411.4956 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-02 {
    left:calc(377.1101 / 1680 * 100%);
    top:calc(33.4325 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-03 {
    left:calc(103.8245 / 1680 * 100%);
    top:calc(6.3392 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-04 {
    left:calc(995.7522 / 1680 * 100%);
    top:calc(400.3643 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-05 {
    left:calc(1314.6522 / 1680 * 100%);
    top:calc(26.4269 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-06 {
    left:calc(725.0738 / 1680 * 100%);
    top:calc(457.7416 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-07 {
    left:calc(147.6168 / 1680 * 100%);
    top:calc(427.2773 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-08 {
    left:calc(456.8437 / 1680 * 100%);
    top:calc(411.4956 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-09 {
    left:calc(995.7522 / 1680 * 100%);
    top:calc(6.3392 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

.reflections-sketch-10 {
    left:calc(697.8265 / 1680 * 100%);
    top:calc(26.4269 / 960 * 100%);
    width:calc(286.3486 / 1680 * 100%);
}

/* PROCESS
   Inner-canvas coordinate system: 1680 x 960. */

.reflections-process {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

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

.reflections-details {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.reflections-details img{
  position: absolute;
  height: auto;
  margin: 0;
}

.reflections-process-01 {
  left:calc(171.0835 / 1680 * 100%);
  top:calc(46.5772 / 960 * 100%);
  width:calc(412.0531 / 1680 * 100%);
}

.reflections-process-02 {
  left:calc(170.4854 / 1680 * 100%);
  top:calc(337.4134 / 960 * 100%);
  width:calc(157.3492 / 1680 * 100%);
}

.reflections-process-03 {
  left:calc(617.9273 / 1680 * 100%);
  top:calc(664.5465 / 960 * 100%);
  width:calc(132.0348 / 1680 * 100%);
}

.reflections-process-04 {
  left:calc(1066.9137 / 1680 * 100%);
  top:calc(51.4064 / 960 * 100%);
  width:calc(144.0256 / 1680 * 100%);
}

.reflections-process-05 {
  left:calc(366.7814 / 1680 * 100%);
  top:calc(529.9718 / 960 * 100%);
  width:calc(216.1459 / 1680 * 100%);
}

.reflections-process-06 {
  left:calc(1066.7044 / 1680 * 100%);
  top:calc(561.0219 / 960 * 100%);
  width:calc(445.4947 / 1680 * 100%);
}

.reflections-process-07 {
  left:calc(362.8346 / 1680 * 100%);
  top:calc(337.6227 / 960 * 100%);
  width:calc(219.2675 / 1680 * 100%);
}

.reflections-process-08 {
  left:calc(902.2136 / 1680 * 100%);
  top:calc(401.3733 / 960 * 100%);
  width:calc(128.6656 / 1680 * 100%);
}

.reflections-process-09 {
  left:calc(903.2481 / 1680 * 100%);
  top:calc(146.933 / 960 * 100%);
  width:calc(128.6656 / 1680 * 100%);
}

.reflections-process-10 {
  left:calc(618.1366 / 1680 * 100%);
  top:calc(45.0566 / 960 * 100%);
  width:calc(250.1115 / 1680 * 100%);
}

.reflections-process-11 {
  left:calc(784.9622 / 1680 * 100%);
  top:calc(664.5465 / 960 * 100%);
  width:calc(246.7423 / 1680 * 100%);
}

.reflections-process-12 {
  left:calc(1065.8792 / 1680 * 100%);
  top:calc(342.6612 / 960 * 100%);
  width:calc(145.0601 / 1680 * 100%);
}

.reflections-process-13 {
  left:calc(617.5088 / 1680 * 100%);
  top:calc(493.0314 / 960 * 100%);
  width:calc(250.1115 / 1680 * 100%);
}

.reflections-process-14 {
  left:calc(1245.9393 / 1680 * 100%);
  top:calc(52.7126 / 960 * 100%);
  width:calc(266.2598 / 1680 * 100%);
}

/* CATALOG
   Inner-canvas coordinate system: 1680 x 960. */

.reflections-catalog {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

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

.reflections-lookbook {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.reflections-lookbook img{
  position: absolute;
  height: auto;
  margin: 0;
}

.reflections-catalog-01 {
  left:calc(111.7008 / 1680 * 100%);
  top:calc(220.2554 / 960 * 100%);
  width:calc(346.3262 / 1680 * 100%);
}

.reflections-catalog-02 {
  left:calc(487.0715 / 1680 * 100%);
  top:calc(220.2554 / 960 * 100%);
  width:calc(346.3262 / 1680 * 100%);
}

.reflections-catalog-03 {
  left:calc(862.4421 / 1680 * 100%);
  top:calc(220.2554 / 960 * 100%);
  width:calc(346.3262 / 1680 * 100%);
}

.reflections-catalog-04 {
  left:calc(1237.8128 / 1680 * 100%);
  top:calc(220.2554 / 960 * 100%);
  width:calc(330.4864  / 1680 * 100%);
}

/* EDITORIAL
   Inner-canvas coordinate system: 1680 x 960. */

.reflections-editorial {
  width:1680px;
  height:960px;
  margin:0 auto;
  padding:25px;
  position:relative;
  overflow:hidden;
}

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

.reflections-editorial-layout {
  position:absolute;
  left:0;
  top:25px;
  width:100%;
  height:960px;
}

.reflections-editorial-layout img{
  position: absolute;
  height: auto;
  margin: 0;
}

.reflections-editorial-01 {
  left:calc(691.5334 / 1680 * 100%);
  top:calc(514.6209 / 960 * 100%);
  width:calc(257.7795 / 1680 * 100%);
}

.reflections-editorial-02 {
  left:calc(168.6137 / 1680 * 100%);
  top:calc(78.7259 / 960 * 100%);
  width:calc(208.7146 / 1680 * 100%);
}

.reflections-editorial-03 {
  left:calc(143.1387 / 1680 * 100%);
  top:calc(436.8028 / 960 * 100%);
  width:calc(290.2289 / 1680 * 100%);
}

.reflections-editorial-04 {
  left:calc(463.3676 / 1680 * 100%);
  top:calc(572.8329 / 960 * 100%);
  width:calc(198.1658 / 1680 * 100%);
}

.reflections-editorial-05 {
  left:calc(407.3283 / 1680 * 100%);
  top:calc(58.7099 / 960 * 100%);
  width:calc(309.8127 / 1680 * 100%);
}

.reflections-editorial-06 {
  left:calc(747.1409 / 1680 * 100%);
  top:calc(87.0491 / 960 * 100%);
  width:calc(252.9255 / 1680 * 100%);
}

.reflections-editorial-07 {
  left:calc(1030.0664 / 1680 * 100%);
  top:calc(72.115 / 960 * 100%);
  width:calc(127.502 / 1680 * 100%);
}

.reflections-editorial-08 {
  left:calc(1285.2049 / 1680 * 100%);
  top:calc(514.6209 / 960 * 100%);
  width:calc(251.6564 / 1680 * 100%);
}

.reflections-editorial-09 {
  left:calc(1030.0664 / 1680 * 100%);
  top:calc(293.3679 / 960 * 100%);
  width:calc(127.502 / 1680 * 100%);
}

.reflections-editorial-10 {
  left:calc(979.3129 / 1680 * 100%);
  top:calc(514.6209 / 960 * 100%);
  width:calc(120.064 / 1680 * 100%);
}

.reflections-editorial-11 {
  left:calc(1187.5684 / 1680 * 100%);
  top:calc(58.7099 / 960 * 100%);
  width:calc(270.9542 / 1680 * 100%);
}

.reflections-editorial-12 {
  left:calc(1129.3769 / 1680 * 100%);
  top:calc(514.6212 / 960 * 100%);
  width:calc(125.828/ 1680 * 100%);
}

.reflections-outline {
  left:calc(377.3283 / 1680 * 100%);
  top:calc(58.7099 / 960 * 100%);
  width:calc(369.8127 / 1680 * 100%);
}

.reflections-outline-mobile {
  left:calc(0 / 440 * 100%);
  top:calc(0 / 960 * 100%);
  width:calc(0 / 440 * 100%);
  z-index:2;
}

/* NEXT PROJECT */

.reflections-next-project {
  width:1680px;
  height:475px;
  margin:0 auto;
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}

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

.reflections-next-project a {
  font-size:70px;
  line-height:1;
}

/* PHOTOGRAPHY CREDIT
   Shared defaults live in /css/components/photography-credit.css.
   Override the custom properties below per section when needed. */

.project-photography-credit {
  --credit-max-width:1440px;
  --credit-padding-top:24px;
  --credit-padding-right:80px;
  --credit-padding-bottom:0px;
  --credit-padding-left:80px;
  --credit-font-size:20px;
  --credit-text-align:right;
}

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

.reflections-opening + .reflections-mood {
  margin-top: calc(100 / 880 * 100vh);
}

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

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

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

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

.reflections-editorial + .reflections-next-project {
  margin-top: calc(50 / 960 * 100vh);
}

.reflections-next-project + .footer {
  margin-top: calc(0 / 960 * 100vh);
}

/* FOOTER */

.footer {
  width:1440px;
  height:450px;
  margin:125px auto 0;
  padding:45px 80px 35px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:75px;
  color:var(--gray);
}

.footer::before {
  content:"";
  position:absolute;
  top:0;
  left:80px;
  right:80px;
  border-top:1px solid rgb(0 0 0 / 18%);
}

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

.footer-divider {
  width:2.25px;
  height:50px;
  background:currentColor;
}

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

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

.footer-name,
.footer-email {
  font-size:25px;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}