@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

div.clear {
  clear: both;
  line-height: 0;
  height: 0;
  font-size: 0;
  border: 0;
  margin: 0;
  padding: 0; }

img, video {
  display: block; }

i, em {
  font-style: italic; }


@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }


  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2, h3 {
    page-break-after: avoid; } }
@font-face {
  font-family: 'PxGroteskRegular';
  src: url("../font/PxGroteskRegular-Regular.eot");
  font-style: normal;
  font-weight: normal; }
.menu ul, .menu li, article, .meta, .row {
  *zoom: 1; }
  .menu ul:before, .menu li:before, article:before, .meta:before, .row:before, .menu ul:after, .menu li:after, article:after, .meta:after, .row:after {
    content: " ";
    display: table; }
  .menu ul:after, .menu li:after, article:after, .meta:after, .row:after {
    clear: both; }


html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  zoom: 1;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #111;
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.7vw;
  line-height: 1.5em;
  -moz-animation: pageFadeIn 800ms;
  -ms-animation: pageFadeIn 800ms;
  -webkit-animation: pageFadeIn 800ms;
  animation: pageFadeIn 800ms; }
  @media (max-width: 760px) {
    body {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 4vw;
      line-height: 1.5em;
    }
  }
  @media (min-width: 1300px) {
    body {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 22px;
      line-height: 1.5em; } }

a {
  color: #111;
  border: 0;
  text-decoration: none; }

a:hover {
  color: #111;
  border: 0;
  text-decoration: none; }

::selection {
  background: #eee;
  color: #111;
  text-shadow: none; }

.group:after {
  content: '';
  display: table;
  clear: both; }

.gradient-over {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 250vw;
  height: 250vw;
  margin-top: -125vw;
  margin-left: -125vw;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 15%, white 35%);
  z-index: 10;
  pointer-events: none;
  display: block;
  display: none; }

.site-title,
.single-title,
.publication-title {
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 6.5vw;
  line-height: 1em;
  font-weight: 400;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 90vw;
  z-index: 102;
  letter-spacing: -0.05em;
  color: black;
  opacity: 0.9;
  z-index: 3;
  -moz-transition: colour 100ms, opacity 100ms;
  -ms-transition: colour 100ms, opacity 100ms;
  -webkit-transition: colour 100ms, opacity 100ms;
  transition: colour 100ms, opacity 100ms;
  -webkit-backface-visibility: hidden; }
  @media (min-width: 1300px) {
    .site-title,
    .single-title,
    .publication-title {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 84px;
      line-height: 1em; } }
  @media (max-width: 760px) {
    .site-title,
    .single-title,
    .publication-title {
      position: absolute;
      top: 44vh;
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 10vw;
      line-height: 1em; } }

.nav {
  z-index: 1;
  -moz-transition: transform 800ms, background 100ms;
  -ms-transition: transform 800ms, background 100ms;
  -webkit-transition: transform 800ms, background 100ms;
  transition: transform 800ms, background 100ms;
  background-color: #f8f8f8;
  width: 150vw;
  height: 103vw;
  background-image: url(../img/grid.svg) !important;
  background-position: center center;
  background-size: 4001px; }
  @media (max-width: 760px) {
    .nav {
      width: 375vw;
      height: 257.5vw; } }

.nav-cover {
  background: none; }

.nav-cover-inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1; }

.loading .nav-cover {
  opacity: 0;
  z-index: 100000;
  cursor: wait !important;
  display: block; }

.single .nav-cover {
  opacity: 0;
  z-index: 101;
  cursor: alias !important;
  display: block; }

.publication-item {
  position: absolute;
  -moz-transition: transform 100ms, opacity 800ms;
  -ms-transition: transform 100ms, opacity 800ms;
  -webkit-transition: transform 100ms, opacity 800ms;
  transition: transform 100ms, opacity 800ms;
  cursor: pointer;
  opacity: 1; }
  @media (max-width: 760px) {
    .publication-item {
      pointer-events: none; } }

.item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -moz-transition: opacity 800ms, transform 400ms, filter 800ms;
  -ms-transition: opacity 800ms, transform 400ms, filter 800ms;
  -webkit-transition: opacity 800ms, transform 400ms, filter 800ms;
  transition: opacity 800ms, transform 400ms, filter 800ms;
  -webkit-transform: translateZ(0); }

