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

:root {
  --project-max-width:440px;
  --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;
  scroll-snap-type:y proximity;
  scroll-padding-top:0;
}

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

/* Shared 440 x 772 composition */

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

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

/* SHARED 440 x 772 COMPOSITION */

.reflections-section {
  position:relative;
  width:100%;
  max-width:var(--project-max-width);
  aspect-ratio: 440 / 772;
  height:auto;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  scroll-margin-top:var(--header-height);
}

/* Mood board, sketches, process, and catalog use a heading band
   above a 440 x 772 inner canvas. */

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

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

/* Explicitly scope shared absolute positioning to the four
   non-editorial image groups. Editorial has its own rule below. */

.reflections-canvas img[class*="reflections-mood-"],
.reflections-canvas img[class*="reflections-sketch-"],
.reflections-canvas img[class*="reflections-process-"],
.reflections-canvas img[class*="reflections-catalog-"] {
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
  margin:0;
}

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

.reflections-opening-body {
  position:relative;
  width:min(100%, 440px);
  max-width:440px;
  aspect-ratio:440 / 732;
  height:auto;
  margin:0 auto;
  overflow:hidden;
}

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

.reflections-statement {
  font-size:16px;
  font-weight:400;
  font-style:oblique;
  line-height:1.28;
  text-align:center;
}

.reflections-statement-body 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(135 / 440 * 100%);
  top:calc(271.1198 / 732 * 100%);
  width:calc(296.7041 / 440 * 100%);
}

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

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

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

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

/* MOOD BOARD */

