/* Catelier 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;
}


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


/* CATELIER PROJECT: independent Illustrator section artboards */

.catelier-opening{
  width:100%;
  max-width:var(--catelier-max-width);
  min-height:0;
  aspect-ratio:440 / 880;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.catelier-mood {
  width:100%;
  max-width:var(--catelier-max-width);
  min-height:0;
  aspect-ratio:440 / 772;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.catelier-sketches{
  width:100%;
  max-width:var(--catelier-max-width);
  min-height:0;
  aspect-ratio:440 / 772;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.catelier-samples{
  width:100%;
  max-width:var(--catelier-max-width);
  min-height:0;
  aspect-ratio:440 / 772;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.catelier-process{
  width:100%;
  max-width:var(--catelier-max-width);
  min-height:0;
  aspect-ratio:440 / 772;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.catelier-museum {
  width:100%;
  max-width:var(--catelier-museum-max-width);
  min-height:0;
  aspect-ratio:440 / 772;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.catelier-mood h2,
.catelier-sketches h2,
.catelier-samples h2,
.catelier-process h2,
.catelier-museum 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;
}

.catelier-mood > div,
.catelier-sketches > div,
.catelier-samples > div,
.catelier-process > div,
.catelier-museum > div {
  position:absolute;
  inset:0;
  transform:translateY(calc(50 / 440 * min(100vw,var(--catelier-max-width))));
}

.catelier-moodboard img,
.catelier-sketch img,
.catelier-samples img,
.catelier-process img,
.catelier-museum img {
  position:absolute;
  display:block;
  height:auto;
  margin:0;
}

.catelier-statement {
  font-size:21px;
  font-weight:400;
  font-style:oblique;
  line-height:1.28;
  position:absolute;
  display:block;
  margin:0;
  left:calc(63.118 / 440 * 100%);
  top:calc(272.6977 / 732 * 100%);
  width:calc(316.127 / 440 * 100%);
  height:alc(431.4219 / 732 * 100%);
}

.catelier-opening-statement {
  position:absolute;
  margin:0;
  text-align: left;
  right:calc(63.118  / 440 * 100%);
  top:calc(272.6977/ 732 * 100%);
  width:calc(316.127 / 440 * 100%);
}

.catelier-opening-statement-02 {
  position:absolute;
  margin:0;
  text-align: left;
  left:calc(63.118 / 440 * 100%);
  top:calc(531.0107 / 732 * 100%);
  width:calc(316.127 / 440 * 100%);
}

.catelier-statement-image {
  left:calc(147.6922 / 440 * 100%);
  top:calc(17.5461 / 732 * 100%);
  width:calc(156.8055 / 440 * 100%);
  max-height:100%;
  position: absolute;
}

/*
=================
MOOD
=================
*/

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

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

.catelier-moodboard-canvas img{
  height:auto;
  position: absolute;
}

.catelier-mood-01 {
  position:absolute;
  left:calc(294.6228 / 440 * 100%);
  top:calc(428.3011 / 772 * 100%);
  width:calc(89.0067 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-02 {
  position:absolute;
  left:calc(21.9285 / 440 * 100%);
  top:calc(261.2024 / 772 * 100%);
  width:calc(70.6939 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-03 {
  position:absolute;
  left:calc(295.1413 / 440 * 100%);
  top:calc(254.9075 / 772 * 100%);
  width:calc(122.9302 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-04 {
  position:absolute;
  left:calc(192.5798 / 440 * 100%);
  top:calc(74.5942 / 772 * 100%);
  width:calc(89.1664 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-05 {
  position:absolute;
  left:calc(45.7422 / 440 * 100%);
  top:calc(56.9642 / 772 * 100%);
  width:calc(133.4425 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-06 {
  position:absolute;
  left:calc(103.9913 / 440 * 100%);
  top:calc(187.9276 / 772 * 100%);
  width:calc(177.9196 / 440 * 100%);
  z-index: 1002;
}

.catelier-mood-07 {
  position:absolute;
  left:calc(80.8587 / 440 * 100%);
  top:calc(467.6259 / 772 * 100%);
  width:calc(196.652 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-08 {
  position:absolute;
  left:calc(295.1413 / 440 * 100%);
  top:calc(120.9926 / 772 * 100%);
  width:calc(87.9695 / 440 * 100%);
   z-index: 1003;
}

.catelier-mood-outline {
  position:absolute;
  left:calc(0 / 440 * 100%);
  top:calc(0 / 772 * 100%);
  width:calc(0 / 440 * 100%);
   z-index: 1004;
  pointer-events:none;
}

.catelier-mood-outline-mobile {
  position:absolute;
  left:calc(45.7422 / 440 * 100%);
  top:calc(46.9562 / 772 * 100%);
  width:calc(249.3992 / 440 * 100%);
  z-index:1005;
  pointer-events:none;
}

/*
=================
SKETCH
=================
*/

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

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

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


.catelier-sketch-01 {
  position:absolute;
  left:calc(203.8697 / 440 * 100%);
  top:calc(373.8602 / 772 * 100%);
  width:calc(110.0451 / 440 * 100%);
}
.catelier-sketch-02 {
  position:absolute;
  left:calc(307.8703 / 440 * 100%);
  top:calc(191.9822 / 772 * 100%);
  width:calc(110.0451 / 440 * 100%);
}
.catelier-sketch-03 {
  position:absolute;
  left:calc(211.264 / 440 * 100%);
  top:calc(81.6541 / 772 * 100%);
  width:calc(110.0451 / 440 * 100%);
}
.catelier-sketch-04 {
  position:absolute;
  left:calc(112.8386 / 440 * 100%);
  top:calc(210.4332/ 772 * 100%);
  width:calc(110.0451 / 440 * 100%);
}
.catelier-sketch-05 {
  position:absolute;
  left:calc(38.819 / 440 * 100%);
  top:calc(59.4203 / 772 * 100%);
  width:calc(110.0451 / 440 * 100%);
}
.catelier-sketch-06 {
  position:absolute;
  left:calc(11 / 440 * 100%);
  top:calc(373.8602 / 772 * 100%);
  width:calc(110.0451 / 440 * 100%);
}

/*
=================
SAMPLES
=================
*/


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

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

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


.catelier-sample-01 {
  position:absolute;
  left:calc(35.875 / 440 * 100%);
  top:calc(89.9403 / 772 * 100%);
  width:calc(123.4184 / 440 * 100%);
}

.catelier-sample-02 {
  position:absolute;
  left:calc(173.7919 / 440 * 100%);
  top:calc(89.9403 / 772 * 100%);
  width:calc(123.4184 / 440 * 100%);
}

.catelier-sample-03 {
  position:absolute;
  left:calc(311.7088 / 440 * 100%);
  top:calc(126.9344 / 772 * 100%);
  width:calc(110.4396 / 440 * 100%);
}

.catelier-sample-04 {
  position:absolute;
  left:calc(311.7088 / 440 * 100%);
  top:calc(338.2823/ 772 * 100%);
  width:calc(110.4396 / 440 * 100%);
}

.catelier-sample-05 {
  position:absolute;
  left:calc(18.8816 / 440 * 100%);
  top:calc(323.8493 / 772 * 100%);
  width:calc(117.0008 / 440 * 100%);
}

.catelier-sample-06 {
  position:absolute;
  left:calc(150.3809 / 440 * 100%);
  top:calc(323.8493 / 772 * 100%);
  width:calc(146.8294 / 440 * 100%);
}

/*
=================
PROCESS
=================
*/

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

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

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

.catelier-process-01 {
  position:absolute;
  left:calc(149.6451 / 440 * 100%);
  top:calc(65.5233 / 772 * 100%);
  width:calc(111.8151 / 440 * 100%);
}

.catelier-process-02 {
  position:absolute;
  left:calc(274.1914 / 440 * 100%);
  top:calc(490.1456 / 772 * 100%);
  width:calc(92.2733 / 440 * 100%);
}

.catelier-process-03 {
  position:absolute;
  left:calc(43.6009 / 440 * 100%);
  top:calc(244.1543 / 772 * 100%);
  width:calc(93.3134 / 440 * 100%);
}

.catelier-process-04 {
  position:absolute;
  left:calc(28.0931  / 440 * 100%);
  top:calc(484.7708 / 772 * 100%);
  width:calc(108.8215 / 440 * 100%);
}

.catelier-process-05 {
  position:absolute;
  left:calc(146.9143 / 440 * 100%);
  top:calc(418.2859 / 772 * 100%);
  width:calc(117.2766 / 440 * 100%);
}

.catelier-process-06 {
  position:absolute;
  left:calc(274.1915 / 440 * 100%);
  top:calc(73.1819 / 772 * 100%);
  width:calc(133.0347 / 440 * 100%);
}

.catelier-process-07 {
  position:absolute;
  left:calc(274.1911 / 440 * 100%);
  top:calc(319.6884 / 772 * 100%);
  width:calc(118.9096 / 440 * 100%);
}

.catelier-process-08 {
  position:absolute;
  left:calc(27.4826 / 440 * 100%);
  top:calc(76.8464 / 772 * 100%);
  width:calc(109.4317 / 440 * 100%);
}

.catelier-process-09 {
  position:absolute;
  left:calc(147.181 / 440 * 100%);
  top:calc(201.435 / 772 * 100%);
  width:calc(116.3535 / 440 * 100%);
}

.catelier-process-10 {
  position:absolute;
  left:calc(147.1806 / 440 * 100%);
  top:calc(503.4864 / 772 * 100%);
  width:calc(117.0105 / 440 * 100%);
}

.catelier-process-11 {
  position:absolute;
  left:calc(43.6009 / 440 * 100%);
  top:calc(317.6112 / 772 * 100%);
  width:calc(93.3134 / 440 * 100%);
}

/*
=================
MUSEUM
=================
*/

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

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

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

.catelier-museum-01 {
  position:absolute;
  left:calc(344.9619 / 440 * 100%);
  top:calc(72.3427 / 772 * 100%);
  width:calc(63.8609 / 440 * 100%);
  transform:rotate(90deg);
}

.catelier-museum-02 {
  position:absolute;
  left:calc(218.7305 / 440 * 100%);
  top:calc(576.8168 / 772 * 100%);
  width:calc(76.0202 / 440 * 100%);
  transform:rotate(90deg);
}

.catelier-museum-03 {
  position:absolute;
  left:calc(13.9204 / 440 * 100%);
  top:calc(398.2392 / 772 * 100%);
  width:calc(175.5492 / 440 * 100%);
}

.catelier-museum-04 {
  position:absolute;
  left:calc(199.4697 / 440 * 100%);
  top:calc(473.4272 / 772 * 100%);
  width:calc(155.487 / 440 * 100%);
}

.catelier-museum-05 {
  position:absolute;
  left:calc(13.9204 / 440 * 100%);
  top:calc(102.6427 / 772 * 100%);
  width:calc(175.5492 / 440 * 100%);
}

.catelier-museum-06 {
  position:absolute;
  left:calc(329.0213 / 440 * 100%);
  top:calc(317.9147 / 772 * 100%);
  width:calc(97.0583 / 440 * 100%);
}

.catelier-museum-07 {
  position:absolute;
  left:calc(199.7471 / 440 * 100%);
  top:calc(283.788 / 772 * 100%);
  width:calc(119.8074 / 440 * 100%);
}

.catelier-museum-08 {
  position:absolute;
  left:calc(199.7471 / 440 * 100%);
  top:calc(94.1717 / 772 * 100%);
  width:calc(119.8074 / 440 * 100%);
}

.catelier-museum-09 {
  position:absolute;
  left:calc(329.0213 / 440 * 100%);
  top:calc(162.255 / 772 * 100%);
  width:calc(97.0583 / 440 * 100%);
}

.project-photography-credit {
  position:static;
  display:block;
  clear:both;
  width:440px;
  max-width:100%;
  margin:0 auto;
  padding:24px 80px 0;
  color:#888;
  font-size:20px;
  font-weight:300;
  line-height:1.2;
  text-align:right;
}

.project-photography-credit a,
.project-photography-credit a:visited,
.project-photography-credit a:hover,
.project-photography-credit a:active {
  color:inherit;
  text-decoration:none;
}


.project-photography-credit {
  position:static;
  display:block;
  clear:both;
  width:100%;
  max-width:var(--catelier-museum-max-width);
  margin:0 auto;
  padding:24px clamp(20px,5vw,80px) 0;
  color:#888;
  font-size:clamp(14px,2.25vw,20px);
  font-weight:300;
  line-height:1.2;
  text-align:right;
}

.catelier-next-project {
  width:100%;
  max-width:var(--catelier-max-width);
  min-height:clamp(260px,33vw,475px);
  margin:0 auto;
  padding:calc(80 / 1440 * 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end
}

.catelier-next-project p {
  margin:0 0 15px;
  font-size:clamp(16px,2vw,22px);
  opacity:.5
}

.catelier-next-project a {
  color:#000;
  font-size:clamp(36px,5vw,70px);
  line-height:1;
  text-decoration:none
}

.project-photography-credit,.footer {
  width:100%;
  max-width:var(--catelier-max-width)
}



.project-photography-credit {
  margin:0 auto;
  padding:24px clamp(20px,5vw,80px) 0;
  color:#888;
  text-align:right
}


.catelier-canvas img {
  display:block;width:100%;
  max-width:100%;
  max-height:calc(390 / 1440 * min(100vw,var(--catelier-max-width)));
  object-fit:contain
}

.catelier-moodboard-canvas,
.catelier-process-canvas {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.catelier-sketch-canvas,
.catelier-samples-canvas,
.catelier-museum-canvas {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.catelier-next-project {
  width:100%;max-width:var(--catelier-max-width);
  min-height:clamp(260px,33vw,475px);
  margin:0 auto;
  padding:calc(80 / 1680 * 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end
}

.catelier-next-project p {
  margin:0 0 15px;
  font-size:clamp(16px,2vw,22px);
  opacity:.5
}

.catelier-next-project a {
  color:#000;
  font-size:clamp(36px,5vw,70px);
  line-height:1;
  text-decoration:none
}

.project-photography-credit,
.footer {
  width:100%;
  max-width:var(--catelier-max-width)
}


.project-photography-credit {
  margin:0 auto;
  padding:24px clamp(20px,5vw,80px) 0;
  color:#888;
  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) and (max-height:500px) {
  :root { --catelier-max-width:832px; }
}


/* CATELIER PORTRAIT OPENING
   Preserve the 440 x 880 composition and scale it with the viewport. */
@media (orientation: portrait) {
  body {
    text-size-adjust:none;
    -webkit-text-size-adjust:none;
  }

  .catelier-opening {
    width:100%;
    max-width:var(--catelier-max-width);
    min-height:0;
    aspect-ratio:440 / 880;
    padding:0;
    display:block;
    position:relative;
    overflow:hidden;
  }

  .catelier-statement {
    position:absolute;
    left:calc(57.5 / 440 * 100%);
    top:calc(266.2549 / 880 * 100%);
    width:calc(325 / 440 * 100%);
    height:calc(440 / 880 * 100%);
    padding:1.464159% 1.008477% 0;
    text-align:center;
  }

  .catelier-opening-statement,
  .catelier-opening-statement-02 {
    position:static;
    width:100%;
    margin:0;
    font-size:calc(21 / 440 * min(100vw, var(--catelier-max-width)));
    line-height:1.15;
  }

  .catelier-opening-statement-02 {
    margin-top:9.846154%;
  }

  .catelier-opening-statement span,
  .catelier-opening-statement-02 span {
    display:inline;
    white-space:normal;
  }

  .catelier-statement-image {
    position:absolute;
    left:calc(147.6922 / 440 * 100%);
    top:calc(17.5461 / 880 * 100%);
    width:calc(144.6157 / 440 * 100%);
    max-height:100%;
    margin:0;
    object-fit:contain;
  }
}