.publication-item:hover {
  z-index: 8 !important; }

.publication-item img {
  width: 100%;
  height: auto;
  -moz-transition: opacity 800ms;
  -ms-transition: opacity 800ms;
  -webkit-transition: opacity 800ms;
  transition: opacity 800ms;
  opacity: 0; }

article {
  position: absolute;
  top: 100vh; /* Starts off-screen */
  left: 5vw;
  right: 5vw;
  min-height: 100vh;
  z-index: 1000;
  background: #fff;
  padding-bottom: 10vw; /* This is the general desktop padding-bottom */
  padding-top: 5vw;
  display: none; /* Initially hidden, JS will show */
  transition: top 0.3s ease-out; /* Smooth transition for slide-in/out */
}
  @media (min-width: 1300px) {
    article {
      width: 1170px;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 128px;
      padding-top: 64px; } }
  @media (max-width: 760px) {
    article {
      left: 5vw;
      right: 5vw;
      /* REVERTED: Padding-bottom back to 20vw for mobile */
      padding: 5vw 5vw 20vw;
      top: 90vh; } }

article:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -5vw;
  left: 0;
  right: 0;
  height: 5vw;
  width: 100%;
  pointer-events: none; }
  @media (min-width: 1300px) {
    article:after {
      bottom: -64px;
      height: 64px; } }

/* This is the crucial rule that makes the article visible and slides it up */
.single article {
  display: block !important; /* Ensure it is visible */
  top: 0; /* Slide to top of viewport */
}

.single-title {
  z-index: -1;
  opacity: 0.03;
  display: none; }

.item-title {
  text-align: center;
  padding-bottom: 2.5vw; }
  @media (min-width: 1300px) {
    .item-title {
      padding-bottom: 32px; } }

.meta {
  padding-top: 5vw; }
  @media (min-width: 1300px) {
    .meta {
      padding-top: 64px; } }
  @media (max-width: 760px) { /* This is the start of the mobile media query for .meta */
    .meta {
      padding-top: 5vw; } /* This is your existing mobile .meta rule */

    /* === START OF NEW CODE TO INSERT === */
    .article-content-padded-inner .meta {
        padding-top: 6vw; /* Adjust this value to control space above meta */
        margin-top: 2.5vw;  /* Adjust this value to control space above meta */
        /* You might also want to reset other properties from the global
           .article-content-padded-inner .meta rule if they are behaving
           undesirably on mobile, e.g.:
           max-width: 100%;
           margin-left: auto;
           margin-right: auto;
        */
    } }

.row {
  clear: both;
  width: 100%; }

.row + .row {
  margin-top: 0.3em; }