.reflections-moodboard {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.reflections-moodboard-canvas {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(25 / 772 * 100%);
  width: 100%;
}

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

.reflections-mood-01 {
  left:calc(319.6805 / 440 * 100%);
  top:calc(292.4966 / 772 * 100%);
  width:calc(98.3195 / 440 * 100%);
}

.reflections-mood-02 {
  left:calc(22 / 440 * 100%);
  top:calc(404.5064 / 772 * 100%);
  width:calc(281.4286 / 440 * 100%);
}

.reflections-mood-03 {
  left:calc(156.7837 / 440 * 100%);
  top:calc(299.4264 / 772 * 100%);
  width:calc(146.645 / 440 * 100%);
}

.reflections-mood-04 {
  left:calc(156.7837 / 440 * 100%);
  top:calc(190.4716 / 772 * 100%);
  width:calc(146.645 / 440 * 100%);
}

.reflections-mood-05 {
  left:calc(22.5605 / 440 * 100%);
  top:calc(245.2142 / 772 * 100%);
  width:calc(117.9713 / 440 * 100%);
}

.reflections-mood-06 {
  left:calc(22.5603 / 440 * 100%);
  top:calc(140.6462 / 772 * 100%);
  width:calc(117.9723 / 440 * 100%);
}

.reflections-mood-07 {
  left:calc(319.6805 / 440 * 100%);
  top:calc(406.7173 / 772 * 100%);
  width:calc(98.3195 / 440 * 100%);
}

.reflections-mood-08 {
  left:calc(319.3297 / 440 * 100%);
  top:calc(153.0825 / 772 * 100%);
  width:calc(98.6703 / 440 * 100%);
}

/* SKETCHES
   Inner-canvas coordinate system: 440 x 772. */

.reflections-sketches {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.reflections-sketch-canvas {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(25 / 772 * 100%);
  width: 100%;
}

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

.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(239.8959 / 440 * 100%);
    top:calc(515.4631 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-02 {
    left:calc(11 / 440 * 100%);
    top:calc(46.3753 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-03 {
    left:calc(194.2282 / 440 * 100%);
    top:calc(58.3721 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-04 {
    left:calc(194.2282 / 440 * 100%);
    top:calc(304.3787 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-05 {
    left:calc(303.5337 / 440 * 100%);
    top:calc(402.5553 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-06 {
    left:calc(11 / 440 * 100%);
    top:calc(527.7213 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-07 {
    left:calc(105.9753 / 440 * 100%);
    top:calc(178.6067 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-08 {
    left:calc(292.3626 / 440 * 100%);
    top:calc(192.0258 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-09 {
    left:calc(105.9753 / 440 * 100%);
    top:calc(413.569 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

.reflections-sketch-10 {
    left:calc(11 / 440 * 100%);
    top:calc(279.0483 / 772 * 100%);
    width:calc(122.6368 / 440 * 100%);
}

/* PROCESS */

.reflections-process {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.reflections-details {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(25 / 772 * 100%);
  width: 100%;
}

.reflections-details img {
  position: absolute;
  display: block;
  height: auto;
  padding: 0;
}

.reflections-process-01 {
  left:calc(143.0389 / 440 * 100%);
  top:calc(569.2181 / 772 * 100%);
  width:calc(109.6361 / 440 * 100%);
}
.reflections-process-02 {
  left:calc(143.0389 / 440 * 100%);
  top:calc(653.3449 / 772 * 100%);
  width:calc(71.2557 / 440 * 100%);
}
.reflections-process-03 {
  left:calc(143.0389 / 440 * 100%);
  top:calc(274.5401 / 772 * 100%);
  width:calc(75.5633 / 440 * 100%);
}
.reflections-process-04 {
  left:calc(198.9159 / 440 * 100%);
  top:calc(48.1839 / 772 * 100%);
  width:calc(64.0335 / 440 * 100%);
}
.reflections-process-05 {
  left:calc(278.0627 / 440 * 100%);
  top:calc(60.3431 / 772 * 100%);
  width:calc(112.0983 / 440 * 100%);
}
.reflections-process-06 {
  left:calc(233.7155 / 440 * 100%);
  top:calc(274.5401 / 772 * 100%);
  width:calc(173.2535 / 440 * 100%);
}
.reflections-process-07 {
  left:calc(48.515 / 440 * 100%);
  top:calc(64.9371 / 772 * 100%);
  width:calc(135.2875 / 440 * 100%);
}
.reflections-process-08 {
  left:calc(60.6578 / 440 * 100%);
  top:calc(550.9017 / 772 * 100%);
  width:calc(66.3811 / 440 * 100%);
}
.reflections-process-09 {
  left:calc(50.408 / 440 * 100%);
  top:calc(177.7927 / 772 * 100%);
  width:calc(47.8649 / 440 * 100%);
}
.reflections-process-10 {
  left:calc(33.031 / 440 * 100%);
  top:calc(274.5401 / 772 * 100%);
  width:calc(94.8945 / 440 * 100%);
}
.reflections-process-11 {
  left:calc(33.031 / 440 * 100%);
  top:calc(446.3398 / 772 * 100%);
  width:calc(94.8945 / 440 * 100%);
}
.reflections-process-12 {
  left:calc(143.0389 / 440 * 100%);
  top:calc(414.7927 / 772 * 100%);
  width:calc(109.6361 / 440 * 100%);
}
.reflections-process-13 {
  left:calc(113.3863 / 440 * 100%);
  top:calc(177.7927 / 772 * 100%);
  width:calc(149.5631 / 440 * 100%);
}
.reflections-process-14 {
  left:calc(267.7883 / 440 * 100%);
  top:calc(414.7927 / 772 * 100%);
  width:calc(129.8053 / 440 * 100%);
}

/* CATALOG */

.reflections-catalog {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.reflections-lookbook {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(25 / 772 * 100%);
  width: 100%;
}

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

.reflections-catalog-01 {
  left:calc(11 / 440 * 100%);
  top:calc(100.2777 / 772 * 100%);
  width:calc(190.2617 / 440 * 100%);
}
.reflections-catalog-02 {
  left:calc(228.7509 / 440 * 100%);
  top:calc(33.4481 / 772 * 100%);
  width:calc(200.2491 / 440 * 100%);
}
.reflections-catalog-03 {
  left:calc(11 / 440 * 100%);
  top:calc(413.1594 / 772 * 100%);
  width:calc(190.2617 / 440 * 100%);
}
.reflections-catalog-04 {
  left:calc(228.7509 / 440 * 100%);
  top:calc(361.311 / 772 * 100%);
  width:calc(200.2491 / 440 * 100%);
}

/* EDITORIAL
   Dedicated section and layout, matching the working Eternal Bonds architecture. */

.reflections-editorial {
  aspect-ratio: 440 / 772;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  overflow: hidden;
}

.reflections-editorial-layout {
  aspect-ratio: 440 / 772;
  position: absolute;
  left: 0;
  top: calc(0 / 772 * 100%);
  width: 100%;
}

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

.reflections-editorial-01 {
  left:calc(38.7445 / 440 * 100%);
  top:calc(267.7635 / 772 * 100%);
  width:calc(66.9832 / 440 * 100%);
}
.reflections-editorial-02 {
  left:calc(243.9087 / 440 * 100%);
  top:calc(131.0331 / 772 * 100%);
  width:calc(89.4583 / 440 * 100%);
}
.reflections-editorial-03 {
  left:calc(245.0404 / 440 * 100%);
  top:calc(286.6519 / 772 * 100%);
  width:calc(74.3921 / 440 * 100%);
}
.reflections-editorial-04 {
  left:calc(327.0687 / 440 * 100%);
  top:calc(283.9605 / 772 * 100%);
  width:calc(97.1192 / 440 * 100%);
}
.reflections-editorial-05 {
  left:calc(120.7277 / 440 * 100%);
  top:calc(98.9115 / 772 * 100%);
  width:calc(108.181 / 440 * 100%);
  z-index:1;
}
.reflections-editorial-06 {
  left:calc(19.3365 / 440 * 100%);
  top:calc(116.9657 / 772 * 100%);
  width:calc(86.3912 / 440 * 100%);
}
.reflections-editorial-07 {
  left:calc(326.5027 / 440 * 100%);
  top:calc(444.6393 / 772 * 100%);
  width:calc(97.1192 / 440 * 100%);
}
.reflections-editorial-08 {
  left:calc(120.7277 / 440 * 100%);
  top:calc(462.9294 / 772 * 100%);
  width:calc(108.7468 / 440 * 100%);
}
.reflections-editorial-09 {
  left:calc(244.4745 / 440 * 100%);
  top:calc(420.0215 / 772 * 100%);
  width:calc(67.0283 / 440 * 100%);
}
.reflections-editorial-10 {
  left:calc(348.367 / 440 * 100%);
  top:calc(145.4158 / 772 * 100%);
  width:calc(78.5901 / 440 * 100%);
}
.reflections-editorial-11 {
  left:calc(13.0429 / 440 * 100%);
  top:calc(383.2383 / 772 * 100%);
  width:calc(92.6847 / 440 * 100%);
}
.reflections-editorial-12 {
  left:calc(120.7277 / 440 * 100%);
  top:calc(283.9604 / 772 * 100%);
  width:calc(109.3126 / 440 * 100%);
}

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

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

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

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


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

.reflections-opening-body + .reflections-moodboard {
  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: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;
}