/* Reflections of Displacement responsive project layout.
   Composition controls follow the same section/canvas structure as Eternal Bonds.
   Tablet artboard maximum: 834px. */

:root {
  --project-max-width:834px;
  --header-height:64px;
  --page-margin:2.5%;
  --black:#000;
  --white:#fff;
  --gray:#888;
}

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

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

html {
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body {
  overflow-x:clip;
  background:var(--white);
  color:var(--black);
  font-family:"futura-pt-condensed", sans-serif;
}

img {
  display:block;
}

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

/* HEADER */

/* REFLECTIONS PAGE */

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

main {
  width:100%;
  max-width:var(--project-max-width);
  margin:0 auto;
}

/* SHARED 1440 x 1024 COMPOSITION */

.reflections-section {
  position:relative;
  width:100%;
  max-width:var(--project-max-width);
  aspect-ratio:1440 / 1024;
  height:auto;
  margin:0 auto;
  padding:0;
  overflow:hidden;
}

.reflections-section h2 {
  position:absolute;
  left:calc(24 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  z-index:20;
  margin:0;
  font-size:clamp(12px, calc(44 / 1440 * 100vw), 44px);
  font-weight:300;
  line-height:1;
}

/* Sections with a heading band and a 1440 x 1024 inner canvas. */

.reflections-section:has(> .reflections-canvas) {
  aspect-ratio:1440 / 1174;
}

.reflections-canvas {
  position:absolute;
  left:0;
  top:calc(150 / 1174 * 100%);
  width:100%;
  height:calc(1024 / 1174 * 100%);
}

.reflections-canvas img {
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
  margin:0;
}

/* OPENING STATEMENT */
/* Reflections of Displacement opening board
   Desktop coordinates are translated from the 1440 × 1024 Illustrator artboard. */

.reflections-opening-statement {
  margin:0;
  font-family:"futura-pt-condensed", sans-serif;
  font-style:italic;
}

.reflections-opening-statement p {
  margin:0;
}

.reflections-opening-statement span {
  display:block;
  white-space:nowrap;
}

.reflections-opening-question {
  font-size:29px;
  font-weight:200;
  line-height:1.28;
}

.reflections-opening-question--offset {
  margin:24px 0 34px 220px !important;
}

.reflections-opening-body {
  font-size:27px;
  font-weight:500;
  line-height:1.22;
}

.reflections-opening-closing {
  margin-top:calc(50 / 1024 * 100%);
  font-size:28px;
  font-weight:200;
  line-height:1.25;
}

.reflections-opening-closing p + p {
  margin-top:calc(23 / 1024 * 100%);
}

.reflections-opening-closing p:nth-child(2) {
  margin-left:calc(260 / 1440 * 100%);
}

.reflections-statement-copy {
    position:absolute;
    left:calc(80 / 1440 * 100%);
    top:calc(196 / 1024 * 100%);
    width:calc(520 / 1440 * 100%);
}

.reflections-opening-statement {
    margin:0;
    font-size:36px;
    font-weight:200;
    font-style:italic;
    line-height:1.15;
}

.reflections-statement-image {
    position:absolute;
    right:calc(80 / 1440 * 100%);
    top:calc(220 / 1024 * 100%);
    width:calc(650 / 1440 * 100%);
    height:auto;
}

/* MOOD BOARD */

.reflections-mood-01 {
  left:calc(997.7 / 1440 * 100%);
  top:calc(614.5 / 1024 * 100%);
  width:calc(329 / 1440 * 100%);
}

.reflections-mood-02 {
  left:calc(476.6 / 1440 * 100%);
  top:calc(466.1 / 1024 * 100%);
  width:calc(496.4 / 1440 * 100%);
}

.reflections-mood-03 {
  left:calc(711 / 1440 * 100%);
  top:calc(274.2 / 1024 * 100%);
  width:calc(266 / 1440 * 100%);
}

.reflections-mood-04 {
  left:calc(715.6 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  width:calc(257 / 1440 * 100%);
}

.reflections-mood-05 {
  left:calc(477.67 / 1440 * 100%);
  top:calc(181.9 / 1024 * 100%);
  width:calc(214 / 1440 * 100%);
}

.reflections-mood-06 {
  left:calc(161 / 1440 * 100%);
  top:calc(201 / 1024 * 100%);
  width:calc(288 / 1440 * 100%);
}

.reflections-mood-07 {
  left:calc(113 / 1440 * 100%);
  top:calc(442.5 / 1024 * 100%);
  width:calc(338 / 1440 * 100%);
}

.reflections-mood-08 {
  left:calc(997.7 / 1440 * 100%);
  top:calc(201 / 1024 * 100%);
  width:calc(309.41 / 1440 * 100%);
}

/* SKETCHES */

.reflections-sketch-01,
.reflections-sketch-02 {
    width:calc(1100 / 1440 * 100%);
    height:auto;
    max-width:none;
    object-fit:contain;
    mix-blend-mode:multiply;
}

.reflections-sketch-01 {
    left:calc(170 / 1440 * 100%);
    top:calc(80 / 1024 * 100%);
}

.reflections-sketch-02 {
    left:calc(170 / 1440 * 100%);
    top:calc(501.6 / 1024 * 100%);
}

/* PROCESS */

.reflections-process-01 {
  left:calc(151 / 1440 * 100%);
  top:calc(125.75 / 1024 * 100%);
  width:calc(307 / 1440 * 100%);
}

.reflections-process-02 {
  left:calc(187 / 1440 * 100%);
  top:calc(351 / 1024 * 100%);
  width:calc(118 / 1440 * 100%);
}

.reflections-process-03 {
  left:calc(408 / 1440 * 100%);
  top:calc(674 / 1024 * 100%);
  width:calc(135 / 1440 * 100%);
}

.reflections-process-04 {
  left:calc(844 / 1440 * 100%);
  top:calc(126 / 1024 * 100%);
  width:calc(153 / 1440 * 100%);
}

.reflections-process-05 {
  left:calc(151 / 1440 * 100%);
  top:calc(505 / 1024 * 100%);
  width:calc(221 / 1440 * 100%);
}

.reflections-process-06 {
  left:calc(854 / 1440 * 100%);
  top:calc(614 / 1024 * 100%);
  width:calc(393 / 1440 * 100%);
}

.reflections-process-07 {
  left:calc(341 / 1440 * 100%);
  top:calc(351 / 1024 * 100%);
  width:calc(164 / 1440 * 100%);
}

.reflections-process-08 {
  left:calc(541 / 1440 * 100%);
  top:calc(351 / 1024 * 100%);
  width:calc(66 / 1440 * 100%);
}

.reflections-process-09 {
  left:calc(494 / 1440 * 100%);
  top:calc(125.75 / 1024 * 100%);
  width:calc(113 / 1440 * 100%);
}

.reflections-process-10 {
  left:calc(643 / 1440 * 100%);
  top:calc(161 / 1024 * 100%);
  width:calc(165 / 1440 * 100%);
}

.reflections-process-11 {
  left:calc(579 / 1440 * 100%);
  top:calc(674 / 1024 * 100%);
  width:calc(240 / 1440 * 100%);
}

.reflections-process-12 {
  left:calc(683 / 1440 * 100%);
  top:calc(469 / 1024 * 100%);
  width:calc(133 / 1440 * 100%);
}

.reflections-process-13 {
  left:calc(408 / 1440 * 100%);
  top:calc(505 / 1024 * 100%);
  width:calc(240 / 1440 * 100%);
}

.reflections-process-14 {
  left:calc(1033 / 1440 * 100%);
  top:calc(126 / 1024 * 100%);
  width:calc(254 / 1440 * 100%);
}

/* CATALOG */

.reflections-catalog-01 {
  left:calc(120 / 1440 * 100%);
  top:calc(255 / 1024 * 100%);
  width:calc(304 / 1440 * 100%);
}

.reflections-catalog-02 {
  left:calc(440 / 1440 * 100%);
  top:calc(255 / 1024 * 100%);
  width:calc(304 / 1440 * 100%);
}

.reflections-catalog-03 {
  left:calc(760 / 1440 * 100%);
  top:calc(255 / 1024 * 100%);
  width:calc(304 / 1440 * 100%);
}

.reflections-catalog-04 {
  left:calc(1080 / 1440 * 100%);
  top:calc(255 / 1024 * 100%);
  width:calc(290 / 1440 * 100%);
}

/* EDITORIAL */

.reflections-editorial-01 {
  left:calc(612 / 1440 * 100%);
  top:calc(492.5 / 1024 * 100%);
  width:calc(254 / 1440 * 100%);
}

.reflections-editorial-02 {
  left:calc(100 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  width:calc(206 / 1440 * 100%);
}

.reflections-editorial-03 {
  left:calc(80 / 1440 * 100%);
  top:calc(423 / 1024 * 100%);
  width:calc(286 / 1440 * 100%);
}

.reflections-editorial-04 {
  left:calc(391 / 1440 * 100%);
  top:calc(585 / 1024 * 100%);
  width:calc(195 / 1440 * 100%);
}

.reflections-editorial-05 {
  left:calc(306 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  width:calc(356 / 1440 * 100%);
}

.reflections-editorial-06 {
  left:calc(662 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  width:calc(249 / 1440 * 100%);
}

.reflections-editorial-07 {
  left:calc(937 / 1440 * 100%);
  top:calc(100 / 1024 * 100%);
  width:calc(112 / 1440 * 100%);
}

.reflections-editorial-08 {
  left:calc(937 / 1440 * 100%);
  top:calc(294 / 1024 * 100%);
  width:calc(112 / 1440 * 100%);
}

.reflections-editorial-09 {
  left:calc(891 / 1440 * 100%);
  top:calc(487 / 1024 * 100%);
  width:calc(140 / 1440 * 100%);
}

.reflections-editorial-10 {
  left:calc(891 / 1440 * 100%);
  top:calc(723 / 1024 * 100%);
  width:calc(140 / 1440 * 100%);
}

.reflections-editorial-11 {
  left:calc(1075 / 1440 * 100%);
  top:calc(80 / 1024 * 100%);
  width:calc(289 / 1440 * 100%);
}

.reflections-editorial-12 {
  left:calc(1057 / 1440 * 100%);
  top:calc(559 / 1024 * 100%);
  width:calc(257 / 1440 * 100%);
}

/* RESPONSIVE COMPOSITION TYPOGRAPHY */

.reflections-opening-question {
  font-size:clamp(8px, calc(29 / 1440 * 100vw), 29px);
}

.reflections-opening-body {
  font-size:clamp(8px, calc(27 / 1440 * 100vw), 27px);
}

.reflections-opening-closing {
  margin-top:calc(50 / 1024 * 100%);
  font-size:clamp(8px, calc(28 / 1440 * 100vw), 28px);
}

.reflections-opening-question--offset {
  margin:calc(24 / 1024 * 100%) 0 calc(34 / 1024 * 100%) calc(220 / 520 * 100%) !important;
}

.reflections-opening-closing p + p {
  margin-top:calc(23 / 1024 * 100%);
}

.reflections-opening-closing p:nth-child(2) {
  margin-left:calc(260 / 520 * 100%);
}

/* NEXT PROJECT */

.reflections-next-project {
  width:100%;
  min-height:360px;
  margin:0 auto;
  padding:48px var(--page-margin);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
}

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

.reflections-next-project a {
  font-size:clamp(54px, 7vw, 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:var(--project-max-width);
  --credit-padding-top:20px;
  --credit-padding-right:var(--page-margin);
  --credit-padding-bottom:20px;
  --credit-padding-left:var(--page-margin);
  --credit-font-size:20px;
  --credit-text-align:right;
}

/* FOOTER */

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

.footer::before {
  display:none;
}

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

.footer-divider {
  width:1px;
  height:28px;
  background:currentColor;
}

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

.footer-name,
.footer-email {
  font-size:22px;
  white-space:nowrap;
}

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

/* LIGHTBOX */

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

.image-lightbox {
  position:fixed;
  inset:0;
  z-index:10000;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgb(255 255 255 / 96%);
}

.image-lightbox-image {
  width:auto;
  height:auto;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px);
  object-fit:contain;
}

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

/* Current opening-board markup compatibility.
   Keeps the existing mobile composition proportions at tablet scale. */
.reflections-opening-body {
  position:relative;
  width:100%;
  max-width:812px;
  aspect-ratio:440 / 732;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  font-size:clamp(20px, 2.6vw, 27px);
  font-weight:400;
  font-style:italic;
  line-height:1.28;
  text-align:center;
}

.reflections-opening-body .reflections-statement,
.reflections-opening-body .reflections-opening {
  position:absolute;
  inset:0;
}

.reflections-opening-body .reflections-statement p,
.reflections-opening-body .reflections-question-03 p {
  margin:0;
}

.reflections-opening-body .reflections-question-01 {
  position:absolute;
  left:calc(156 / 440 * 100%);
  top:calc(271.1198 / 732 * 100%);
  width:calc(296.7041 / 440 * 100%);
  text-align:left;
}

.reflections-opening-body .reflections-question-02 {
  position:absolute;
  right:calc(39.333 / 440 * 100%);
  top:calc(316.1033 / 732 * 100%);
  width:calc(111.8245 / 440 * 100%);
  text-align:right;
  white-space:nowrap;
}

.reflections-opening-body .reflections-statement-01 {
  position:absolute;
  left:calc(40.3545 / 440 * 100%);
  top:calc(353.5647 / 732 * 100%);
  width:calc(296.7041 / 440 * 100%);
  text-align:left;
}

.reflections-opening-body .reflections-question-03 {
  position:absolute;
  left:calc(40.3545 / 440 * 100%);
  top:calc(641.3402 / 732 * 100%);
  width:calc(296.7041 / 440 * 100%);
}

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

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

.reflections-opening-body .reflections-opening-image {
  position:absolute;
  left:calc(40.3545 / 440 * 100%);
  top:calc(12.0888 / 732 * 100%);
  width:calc(360.3125 / 440 * 100%);
  height:auto;
}