.title {
  float: left;
  width: 30%;
  text-transform: uppercase;
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2vw;
  line-height: 2.1em;
  letter-spacing: 0.08em;
  color: #999; }
  @media (min-width: 1300px) {
    .title {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 15px;
      line-height: 2.1em; } }
  @media (max-width: 760px) {
    .title {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 2.6vw;
      line-height: 2.1em; } }
  @media (max-width: 760px) {
    .title {
      padding-top: 0.2em; } }

.value {
  float: left;
  width: 70%;
  color: #111; }

.meta a:after {
  content: ' →'; }

.meta a:hover {
  color: #999; }

.introduction {
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.5vw;
  line-height: 1.3em;
  margin-bottom: 1em !important;
  padding-bottom: 0 !important;
   }
  @media (min-width: 1300px) {
    .introduction {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 32px;
      line-height: 1.3em;
      margin-bottom: 8px !important;
      padding-bottom: 0 !important;
      /* NEW: Fix width at 700px and center for 1300px+ */
      max-width: 700px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
  @media (max-width: 760px) {
    .introduction {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 5.45vw;
      line-height: 1.3em;
      margin-bottom: 2vw !important;
      padding-bottom: 0 !important; } }

.introduction p:first-child:before {
  content: '—'; }

/* Consolidated Gallery Styles */

/* Base styles for .gallery - apply to all screen sizes unless overridden by media queries */
.gallery {
  margin-bottom: 0.625vw; /* Reduced by 50% */
  background: none !important; /* Keep background clear */
  padding: 0;
  position: relative;
  overflow: hidden; /* Important for horizontal image display */
  display: flex; /* Makes .gallery a flex container for .gallery-inner */
  align-items: center; /* Vertically center navigation elements and gallery-inner */
  height: 50vw; /* Default image display height for intermediate desktop */
}

/* Base styles for gallery navigation - apply to all screen sizes unless overridden */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "PxGroteskRegular", Helvetica, Arial, sans-serif;
  font-size: 2.5vw; /* Base font size */
  line-height: 1.3em;
  text-align: center;
  width: 5vw; /* Base width */
  height: 5vw; /* Base height */
  line-height: 5vw; /* Center text vertically */
  display: block;
  cursor: pointer;
  z-index: 5;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

/* Base styles for .gallery-inner - apply to all screen sizes unless overridden */
.gallery-inner {
  height: 100%;
  width: 100%;
  display: flex; /* Makes .gallery-inner a flex container for .gallery-image */
  justify-content: center; /* Center images horizontally */
  align-items: center; /* Center images vertically */
}

/* Base styles for .gallery-image - apply to all screen sizes unless overridden */
.gallery-image {
  padding: 0;
  width: 100%; /* Each image container takes full width of the inner container */
  margin: 0 auto;
  position: relative;
  background: #f6f6f6;
  display: none; /* Initially hidden, JS will show .visible */
  flex-shrink: 0; /* Prevent images from shrinking */
  height: 100%; /* Ensure image container fills the gallery's height */
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.gallery-image.visible {
  display: flex; /* Show and center the active image */
}

/* Base styles for image tag itself */
.gallery-image img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  position: relative;
  object-fit: contain; /* Ensures image fits without cropping */
}

/* Mobile-specific adjustments (max-width: 760px) */
@media (max-width: 760px) {
  /* Adjust margin for content after gallery on mobile */
  article .gallery + .introduction,
  article .gallery + .block,
  article .gallery + .text-content-wrapper {
    margin-top: 2.5vw !important; /* Reduced by 50% on mobile */
  }

  /* Gallery specific mobile adjustments */
  .gallery {
    padding: 0; /* Ensure no extra padding on mobile */
    height: 80vw; /* Height from previous request */
  }

  .gallery-nav {
    font-size: 5.45vw; /* Mobile font size for nav */
    line-height: 1.3em;
    width: 3.84615vw; /* Mobile width for nav */
    height: 3.84615vw; /* Mobile height for nav */
    line-height: 3.84615vw; /* Mobile line-height for nav */
  }
}

/* Desktop/Intermediate-Tablet adjustments (min-width: 761px and up, up to 1299px) */
@media (min-width: 761px) {
  /* No specific width rules for .gallery here. It should fill article's 90vw width. */
  /* No specific width rules for .block here. It should scale like introduction. */
}

/* Specific adjustments for very large screens (1300px and up) */
@media (min-width: 1300px) {
  /* Article width is 1170px here */
  article {
    width: 1170px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 128px;
    padding-top: 64px;
  }

  /* Gallery behavior at 1300px+: width fills article, height is fixed */
  #project-ajax-content-area > .gallery {
    /* No width/max-width here, it will implicitly fill article's 1170px width */
    height: 650px !important; /* Specific fixed height for 1300px+ */
    overflow: hidden !important;
    margin-bottom: 8px; /* Reduced by 50% */
    /* Ensure it remains centered within the article if it was previously */
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Gallery navigation also gets specific sizes for very large screens */
  #project-ajax-content-area > .gallery .gallery-nav {
    width: 64px !important;
    height: 64px !important;
    line-height: 64px !important;
    font-size: 32px !important;
  }

  /* NEW: .block width for 1300px+ to match introduction */
  .block {
    max-width: 700px !important; /* Fix width at 700px */
    margin-left: auto !important; /* Center horizontally */
    margin-right: auto !important; /* Center horizontally */
    /* width: auto; or width: 100%; will still apply if not overridden globally, allowing max-width to take effect */
  }
}

/* End of Consolidated Gallery Styles */

/* REMOVED: Original .block width: 58% rule. Let it be naturally responsive. */
.block {
  margin: 0 auto; /* Keep centering if no specific width is applied */
}
  @media (max-width: 760px) {
    .block {
      width: auto; /* Ensure auto width for mobile */ } }

.image-block {
  width: 100%;
  padding: 0 10vw; }
  @media (min-width: 1300px) {
    .image-block {
      padding: 0 128px; } }
  @media (max-width: 760px) {
    .image-block {
      padding: 0; } }

.image-block img {
  max-width: 100%;
  height: auto;
  margin: 0 auto; }

.caption {
  color: #999;
  text-align: center;
  margin-top: 1em; }

strong {
  font-weight: 500; }

em {
  font-style: normal; }

p + p {
  margin-top: 1em; }

.block + .block {
  margin-top: 1em; }

.block + .image-block,
.image-block + .block {
  margin-top: 2em; }

.introduction + .text-content-wrapper {
  margin-top: 3.33333vw; }
  @media (min-width: 1300px) {
    .introduction + .text-content-wrapper {
      margin-top: 42.66667px; } }
  @media (max-width: 760px) {
    .introduction + .text-content-wrapper {
     margin-top: 2.5vw !important;
    }
}

blockquote {
  margin-top: 3.33333vw;
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.5vw;
  line-height: 1.3em;
  font-weight: 500; }
  @media (min-width: 1300px) {
    blockquote {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 32px;
      line-height: 1.3em; } }
  @media (max-width: 760px) {
    blockquote {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 5.45vw;
      line-height: 1.3em; } }
  @media (min-width: 1300px) {
    blockquote {
      margin-top: 42.66667px; } }
  @media (max-width: 760px) {
    blockquote {
      margin-top: 5vw; } }

blockquote + p {
  margin-top: 3.33333vw; }
  @media (min-width: 1300px) {
    blockquote + p {
      margin-top: 42.66667px; } }
  @media (max-width: 760px) {
    blockquote + p {
      margin-top: 5vw; } }

.large {
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.5vw;
  line-height: 1.3em; }
  @media (min-width: 1300px) {
    .large {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 32px;
      line-height: 1.3em; } }
  @media (max-width: 760px) {
    .large {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 5.45vw;
      line-height: 1.3em; } }

.large + .block {
  margin-top: 5vw; }
  @media (min-width: 1300px) {
    .large + .block {
      margin-top: 64px; } }
  @media (max-width: 760px) {
    .large + .block {
      margin-top: 5vw; } }

.text-column p + p,
.large + .text-column {
  margin-top: 1em; }

.text-block p a {
  text-decoration: underline; }

.text-block p a:hover {
  text-decoration: underline;
  color: #999; }

/* Read More/Less Styles */
.text-content-wrapper {
  height: 7em; /* Collapsed height */
  position: relative;
  overflow: hidden;
  transition: height 0.45s ease-out; /* Transition on height */
}
  @media (max-width: 760px) {
    .text-content-wrapper {
      height: 9.9em; } }

.text-content-wrapper.expanded {
  height: auto; /* Expanded height - allows content to define height */
  overflow: visible;
}

.text-content-wrapper:before { /* Gradient overlay for collapsed state */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 7em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  pointer-events: none; }
  @media (max-width: 760px) {
    .text-content-wrapper:before {
      height: 9.7em; } }

.text-content-wrapper.expanded:before { /* Hide gradient when expanded */
  display: none; }

.text-content-wrapper.expanded + .text-wrapper-expand {
  display: none; } /* Hide button when expanded if content is full height */

.text-wrapper-expand { /* Styles for the Read More button */
  text-align: center;
  width: 10em;
  border-top: 1px solid #000;
  display: block;
  position: relative;
  margin: 0 auto;
  background: none !important;
  text-transform: uppercase;
  font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2vw;
  line-height: 2.1em;
  letter-spacing: 0.08em;
  width: 25vw;
  cursor: pointer;
  color: #111;
}
  @media (min-width: 1300px) {
    .text-wrapper-expand {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 15px;
      line-height: 2.1em; } }
  @media (max-width: 760px) {
    .text-wrapper-expand {
      font-family: "PxGroteskRegular", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 2.6vw;
      line-height: 2.1em; } }
  @media (max-width: 760px) {
    .text-wrapper-expand {
      width: auto; } }

.text-wrapper-expand:hover {
  border-top: 1px solid #000;
  color: #999;
}

/* NEW: Mobile Bottom Spacer Class */
.mobile-bottom-spacer {
  display: none; /* Hidden by default on desktop */
}

@media (max-width: 760px) {
  .mobile-bottom-spacer {
    display: block; /* Show on mobile */
    height: 25vw; /* Adjust this value as needed to clear the menu */
    clear: both; /* Ensures it's below any floated elements */
    width: 100%; /* Ensures it takes full width */
  }
}

/* Responsive nav controls for multi-gallery project-block pages. */
#project-ajax-content-area .project-block .gallery .gallery-nav {
  width: 64px !important;
  height: 64px !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  #project-ajax-content-area .project-block .gallery .gallery-nav {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.6rem !important;
  }
}

@media (max-width: 760px) {
  #project-ajax-content-area .project-block .gallery .gallery-nav {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.3rem !important;
  }
}

/* Final fallback: consistent top spacing above first gallery on stacked multi-slider pages. */
#project-ajax-content-area.stacked-layout > .article-content-padded-inner:first-child,
article#project-ajax-content-area.main-content-container.stacked-layout > .article-content-padded-inner:first-child {
  padding-top: clamp(30px, 5vh, 60px) !important;
}

#project-ajax-content-area.stacked-layout > .article-content-padded-inner:first-child > .project-block:first-child,
article#project-ajax-content-area.main-content-container.stacked-layout > .article-content-padded-inner:first-child > .project-block:first-child {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  #project-ajax-content-area.stacked-layout > .article-content-padded-inner:first-child,
  article#project-ajax-content-area.main-content-container.stacked-layout > .article-content-padded-inner:first-child {
    padding-top: clamp(20px, 4vh, 40px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.single #project-ajax-content-area.main-content-container:not(.stacked-layout) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Final image-fit lock: preserve aspect ratio and prevent crop in all gallery viewers. */
#project-ajax-content-area .gallery-image {
  align-items: center !important;
  justify-content: center !important;
}

#project-ajax-content-area .gallery-image.visible {
  display: flex !important;
}

#project-ajax-content-area .gallery-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* Unified gallery-to-title spacing for single and multi-slider content pages. */
:root {
  --gallery-title-gap: 24px;
}

body.single #project-ajax-content-area.main-content-container:not(.stacked-layout) > .gallery {
  margin-bottom: 0 !important;
}

body.single #project-ajax-content-area.main-content-container:not(.stacked-layout) > .gallery + .article-content-padded-inner {
  padding-top: 0 !important;
}

body.single #project-ajax-content-area.main-content-container:not(.stacked-layout) > .gallery + .article-content-padded-inner > .introduction:first-child,
body.single #project-ajax-content-area.main-content-container:not(.stacked-layout) > .gallery + .article-content-padded-inner > .block.introduction:first-child {
  margin-top: var(--gallery-title-gap) !important;
}

#project-ajax-content-area.stacked-layout .project-block > .gallery {
  margin-bottom: 0 !important;
}

#project-ajax-content-area.stacked-layout .project-block > .gallery + .introduction {
  margin-top: var(--gallery-title-gap) !important;
}

@media (max-width: 760px) {
  body.single #project-ajax-content-area.main-content-container:not(.stacked-layout) > .gallery + .article-content-padded-inner {
    padding-top: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Courses booking link: underlined normally, no underline on hover. */
#project-ajax-content-area .booking-email-link {
  text-decoration: underline !important;
}

#project-ajax-content-area .booking-email-link:hover {
  text-decoration: none !important;
}

/* Meta blocks: keep columns top-aligned (prevent second item dropping lower). */
#project-ajax-content-area .meta .row + .row {
  margin-top: 0 !important;
}

/* Arrow size lock: never allow slider controls below 44px. */
#project-ajax-content-area .gallery .gallery-nav {
  min-width: 44px !important;
  min-height: 44px !important;
}

#project-ajax-content-area:focus {
  outline: none !important;
  box-shadow: none !important;
}