/* Final header rule: active state is opacity + Exit only. */
.site-header > .gallery-button,
.site-header > .site-name,
.site-header > .projects-button { opacity: 1 !important; text-decoration: none !important; }
.site-header > .gallery-button::after,
.site-header > .site-name::after,
.site-header > .projects-button::after,
.site-header > .gallery-button > span:last-child::after,
.site-header > .site-name > span:last-child::after,
.site-header > .projects-button > span:last-child::after { display: none !important; content: none !important; }
.gallery-exit, .projects-exit, .site-exit { display: none !important; }
body.is-gallery .site-header > .site-name,
body.is-gallery .site-header > .projects-button,
body.is-about .site-header > .gallery-button,
body.is-about .site-header > .projects-button,
body.has-selected-project .site-header > .gallery-button,
body.has-selected-project .site-header > .site-name { opacity: .5 !important; }
body.is-gallery .gallery-button,
body.is-about .site-name,
body.has-selected-project .projects-button { opacity: 1 !important; }
body.is-gallery .gallery-exit,
body.is-about .site-exit,
body.has-selected-project .projects-exit { display: inline !important; margin-right: .35em !important; color: rgb(17 17 17 / 45%) !important; }
body.is-gallery .gallery-button:hover .gallery-exit,
body.is-gallery .gallery-button:focus-visible .gallery-exit,
body.is-about .site-name:hover .site-exit,
body.is-about .site-name:focus-visible .site-exit,
body.has-selected-project .projects-button:hover .projects-exit,
body.has-selected-project .projects-button:focus-visible .projects-exit { color: #111 !important; }
:root {
    --page-gutter: clamp(16px, 2vw, 32px);
    --rail-thumbnail-width: clamp(96px, 9.4vw, 176px);
    --rail-active-width: clamp(120px, 13vw, 240px);
    --rail-padding: clamp(64px, 9vh, 128px);
    --rail-gap: clamp(18px, 2vh, 28px);
    --interface-type-size: clamp(14px, 1vw, 18px);
    --rail-thumbnail-height: clamp(128px, 12.53vw, 235px);
    --rail-active-height: clamp(148px, 15.6vw, 288px);
    --rail-active-half-height: clamp(74px, 7.8vw, 144px);
    --rail-active-landscape-height: clamp(90px, 9.75vw, 180px);
    --stage-previous-width: clamp(56px, 5vw, 96px);
    --stage-previous-title-offset: clamp(58px, 6vw, 92px);
    font-family: Helvetica, Arial, sans-serif;
    color: #111111;
    background: #ffffff;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    min-height: 100vh;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: var(--page-gutter);
    font-size: var(--interface-type-size);
    text-transform: uppercase;
  }
  
  .site-header a:last-child {
    justify-self: end;
  }
  
  .gallery-link {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  height: 1em;
  line-height: 1em;
  text-transform: uppercase;
}

.gallery-link > span {
  display: inline-flex;
  align-items: center;
  height: 1em;
  line-height: 1em;
}

.page-exit {
  display: inline-flex;
  align-items: center;
  height: 1em;
  line-height: 1em;
  text-transform: uppercase;
}

.information-page .site-header > a {
  opacity: 0.45;
  transition: opacity 350ms ease;
}

.information-page .page-exit[aria-current="page"] {
  opacity: 1;

}

.information-page .page-exit[aria-current="page"] > span:last-child {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.page-exit .gallery-exit {
  position: static;
  margin-right: 0.35em;
  opacity: 1;
  transform: none;
}

.gallery-button {
    justify-self: center;
    text-transform: uppercase;
  }

  .projects-button {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    height: 1em;
    padding: 0;
    font-size: inherit;
    line-height: 1em;
    text-transform: uppercase;
  }

  .projects-exit {
    display: inline-flex;
    align-items: center;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    white-space: nowrap;
    color: rgb(17 17 17 / 45%);
    opacity: 0;
    transform: translateX(0.35em);
    transition: max-width 350ms cubic-bezier(0.22, 1, 0.36, 1), margin-right 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.has-selected-project .projects-exit {
    max-width: 4em;
    margin-right: 0.35em;
    opacity: 1;
    transform: translateX(0);
  }

  body.has-selected-project .projects-button {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
  
  .information-page .site-header {
  opacity: 1;
}

.information-main {
  position: relative;
  min-height: 100vh;
  padding: var(--page-gutter);
}

.information-content {
  position: absolute;
  top: 50%;
  left: calc(50% - 2.1em);
  transform: translateY(-50%);
}

.information-content {
  display: grid;
  gap: clamp(12px, 1.5vh, 20px);
  width: min(620px, calc(100vw - (2 * var(--page-gutter))));
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.2;
}

.information-content h1 {
  margin: 0 0 clamp(12px, 2vh, 24px);
  font-size: inherit;
  font-weight: 400;
}

.information-content a {
  width: fit-content;
}

.information-content a:hover,
.information-content a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-main {
    position: relative;
    min-height: 100vh;
  }
  
  .entry {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(420px, 80vw);
    transform: translate(-50%, -50%);
  }
  
  .name,
  .welcome-message {
    margin: 0;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 400;
    text-transform: uppercase;
  }
  
  .welcome-message {
    margin-top: 16px;
    color: rgb(17 17 17 / 45%);
    line-height: 1.35;
  }    .project-rail {
    position: fixed;
    top: 0;
    right: var(--page-gutter);
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--rail-gap);
    width: var(--rail-active-width);
    padding: var(--rail-padding) 0;
    overflow-y: auto;
  }
  
  .project-card {
    flex: 0 0 auto;
    width: var(--rail-thumbnail-width);
    height: var(--rail-thumbnail-height);
    aspect-ratio: 3 / 4;
    background: #e8e8e8;
    font-size: 12px;
    text-align: left;
    transition: width 350ms ease, height 350ms ease, opacity 350ms ease;
  }
  
  .project-card.is-active {
    width: var(--rail-active-width);
    height: var(--rail-active-height);
  }

  /* Test: every project gets a stable portrait-sized slot once a project is selected. */
  body.has-selected-project .project-card {
    width: var(--rail-active-width);
    height: var(--rail-active-height);
    aspect-ratio: 3 / 4;
  }

  body.has-selected-project .project-card .project-frame {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    width: var(--rail-thumbnail-width);
    height: var(--rail-thumbnail-height);
    transform: translateY(-50%);
  }

  body.has-selected-project .project-card.is-active .project-frame {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
  }

  /* Landscape previews remain centred inside the portrait-sized rail slot. */
  body.has-selected-project .project-card.is-project-next .project-frame[data-orientation="landscape"] {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    width: 100%;
    height: var(--rail-active-landscape-height);
    transform: translateY(-50%);
  }

  
  .project-card.is-muted {
    opacity: 0.5;
  }

  .selected-project {
    display: none;
    margin: 0;
    font-size: var(--interface-type-size);
    font-weight: 400;
    text-transform: uppercase;
  }

  body.has-selected-project .entry {
    width: 0;
  }

  body.has-selected-project .selected-project {
    width: max-content;
    transform: translateX(-50%);
    text-align: center;
  }
  
  body.has-selected-project .name,
  body.has-selected-project .welcome-message {
    display: none;
  }
  
  body.has-selected-project .selected-project {
    display: block;
  }

  .welcome-message::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 0.25em;
    background: currentColor;
    vertical-align: -0.12em;
    animation: blink 800ms steps(1) infinite;
  }
  
  .welcome-message.is-typed::after {
    opacity: 0;
  }
  
  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

.entry {
  transition: opacity 450ms ease;
}

.site-header,
.project-rail {
  opacity: 45%;
  transition: opacity 450ms ease;
}

body.has-dismissed-welcome .entry {
  opacity: 0;
  pointer-events: none;
}

body.has-dismissed-welcome .site-header,
body.has-dismissed-welcome .project-rail {
  opacity: 100%;
}

body.has-selected-project .site-header > a,
body.has-selected-project .gallery-button {
  opacity: 0.45;
}

body.has-selected-project .projects-button {
  opacity: 1;
}


body.has-dismissed-welcome.has-selected-project .entry {
  opacity: 100%;
}



/* Gallery: a viewport containing a movable image atlas. */
.gallery-canvas {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  cursor: grab;
  transition: opacity 450ms ease;
}

.gallery-canvas.is-panning {
  cursor: grabbing;
}

.gallery-world {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--gallery-row-count, 3), minmax(0, 1fr));
  gap: clamp(20px, 4vh, 64px);
  padding: var(--rail-padding) var(--page-gutter);
  transform-origin: center;
  transition: transform 250ms ease;
  will-change: transform;
}

.gallery-canvas.is-panning .gallery-world {
  transition: none;
}

.gallery-row {
  display: flex;
  align-items: center;
  gap: var(--rail-gap);
  min-width: 0;
  min-height: 0;
}

.gallery-item {
  position: relative;
  flex: 0 1 auto;
  height: min(100%, clamp(64px, 13vh, 176px));
  aspect-ratio: 3 / 4;
}

.gallery-item[data-orientation="landscape"] {
  aspect-ratio: 4 / 3;
}

.gallery-media {
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  background: #e8e8e8;
}

.gallery-media {
  transition: transform 180ms ease;
}

.gallery-label {
  position: absolute;
  top: calc(100% + clamp(4px, 0.7vh, 10px));
  left: 50%;
  color: rgb(17 17 17 / 45%);
  font-size: clamp(10px, 0.78vw, 13px);
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

body.is-gallery .project-rail {
  opacity: 0;
  /* Overview and the landing rail never share a visible frame. Opacity still
     eases for the return journey, but visibility drops immediately on entry. */
  visibility: hidden;
  pointer-events: none;
}

body.is-gallery .gallery-canvas {
  opacity: 1;
  pointer-events: auto;
}

.gallery-button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  height: 1em;
  font-size: inherit;
  line-height: 1em;
  text-transform: uppercase;
}

.gallery-button > span,
.gallery-exit {
  display: inline-flex;
  align-items: center;
  height: 1em;
  font-size: inherit;
  line-height: 1em;
}

.gallery-button,
.gallery-link {
  position: relative;
}

.gallery-exit {
  position: absolute;
  right: calc(100% + 0.35em);
  display: inline-flex;
  max-width: none;
  margin-right: 0;
  overflow: visible;
  white-space: nowrap;
  color: rgb(17 17 17 / 45%);
  opacity: 0;
  transform: translateX(0.35em);
  transition: opacity 200ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-gallery .gallery-exit {
  opacity: 1;
  transform: translateX(0);
}

body.is-gallery .site-header > a {
  opacity: 0.45;
}

body.is-gallery .gallery-button {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}




/* Focused project: the rail contains the next image */
.project-stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}

.project-stage-title {
  position: absolute;
  top: calc(50% + var(--stage-previous-title-offset));
  left: var(--page-gutter);
  width: min(240px, 22vw);
  margin: 0;
  font-size: var(--interface-type-size);
  text-align: left;
  text-transform: uppercase;
  transform: none;
}

.project-stage-details {
  position: absolute;
  top: calc(50% + var(--stage-previous-title-offset) + 2.5em);
  left: var(--page-gutter);
  width: min(240px, 22vw);
  margin: 0;
  color: rgb(17 17 17 / 45%);
  font-size: var(--interface-type-size);
  line-height: 1.35;
  white-space: pre-line;
}

.project-stage-description:empty,
.project-stage-details:empty {
  display: none;
}

.stage-previous {
  position: absolute;
  top: 50%;
  left: var(--page-gutter);
  width: var(--stage-previous-width);
  height: auto;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: #e8e8e8;
  cursor: w-resize;
  transform: translateY(-50%);
}

.stage-previous[data-orientation="landscape"] {
  height: auto;
  aspect-ratio: 4 / 3;
}

.stage-previous.has-real-image {
  background-color: #ffffff !important;
}

.stage-active {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: min(62vh, 38vw);
  padding: 0;
  border: 0;
  aspect-ratio: 3 / 4;
  background: #e8e8e8;
  cursor: e-resize;
  transform: translate(-50%, -50%);
  transition: width 450ms ease, transform 450ms ease;
}

/* Optional image notes: one short, editable caption per media item. */
.project-image-caption {
  position: fixed;
  z-index: 12;
  display: block;
  margin: 0;
  /* Matches the inactive header controls exactly. */
  color: rgb(17 17 17 / 50%);
  font-size: calc(var(--interface-type-size) * 0.78);
  font-weight: 400;
  line-height: 1.28;
  pointer-events: none;
  text-align: left;
}

.project-card.is-project-next > span:not(.project-frame) {
  visibility: hidden;
}

body.has-project-stage .entry {
  opacity: 0;
  pointer-events: none;
}

body.has-project-stage .project-stage {
  opacity: 1;
  pointer-events: auto;
}

body.has-project-stage .stage-previous {
  opacity: 0.5;
}

.stage-previous {
  transition: opacity 350ms ease, transform 180ms ease;
}

body.is-opening-project .stage-active {
  opacity: 0;
}

.project-opening-image {
  position: fixed;
  z-index: 11;
  pointer-events: none;
  transition: left 650ms cubic-bezier(0.22, 1, 0.36, 1), top 650ms cubic-bezier(0.22, 1, 0.36, 1), width 650ms cubic-bezier(0.22, 1, 0.36, 1), height 650ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* Temporary frame markers: replaced by real project images later */
.stage-active::after,
.project-card.is-project-next .project-frame::after {
  content: attr(data-image);
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgb(17 17 17 / 45%);
  font-size: clamp(20px, 3vw, 48px);
}

.stage-active[data-image="1"] { background: #e5e5e5; }
.stage-active[data-image="2"] { background: #d9e3e9; }
.stage-active[data-image="3"] { background: #e9ddd3; }
.stage-active[data-image="4"] { background: #d8ddd6; }
.stage-active[data-image="5"] { background: #e2dce8; }
.stage-active[data-image="6"] { background: #dce5df; }
.stage-active[data-image="7"] { background: #eadfce; }
.stage-active[data-image="8"] { background: #d9dfea; }




/* Responsive selector movement */
.project-card {
  will-change: width, height, opacity;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1), height 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease, transform 180ms ease;
}

/* Each project sequence alternates 3:4 portrait and 4:3 landscape frames */
.gallery-media[data-orientation="landscape"] {
  aspect-ratio: 4 / 3;
}

.stage-active[data-orientation="landscape"] {
  width: auto;
  aspect-ratio: 4 / 3;
}

.project-card.is-project-next[data-orientation="landscape"] {
  height: var(--rail-active-landscape-height);
  aspect-ratio: 4 / 3;
}


/* Keep the central image still while testing the flow */
.stage-active {
  transition: none;
}


/* The rail reserves one stable portrait slot for every selected-project frame */
.project-card {
  position: relative;
  background: transparent;
}

.project-frame {
  position: absolute;
  inset: 0;
  display: block;
  background: #e8e8e8;
}

.has-real-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #ffffff;
}

.project-card > span:not(.project-frame) {
  display: none;
}

.stage-active.has-real-image::after,
.project-card.is-project-next .project-frame.has-real-image::after {
  display: none;
}

.stage-active.has-real-image,
.project-card.is-project-next .project-frame.has-real-image {
  background-color: #ffffff !important;
}

.project-card.has-no-next .project-frame {
  visibility: hidden;
}

/* At the end of a project, the next hero announces itself before opening. */
.project-card.is-next-project .project-frame {
  background-image: none !important;
  background-color: #ffffff !important;
}

.project-card.is-next-project .project-frame::after {
  display: none;
}

.project-card.is-next-project::before,
.project-card.is-next-project::after {
  position: absolute;
  right: 50%;
  z-index: 1;
  width: max-content;
  margin: 0;
  padding: 0;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(50%);
}

.project-card.is-next-project::before {
  content: "Next project";
  top: calc(50% - 1.15em);
  color: rgb(17 17 17 / 45%);
  font-size: var(--interface-type-size);
}

.project-card.is-next-project::after {
  content: attr(data-next-project);
  top: calc(50% + 0.15em);
  color: #111111;
  font-size: var(--interface-type-size);
  font-weight: 400;
}

.project-card.is-project-next {
  height: var(--rail-active-height);
  background: transparent;
}

.project-card.is-project-next .project-frame[data-orientation="landscape"] {
  top: 50%;
  bottom: auto;
  width: 100%;
  height: var(--rail-active-landscape-height);
  aspect-ratio: 4 / 3;
  transform: translateY(-50%);
}

.project-card.is-project-next .project-frame[data-image="1"] { background: #e5e5e5; }
.project-card.is-project-next .project-frame[data-image="2"] { background: #d9e3e9; }
.project-card.is-project-next .project-frame[data-image="3"] { background: #e9ddd3; }
.project-card.is-project-next .project-frame[data-image="4"] { background: #d8ddd6; }
.project-card.is-project-next .project-frame[data-image="5"] { background: #e2dce8; }
.project-card.is-project-next .project-frame[data-image="6"] { background: #dce5df; }
.project-card.is-project-next .project-frame[data-image="7"] { background: #eadfce; }
.project-card.is-project-next .project-frame[data-image="8"] { background: #d9dfea; }

.project-rail::before,
.project-rail::after {
  content: "";
  flex: 0 0 0;
  transition: flex-basis 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.has-selected-project .project-rail::before,
body.has-selected-project .project-rail::after {
  flex-basis: max(0px, calc(50svh - var(--rail-active-half-height) - var(--rail-padding) - var(--rail-gap)));
}

/* A selected project always keeps one portrait-sized outer slot. */
.project-card.is-project-next,
.project-card.is-project-next[data-orientation="landscape"] {
  width: var(--rail-active-width);
  height: var(--rail-active-height);
  aspect-ratio: 3 / 4;
}



/* Left project copy: description on entry, metadata after image navigation. */
.project-stage-copy {
  position: absolute;
  top: calc(50% + var(--stage-previous-title-offset));
  left: var(--page-gutter);
  width: min(400px, 29vw);
}

.project-stage-copy .project-stage-title,
.project-stage-copy .project-stage-description,
.project-stage-copy .project-stage-details {
  position: static;
  width: auto;
  margin: 0;
  text-align: left;
  transform: none;
}

.project-stage-copy .project-stage-title {
  color: #111111;
}

.project-stage-copy .project-stage-description,
.project-stage-copy .project-stage-details {
  font-size: var(--interface-type-size);
  line-height: 1.35;
  text-transform: none;
}

.project-stage-copy .project-stage-description {
  margin-top: 2em;
}

.project-stage-copy .project-stage-details {
  margin-top: 0;
}

.project-stage-copy .project-stage-description {
  color: rgb(17 17 17 / 45%);
  cursor: pointer;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.22;
}

.project-stage-copy .project-stage-details {
  color: rgb(17 17 17 / 45%);
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.22;
  white-space: pre-line;
}

.project-description-button[hidden] {
  display: none !important;
}

.project-description-button {
  display: block;
  margin-top: 2em;
  color: rgb(17 17 17 / 45%);
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.22;
  text-transform: uppercase;
}


/* Fixed legend for Gallery image credits. */
.gallery-credit-index {
  position: absolute;
  top: auto;
  right: var(--page-gutter);
  bottom: var(--rail-padding);
  z-index: 2;
  width: min(220px, 21vw);
  color: rgb(17 17 17 / 45%);
  font-size: clamp(10px, 0.78vw, 13px);
  line-height: 1.22;
  pointer-events: none;
}

.gallery-credit-index p {
  margin: 0 0 0.85em;
  text-transform: uppercase;
}

.gallery-credit-index dl {
  display: grid;
  gap: 0.35em;
  margin: 0;
}

.gallery-credit-index dl div {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: 0.5em;
}

.gallery-credit-index dt,
.gallery-credit-index dd {
  margin: 0;
}


/* Project thumbnails acknowledge hover without moving the layout. */
.project-card:hover {
  transform: scale(1.035);
}

.project-card:hover {
  z-index: 1;
}

.stage-previous:hover {
  transform: translateY(-50%) scale(1.035);
}


.project-description-button:hover {
  color: rgb(17 17 17 / 70%);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}


/* Quiet hover line for the primary navigation. */
.site-header > a,
.gallery-button,
.projects-button {
  position: relative;
}

.site-header > a::after,
.gallery-button::after,
.projects-button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.65);
  transform-origin: left;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header > a:hover::after,
.site-header > a:focus-visible::after,
.gallery-button:hover::after,
.gallery-button:focus-visible::after,
.projects-button:hover::after,
.projects-button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Directional cues inside an open project: previous is left, main/next is right. */
body.has-project-stage .project-card.is-project-next,
body.has-project-stage .project-card.is-next-project {
  cursor: e-resize;
}

/* The enlarged hero advances from the title view into the project story. */
body.has-selected-project:not(.has-project-stage) .project-card.is-active {
  cursor: e-resize;
}

.about-summary {
  color: rgb(17 17 17 / 45%);
  line-height: 1.3;
}

/* On information pages, the hover line belongs to the page name, not “Exit”. */
.information-page .page-exit::after {
  display: none;
}

.information-page .page-exit > span:last-child {
  position: relative;
}

.information-page .page-exit > span:last-child::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(0.65);
  transform-origin: left;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.information-page .page-exit:hover > span:last-child::after,
.information-page .page-exit:focus-visible > span:last-child::after {
  opacity: 1;
  transform: scaleX(1);
}

.about-summary p {
  margin: 0;
}

.about-summary p + p {
  margin-top: 0.7em;
}

/* Active information-page link: one short line, then a clear exit state on hover. */
.information-page .page-exit[aria-current="page"] > span:last-child {
  text-decoration: none;
}

.information-page .page-exit[aria-current="page"] > span:last-child::after {
  opacity: 1;
  transform: scaleX(1);
}

.information-page .page-exit > span {
  transition: color 180ms ease;
}

.information-page .page-exit[aria-current="page"]:hover > span:last-child::after,
.information-page .page-exit[aria-current="page"]:focus-visible > span:last-child::after {
  opacity: 0;
  transform: scaleX(0.65);
}

.information-page .page-exit[aria-current="page"]:hover .gallery-exit,
.information-page .page-exit[aria-current="page"]:focus-visible .gallery-exit {
  color: #111111;
}

.information-page .page-exit[aria-current="page"]:hover > span:last-child,
.information-page .page-exit[aria-current="page"]:focus-visible > span:last-child {
  color: rgb(17 17 17 / 45%);
}

.contact-socials {
  display: flex;
  gap: 0.6em;
}

.information-content .social-icon {
  display: grid;
  width: 1.25em;
  height: 1.25em;
  place-items: center;
  color: #111111;
}

.social-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.social-icon .instagram-dot {
  fill: currentColor;
  stroke: none;
}

.information-content .social-linkedin {
  display: grid;
  background: #111111;
  color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
}

.contact-socials {
  align-items: center;
}

.information-content .social-icon {
  flex: 0 0 1.25em;
}

.information-content .social-linkedin {
  transform: scale(0.78);
  transform-origin: center;
}

/* A consistent active-section exit state for Gallery and Projects. */
body.is-gallery .gallery-button,
body.has-selected-project .projects-button {
  text-decoration: none;
}

body.is-gallery .gallery-button::after,
body.has-selected-project .projects-button::after {
  display: none;
}

.gallery-button > span:last-child,
.projects-button > span:last-child {
  position: relative;
  transition: color 180ms ease;
}

body.is-gallery .gallery-button > span:last-child::after,
body.has-selected-project .projects-button > span:last-child::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.gallery-exit,
.projects-exit {
  transition: color 180ms ease, opacity 200ms ease, transform 350ms cubic-bezier(.22, 1, .36, 1);
}

body.is-gallery .gallery-button:hover > span:last-child,
body.is-gallery .gallery-button:focus-visible > span:last-child,
body.has-selected-project .projects-button:hover > span:last-child,
body.has-selected-project .projects-button:focus-visible > span:last-child {
  color: rgb(17 17 17 / 45%);
}

body.is-gallery .gallery-button:hover > span:last-child::after,
body.is-gallery .gallery-button:focus-visible > span:last-child::after,
body.has-selected-project .projects-button:hover > span:last-child::after,
body.has-selected-project .projects-button:focus-visible > span:last-child::after {
  opacity: 0;
  transform: scaleX(0.65);
}

body.is-gallery .gallery-button:hover .gallery-exit,
body.is-gallery .gallery-button:focus-visible .gallery-exit,
body.has-selected-project .projects-button:hover .projects-exit,
body.has-selected-project .projects-button:focus-visible .projects-exit {
  color: #111111;
}

/* Preserve the existing reveal motion while also transitioning the exit colour. */
.gallery-exit {
  transition: opacity 200ms ease, transform 350ms cubic-bezier(.22, 1, .36, 1), color 180ms ease;
}

.projects-exit {
  transition: max-width 350ms cubic-bezier(.22, 1, .36, 1), margin-right 350ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease, transform 350ms cubic-bezier(.22, 1, .36, 1), color 180ms ease;
}

/* Header links must only be as wide as their labels, never a full grid column. */
.site-header > a {
  width: fit-content;
}

/* Direct Projects overview: show the completed welcome and the full project rail. */
body.is-project-overview .site-header,
body.is-project-overview .project-rail {
  opacity: 1;
}

/* Gallery is a self-contained canvas: no inactive rail or page scrollbar. */
body.is-gallery {
  overflow: hidden;
}

body.is-gallery .project-rail {
  overflow-y: hidden;
}

/* Gallery always takes visual priority over a retained Projects overview state. */
body.is-gallery .project-rail {
  opacity: 0;
  pointer-events: none;
}

/* EXPERIMENT: mirrored project composition. */
.project-rail {
  right: auto;
  left: var(--page-gutter);
  align-items: flex-start;
}

body.has-selected-project .project-card .project-frame,
body.has-selected-project .project-card.is-project-next .project-frame[data-orientation="landscape"] {
  right: auto;
  left: 0;
}

.stage-previous {
  right: var(--page-gutter);
  left: auto;
}

.project-stage-copy {
  right: var(--page-gutter);
  left: auto;
}

.gallery-credit-index {
  right: auto;
  left: var(--page-gutter);
}

/* EXPERIMENT: horizontal project selector below, vertical project progression above. */
.project-rail {
  top: auto;
  right: 0;
  bottom: var(--page-gutter);
  left: 0;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: var(--rail-active-height);
  padding: 0 var(--rail-padding);
  overflow-x: auto;
  overflow-y: hidden;
}

.project-rail::before,
.project-rail::after {
  flex: 0 0 0;
}

body.has-selected-project .project-rail::before,
body.has-selected-project .project-rail::after {
  flex-basis: max(0px, calc(50vw - var(--rail-active-width) / 2 - var(--rail-padding) - var(--rail-gap)));
}

body.has-selected-project .project-card .project-frame,
body.has-selected-project .project-card.is-project-next .project-frame[data-orientation="landscape"] {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stage-previous {
  top: var(--page-gutter);
  right: auto;
  left: 50%;
  cursor: n-resize;
  transform: translateX(-50%);
}

.stage-previous:hover {
  transform: translateX(-50%) scale(1.035);
}

.stage-active {
  cursor: s-resize;
}

body.has-project-stage .project-card.is-project-next,
body.has-project-stage .project-card.is-next-project {
  cursor: s-resize;
}

.project-stage-copy {
  right: auto;
  left: var(--page-gutter);
}

.gallery-credit-index {
  right: var(--page-gutter);
  left: auto;
}

/* EXPERIMENT: compact bottom-rail project icons. */
.project-rail .project-card {
  width: clamp(72px, 7vw, 132px);
  height: clamp(96px, 9.33vw, 176px);
}

.project-rail .project-card {
  flex: 0 0 clamp(56px, 5.5vw, 104px);
  width: clamp(56px, 5.5vw, 104px);
  height: clamp(75px, 7.33vw, 139px);
}

/* EXPERIMENT: keep the bottom rail compact while a project is open. */
body.has-project-stage .project-card {
  flex: 0 0 clamp(56px, 5.5vw, 104px);
  width: clamp(56px, 5.5vw, 104px);
  height: clamp(75px, 7.33vw, 139px);
}

body.has-project-stage .project-card .project-frame {
  width: 100%;
  height: 100%;
}

body.has-project-stage .project-card.is-project-next .project-frame[data-orientation="landscape"] {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

/* EXPERIMENT: remove the inherited tall rail while navigating inside a project. */
body.has-project-stage .project-rail {
  height: clamp(75px, 7.33vw, 139px);
  gap: clamp(22px, 2.4vw, 42px);
}

body.has-project-stage .project-card,
body.has-project-stage .project-card.is-active,
body.has-project-stage .project-card.is-project-next {
  flex: 0 0 clamp(56px, 5.5vw, 104px);
  width: clamp(56px, 5.5vw, 104px);
  height: clamp(75px, 7.33vw, 139px);
}

body.has-project-stage .project-card .project-frame,
body.has-project-stage .project-card.is-active .project-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none;
}

body.has-project-stage .project-card.is-project-next .project-frame[data-orientation="landscape"] {
  inset: 50% auto auto 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* EXPERIMENT: a centred, uniform landing rail. */
.project-rail {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.project-rail .project-card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

body:not(.has-selected-project) .project-rail {
  height: clamp(117px, 11.33vw, 213px);
}

body:not(.has-selected-project) .project-rail::before,
body:not(.has-selected-project) .project-rail::after {
  flex-basis: max(0px, calc(50vw - clamp(44px, 4.25vw, 80px) - var(--rail-padding)));
}

body:not(.has-selected-project) .project-rail .project-card {
  flex: 0 0 clamp(88px, 8.5vw, 160px);
  width: clamp(88px, 8.5vw, 160px);
  height: clamp(117px, 11.33vw, 213px);
}

body:not(.has-selected-project) .project-rail .project-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4 !important;
  /* The landing feed must show the complete project object.  Filling this
     portrait slot with `cover` crops landscape/irregular hero compositions. */
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ffffff;
}

/* EXPERIMENT: centre the complete landing collection, not one icon at a time. */
body:not(.has-selected-project) .project-rail {
  justify-content: center;
  scroll-snap-type: none;
}

body:not(.has-selected-project) .project-rail::before,
body:not(.has-selected-project) .project-rail::after {
  flex-basis: 0;
}

body:not(.has-selected-project) .project-rail .project-card {
  scroll-snap-align: none;
}

/* EXPERIMENT: align the left project copy with the central image’s top edge. */
.project-stage-copy {
  top: calc(50% - min(31vh, 19vw));
}

/* EXPERIMENT: reserve a clear header band above the vertical project flow. */
.stage-previous {
  top: calc(var(--page-gutter) + var(--interface-type-size) + clamp(28px, 4vh, 56px));
}

/* EXPERIMENT: centre the project text block against the main image. */
.project-stage-copy {
  top: 50%;
  transform: translateY(-50%);
}

/* EXPERIMENT: swap the outer navigation positions. */
.site-header > a:first-child {
  grid-column: 3;
  justify-self: end;
}

.projects-button {
  grid-column: 1;
  justify-self: start;
}

.information-page .site-header > a:last-child {
  grid-column: 1;
  justify-self: start;
}

/* EXPERIMENT: JavaScript owns rail centring; browser snapping must not compete. */
.project-rail {
  scroll-snap-type: none;
}

/* EXPERIMENT: fixed header order — Gallery / Projects / About. */
.gallery-button,
.gallery-link {
  grid-column: 1;
  justify-self: start;
}

.projects-button,
.information-page .site-header > a:last-child {
  grid-column: 2;
  justify-self: center;
}

.site-header > a:first-child {
  grid-column: 3;
  justify-self: end;
}

/* EXPERIMENT: keep all three header controls on About’s top line. */
.site-header {
  align-items: start;
}

.gallery-button,
.gallery-link,
.projects-button,
.page-exit {
  align-self: start;
  margin-top: 0;
}

/* EXPERIMENT: About lives inside the visual index, above the photographer credits. */
.projects-button {
  grid-column: 1;
  justify-self: start;
}

.gallery-button {
  grid-column: 3;
  justify-self: end;
}

body.is-gallery .projects-button {
  opacity: 0.45;
}

.gallery-about {
  position: absolute;
  right: var(--page-gutter);
  bottom: calc(var(--rail-padding) + clamp(170px, 19vh, 250px));
  z-index: 2;
  display: grid;
  gap: 0.65em;
  width: min(440px, 34vw);
  color: rgb(17 17 17 / 45%);
  font-size: clamp(12px, 0.95vw, 16px);
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

body.is-gallery .gallery-about {
  opacity: 1;
  pointer-events: auto;
}

.gallery-about p,
.gallery-about a {
  margin: 0;
}

.gallery-about-name {
  margin-bottom: 0.75em !important;
  color: #111111;
  font-size: var(--interface-type-size);
  text-transform: uppercase;
}

.gallery-contact-label {
  margin-top: 1em !important;
  color: #111111;
  text-transform: uppercase;
}

.gallery-about a:not(.social-icon):hover,
.gallery-about a:not(.social-icon):focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.gallery-socials {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.2em;
}

.gallery-about .social-icon {
  display: grid;
  flex: 0 0 1.25em;
  width: 1.25em;
  height: 1.25em;
  place-items: center;
  color: #111111;
}

.gallery-about .social-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.gallery-about .social-icon .instagram-dot {
  fill: currentColor;
  stroke: none;
}

.gallery-about .social-linkedin {
  background: #111111;
  color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  transform: scale(0.78);
}

/* EXPERIMENT: the name is a fixed header label; only the welcome sentence types. */
.site-header {
  opacity: 1;
}

.site-header > :not(.site-name) {
  opacity: 0.45;
}

body.has-dismissed-welcome .site-header > :not(.site-name),
body.is-project-overview .site-header > :not(.site-name) {
  opacity: 1;
}

.site-name {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin: 0;
  color: #111111;
  font-size: var(--interface-type-size);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

/* EXPERIMENT: centre the landing sentence in the viewport itself. */
body:not(.has-selected-project) .entry {
  top: 50%;
  width: min(58vw, 1000px, calc(100vw - (2 * var(--page-gutter))));
  text-align: center;
}

/* EXPERIMENT: keep the landing statement as one deliberate line. */
.welcome-message {
  white-space: nowrap;
}

/* EXPERIMENT: About / Wouter Kellens / Projects. */
.gallery-button {
  grid-column: 1;
  justify-self: start;
}

.projects-button {
  grid-column: 3;
  justify-self: end;
}

/* EXPERIMENT: centre the complete landing statement. */
.welcome-message {
  text-align: center;
}

/* EXPERIMENT: one shared baseline for About, name, and Projects. */
.site-header > .gallery-button,
.site-header > .projects-button,
.site-header > .site-name {
  align-self: start;
  height: var(--interface-type-size);
  margin: 0;
  padding: 0;
  font-size: var(--interface-type-size);
  line-height: var(--interface-type-size);
}

/* EXPERIMENT: one flex-centred baseline for every top label. */
.site-header > .gallery-button,
.site-header > .projects-button,
.site-header > .site-name {
  display: inline-flex;
  align-items: center;
  height: var(--interface-type-size);
  min-height: var(--interface-type-size);
  line-height: 1;
}

/* EXPERIMENT: pin each top label to the header’s identical top edge. */
.site-header {
  grid-template-rows: var(--interface-type-size);
  align-items: start;
}

.site-header > .gallery-button,
.site-header > .projects-button,
.site-header > .site-name {
  position: relative;
  top: 0;
  align-self: start;
  margin-block: 0 !important;
  transform: none;
}

/* EXPERIMENT: all header labels occupy the same grid row. */
.site-header > .gallery-button,
.site-header > .projects-button,
.site-header > .site-name {
  grid-row: 1;
}

/* EXPERIMENT: selected-project title is fixed to the actual viewport centre. */
body.has-selected-project .entry {
  position: static;
  width: auto;
  transform: none;
}

body.has-selected-project .selected-project {
  position: fixed;
  top: 50vh;
  left: 50vw;
  z-index: 4;
  width: max-content;
  transform: translate(-50%, -50%);
}

/* EXPERIMENT: selecting a project only recentres the strip; it does not resize it. */
body.has-selected-project:not(.has-project-stage) .project-rail {
  height: clamp(117px, 11.33vw, 213px);
}

body.has-selected-project:not(.has-project-stage) .project-card,
body.has-selected-project:not(.has-project-stage) .project-card.is-active,
body.has-selected-project:not(.has-project-stage) .project-card.is-project-next {
  flex: 0 0 clamp(88px, 8.5vw, 160px) !important;
  width: clamp(88px, 8.5vw, 160px) !important;
  height: clamp(117px, 11.33vw, 213px) !important;
}

body.has-selected-project:not(.has-project-stage) .project-rail::before,
body.has-selected-project:not(.has-project-stage) .project-rail::after {
  flex-basis: max(0px, calc(50vw - clamp(44px, 4.25vw, 80px) - var(--rail-padding) - var(--rail-gap)));
}

/* EXPERIMENT: gently raise the active project in the open-project strip. */
body.has-project-stage .project-card.is-active {
  position: relative;
  z-index: 2;
  transform: translateY(clamp(-12px, -0.7vw, -6px)) scale(1.055);
}

body.has-project-stage .project-card.is-active:hover {
  transform: translateY(clamp(-12px, -0.7vw, -6px)) scale(1.075);
}

/* EXPERIMENT: reserve headroom inside the rail so the active icon can rise without clipping. */
body.has-project-stage .project-rail {
  --active-project-lift: clamp(6px, 0.7vw, 12px);
  height: calc(clamp(75px, 7.33vw, 139px) + var(--active-project-lift));
  padding-top: var(--active-project-lift);
}

body.has-project-stage .project-card.is-active {
  transform: translateY(calc(-1 * var(--active-project-lift))) scale(1.055);
}

body.has-project-stage .project-card.is-active:hover {
  transform: translateY(calc(-1 * var(--active-project-lift))) scale(1.075);
}

/* EXPERIMENT: the active icon scales evenly, without a vertical lift. */
body.has-project-stage .project-rail {
  --active-project-headroom: clamp(4px, 0.4vw, 8px);
  height: calc(clamp(75px, 7.33vw, 139px) + (2 * var(--active-project-headroom)));
  bottom: calc(var(--page-gutter) - var(--active-project-headroom));
  padding: var(--active-project-headroom) var(--rail-padding);
}

body.has-project-stage .project-card.is-active {
  transform: scale(1.055);
}

body.has-project-stage .project-card.is-active:hover {
  transform: scale(1.075);
}

/* EXPERIMENT: scale the active icon upward from the shared bottom edge. */
body.has-project-stage .project-card.is-active {
  transform-origin: center bottom;
  transform: scale(1.07);
}

body.has-project-stage .project-card.is-active:hover {
  transform: scale(1.085);
}

/* EXPERIMENT: maintain the same visual gap between the previous and active project images. */
.stage-previous {
  top: calc(50% - (min(62vh, 38vw) / 2) - var(--rail-gap));
  transform: translate(-50%, -100%);
}

.stage-previous:hover {
  transform: translate(-50%, -100%) scale(1.035);
}

/* EXPERIMENT: centre the upper image in the space between the header and central image. */
.stage-previous {
  top: calc((var(--page-gutter) + var(--interface-type-size) + 50vh - min(31vh, 19vw)) / 2);
  transform: translate(-50%, -50%);
}

.stage-previous:hover {
  transform: translate(-50%, -50%) scale(1.035);
}

/* EXPERIMENT: backward project handoff presents a compact project entrance. */
body.is-project-intro .project-stage {
  opacity: 0;
  pointer-events: auto;
}

body.is-project-intro .entry {
  opacity: 1;
  pointer-events: auto;
}

/* EXPERIMENT: first and last compact cards receive equal centring room. */
body.has-project-stage .project-rail::before,
body.has-project-stage .project-rail::after {
  flex-basis: max(0px, calc(50vw - clamp(28px, 2.75vw, 52px) - var(--rail-padding) - var(--rail-gap)));
}

/* EXPERIMENT: make the next-project announcement fit the compact strip. */
body.has-project-stage .project-card.is-next-project::before,
body.has-project-stage .project-card.is-next-project::after {
  font-size: clamp(9px, 0.65vw, 12px);
}

/* EXPERIMENT: About keeps its exit label inside the left page margin. */
body.is-gallery .gallery-button {
  display: inline-flex;
  align-items: center;
}

body.is-gallery .gallery-exit {
  position: static;
  margin-right: 0.35em;
}

/* EXPERIMENT: align the About copy with the left page grid. */
.gallery-about {
  right: auto;
  left: var(--page-gutter);
  width: min(580px, 46vw);
  gap: clamp(10px, 1.15vh, 16px);
  text-align: left;
}

.gallery-about-name {
  margin-bottom: clamp(6px, 0.8vh, 12px) !important;
}

.gallery-contact-label {
  margin-top: clamp(8px, 1vh, 14px) !important;
}

/* EXPERIMENT: right-hand About and credits share one aligned text column. */
.gallery-about,
.gallery-credit-index {
  right: var(--page-gutter);
  left: auto;
  width: min(500px, 40vw);
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.25;
  text-align: left;
}

/* EXPERIMENT: place the About block in the quiet upper-right space below navigation. */
.gallery-about {
  top: calc(var(--page-gutter) + var(--interface-type-size) + clamp(40px, 6vh, 96px));
  bottom: auto;
}

/* EXPERIMENT: bring the photography index closer to the upper About block. */
.gallery-credit-index {
  bottom: calc(var(--rail-padding) + clamp(28px, 4vh, 56px));
}

.site-name .last-name {
  display: inline-block;
  margin-left: 0.25em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 900 !important;
  -webkit-text-stroke: 0.3px currentColor;
}

/* EXPERIMENT: one name anchor in the header; a stronger related credits heading. */
.gallery-credit-index > p {
  font-weight: 700;
}

/* EXPERIMENT: a single, ordered right-hand About information stack. */
.gallery-about {
  display: block;
}

.gallery-about-name,
.gallery-contact-label,
.gallery-photographers-heading {
  margin: 0;
  color: #111111;
  font-size: var(--interface-type-size);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.gallery-about-bio {
  margin-top: clamp(12px, 1.5vh, 20px);
}

.gallery-about-bio p + p {
  margin-top: 0.7em;
}

.gallery-contact-label,
.gallery-photographers {
  margin-top: clamp(24px, 3.5vh, 48px);
}

.gallery-contact-details {
  display: grid;
  gap: 0.4em;
  margin-top: clamp(12px, 1.5vh, 20px);
}

.gallery-contact-details .gallery-socials {
  margin-top: 0.45em;
}

.gallery-photographers dl {
  display: grid;
  gap: 0.35em;
  margin: clamp(12px, 1.5vh, 20px) 0 0;
}

.gallery-photographers dl div {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: 0.5em;
}

.gallery-photographers dt,
.gallery-photographers dd {
  margin: 0;
}

/* Keep the intended full break before the contact section. */
.gallery-contact-label {
  margin-top: clamp(24px, 3.5vh, 48px) !important;
}

/* EXPERIMENT: the centred project title exists only during the project entrance. */
body.has-project-stage:not(.is-project-intro) .entry {
  opacity: 0;
  pointer-events: none;
}

/* EXPERIMENT: JavaScript provides the only controlled rail motion. */
.project-rail {
  scroll-behavior: auto;
}

/* EXPERIMENT: entering a project has one rail motion, never two competing transitions. */
body.is-project-intro .project-rail::before,
body.is-project-intro .project-rail::after,
body.is-project-intro .project-card {
  transition: none;
}


/* EXPERIMENT: one stable intermediate project-card size prevents reflow during entry. */
:root {
  --stable-project-width: clamp(72px, 6.8vw, 128px);
  --stable-project-height: clamp(96px, 9.07vw, 171px);
}

.project-rail,
body:not(.has-selected-project) .project-rail,
body.has-project-stage .project-rail,
body.has-selected-project:not(.has-project-stage) .project-rail {
  height: var(--stable-project-height);
}

.project-card,
body:not(.has-selected-project) .project-rail .project-card,
body.has-project-stage .project-card,
body.has-selected-project:not(.has-project-stage) .project-card,
body.has-selected-project:not(.has-project-stage) .project-card.is-active,
body.has-selected-project:not(.has-project-stage) .project-card.is-project-next {
  flex-basis: var(--stable-project-width) !important;
  width: var(--stable-project-width) !important;
  height: var(--stable-project-height) !important;
}


/* EXPERIMENT: never show the rail while its underlying layout is being exchanged. */
.project-rail {
  transition: opacity 180ms ease;
}

body.is-repositioning-project-rail .project-rail {
  opacity: 0;
  transition: none;
  pointer-events: none;
}


/* EXPERIMENT: landing and project mode share one horizontal rail geometry. */
.project-rail,
body:not(.has-selected-project) .project-rail {
  justify-content: flex-start;
}

.project-rail::before,
.project-rail::after,
body:not(.has-selected-project) .project-rail::before,
body:not(.has-selected-project) .project-rail::after {
  flex-basis: max(0px, calc(50vw - (var(--stable-project-width) / 2) - var(--rail-padding) - var(--rail-gap)));
}


/* EXPERIMENT: place the landing sentence halfway between the header name and project images. */
:root {
  --stable-project-half-height: clamp(48px, 4.535vw, 85.5px);
  --interface-half-height: clamp(7px, 0.5vw, 9px);
}

body:not(.has-selected-project) .entry {
  top: calc(50vh - var(--stable-project-half-height) + var(--interface-half-height));
}


/* EXPERIMENT: project spacing is stable on landing and inside projects. */
:root {
  --stable-project-gap: clamp(18px, 2vh, 28px);
}

.project-rail,
body.has-project-stage .project-rail {
  gap: var(--stable-project-gap) !important;
}


/* EXPERIMENT: keep the project bar on one exact bottom baseline, with only upward headroom. */
body.has-project-stage .project-rail {
  --active-project-headroom: clamp(4px, 0.4vw, 8px);
  height: calc(var(--stable-project-height) + (2 * var(--active-project-headroom))) !important;
  bottom: var(--page-gutter) !important;
  padding: calc(2 * var(--active-project-headroom)) var(--rail-padding) 0 !important;
}


/* EXPERIMENT: landing projects lift subtly on hover, like the open-project controls. */
body:not(.has-selected-project) .project-rail {
  --landing-hover-headroom: clamp(4px, 0.4vw, 8px);
  height: calc(var(--stable-project-height) + (2 * var(--landing-hover-headroom))) !important;
  bottom: var(--page-gutter);
  padding: calc(2 * var(--landing-hover-headroom)) var(--rail-padding) 0;
}

body:not(.has-selected-project) .project-card {
  transform-origin: center bottom;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

body:not(.has-selected-project) .project-card:hover {
  position: relative;
  z-index: 2;
  transform: scale(1.055);
}


/* EXPERIMENT: the previous-image control always sits above the main image, never on it. */
:root {
  --stage-image-gap: clamp(18px, 2vh, 32px);
}

.stage-previous {
  top: calc(50vh - min(31vh, 19vw) - var(--stage-image-gap));
  transform: translate(-50%, -100%);
}

.stage-previous:hover {
  transform: translate(-50%, -100%) scale(1.035);
}


/* EXPERIMENT: after the finished intro breathes for a moment, projects become fully present. */
body.is-intro-settled .project-rail {
  opacity: 1;
}


/* EXPERIMENT: reserve a clear band between the central image and bottom project controls. */
:root {
  --stage-main-height: min(56vh, 35vw);
  --stage-main-half-height: min(28vh, 17.5vw);
}

.stage-active {
  height: var(--stage-main-height);
}

.stage-previous {
  top: calc(50vh - var(--stage-main-half-height) - var(--stage-image-gap));
}


/* EXPERIMENT: retain horizontal interaction without displaying a browser scrollbar. */
.project-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.project-rail::-webkit-scrollbar {
  display: none;
}


/* EXPERIMENT: tighten the breathing room below the header name. */
.stage-previous {
  top: calc(50vh - var(--stage-main-half-height) - var(--stage-image-gap) - clamp(12px, 1.6vh, 24px));
}


/* EXPERIMENT: a quiet image index for the currently open project. */
.project-image-index {
  position: fixed;
  top: 50%;
  right: var(--page-gutter);
  z-index: 6;
  display: grid;
  gap: clamp(8px, 1.1vh, 14px);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.project-image-index span {
  display: block;
  width: 2px;
  height: clamp(7px, 0.7vw, 12px);
  border-radius: 0;
  background: rgb(17 17 17 / 38%);
  transition: background-color 220ms ease, transform 220ms ease;
}

.project-image-index span.is-active {
  background: #111111;
  transform: scaleY(1.25);
  transform-origin: center;
}

body.has-project-stage:not(.is-project-intro) .project-image-index {
  opacity: 1;
}


/* EXPERIMENT: phone layout - same story, scaled for a vertical touch screen. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --page-gutter: 14px;
    --interface-type-size: 12px;
    --rail-padding: var(--page-gutter);
    --stable-project-width: clamp(58px, 17vw, 72px);
    --stable-project-height: clamp(77px, 22.67vw, 96px);
    --stable-project-half-height: clamp(38.5px, 11.335vw, 48px);
    --stable-project-gap: clamp(12px, 3.5vw, 16px);
    --stage-previous-width: clamp(48px, 14vw, 60px);
    --stage-main-height: min(50svh, 72vw);
    --stage-main-half-height: min(25svh, 36vw);
    --stage-image-gap: clamp(16px, 2.5svh, 24px);
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: var(--page-gutter);
  }

  .site-header > .gallery-button,
  .site-header > .projects-button,
  .site-header > .site-name {
    font-size: var(--interface-type-size);
  }

  body:not(.has-selected-project) .entry {
    width: min(340px, calc(100vw - (2 * var(--page-gutter))));
  }

  .welcome-message {
    white-space: normal;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.25;
  }

  .project-rail,
  body.has-project-stage .project-rail,
  body:not(.has-selected-project) .project-rail {
    --active-project-headroom: 5px;
    bottom: var(--page-gutter) !important;
  }

  .stage-active {
    height: var(--stage-main-height);
  }

  .stage-previous {
    top: calc(50svh - var(--stage-main-half-height) - var(--stage-image-gap) - 10px);
  }

  .project-stage-copy {
    top: calc(50svh + var(--stage-main-half-height) + clamp(16px, 3svh, 24px));
    right: var(--page-gutter);
    left: var(--page-gutter);
    width: auto;
  }

  .project-stage-copy .project-stage-description,
  .project-stage-copy .project-stage-details {
    max-width: min(100%, 360px);
    font-size: 13px !important;
    line-height: 1.25;
  }

  .project-image-index {
    right: var(--page-gutter);
  }

  .gallery-about {
    top: calc(var(--page-gutter) + var(--interface-type-size) + 44px);
    right: var(--page-gutter);
    left: var(--page-gutter);
    width: auto;
    font-size: 13px;
  }
}


/* EXPERIMENT: the portfolio is a fixed viewport, never a vertically scrolling page. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body,
.site-main {
  min-height: 100dvh;
  height: 100dvh;
}

/* The project rail remains a direct-touch horizontal surface. */
.project-rail {
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}


/* Phone project reading order: title, explanation, image. */
@media (max-aspect-ratio: 1 / 1) {
  .project-stage-copy {
    top: calc(var(--page-gutter) + var(--interface-type-size) + clamp(24px, 4svh, 36px));
    transform: none;
  }

  .project-stage-copy .project-stage-title {
    font-size: 14px;
    line-height: 1.1;
  }

  .project-stage-copy .project-stage-description {
    margin-top: 0.75em;
  }

  .stage-active {
    top: 62svh;
    height: min(44svh, 64vw);
  }

  .stage-previous {
    top: calc(62svh - min(22svh, 32vw) - var(--stage-image-gap));
  }
}


/* Phone refinement: a larger main image; previous image shares the metadata band. */
@media (max-aspect-ratio: 1 / 1) {
  .stage-active,
  .stage-active[data-orientation="landscape"] {
    top: 50svh;
    width: min(76vw, calc(100vw - (2 * var(--page-gutter))));
    height: auto;
  }

  .stage-previous {
    top: calc(var(--page-gutter) + var(--interface-type-size) + clamp(24px, 4svh, 36px) + 3.2em);
    right: var(--page-gutter);
    left: auto;
    transform: translateY(-50%);
  }

  .stage-previous:hover {
    transform: translateY(-50%) scale(1.035);
  }

  .project-stage:has(.stage-previous:not([hidden])) .project-stage-copy {
    right: calc(var(--page-gutter) + var(--stage-previous-width) + clamp(18px, 5vw, 28px));
  }
}


/* Phone-only project story: scroll from identity to images. */
@media (max-aspect-ratio: 1 / 1) {
  body.has-project-stage .project-rail {
    display: flex;
    z-index: 6;
    pointer-events: auto;
  }

  .project-stage {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .project-stage-copy,
  .stage-active,
  .stage-previous,
  .project-image-index {
    display: none;
  }

  .mobile-project-story {
    display: block;
    padding-bottom: calc(var(--page-gutter) * 3);
  }

  .mobile-story-intro,
  .mobile-story-hero,
  .mobile-story-description {
    box-sizing: border-box;
    min-height: 100svh;
    padding: calc(var(--page-gutter) * 3) var(--page-gutter);
  }

  .mobile-story-intro {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.8em;
    text-align: center;
  }

  .mobile-story-intro h2,
  .mobile-story-intro p,
  .mobile-story-description p {
    margin: 0;
  }

  .mobile-story-intro h2 {
    font-size: clamp(16px, 5vw, 21px);
    font-weight: 400;
    text-transform: uppercase;
  }

  .mobile-story-intro p,
  .mobile-story-description {
    color: rgb(17 17 17 / 52%);
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.3;
    white-space: pre-line;
  }

  .mobile-story-hero {
    display: grid;
    place-items: center;
  }

  .mobile-story-image {
    width: min(76vw, calc(100vw - (2 * var(--page-gutter))));
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .mobile-story-description {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1em;
    text-align: left;
  }

  .mobile-story-description-label {
    color: rgb(17 17 17);
    text-transform: uppercase;
  }

  .mobile-story-description > p:last-child {
    width: min(76vw, 34rem);
  }

  .mobile-story-slideshow {
    display: grid;
    justify-items: center;
    gap: clamp(28px, 6svh, 56px);
    padding: clamp(28px, 6svh, 56px) var(--page-gutter) calc(var(--stable-project-height) + (var(--page-gutter) * 4));
  }
}


/* Restore the image-to-image phone experience: swipe, do not page-scroll. */
@media (max-aspect-ratio: 1 / 1) {
  .project-stage {
    overflow: hidden;
    touch-action: none;
  }

  .mobile-project-story {
    display: none;
  }

  .project-stage-copy {
    display: block;
  }

  .stage-active,
  .stage-previous {
    display: block;
  }

  .project-image-index {
    display: grid;
  }
}


/* Phone swipe states: title, hero, description, then the image sequence. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-project-story {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    pointer-events: auto;
    touch-action: none;
    opacity: 1;
    transition: opacity 280ms ease;
  }

  .mobile-story-intro,
  .mobile-story-hero,
  .mobile-story-description {
    position: absolute;
    touch-action: none;
    inset: 0;
    display: grid;
    min-height: 0;
    padding: calc(var(--page-gutter) * 3) var(--page-gutter);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 420ms;
  }

  .mobile-story-intro {
    place-content: center;
    justify-items: center;
    text-align: center;
  }

  .mobile-story-hero {
    place-items: center;
  }

  .mobile-story-description {
    align-content: center;
    justify-items: center;
  }

  .mobile-story-slideshow {
    display: none;
  }

  body[data-phone-project-step="0"] .mobile-story-intro,
  body[data-phone-project-step="1"] .mobile-story-hero,
  body[data-phone-project-step="2"] .mobile-story-description {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body[data-phone-project-step="0"] .stage-active,
  body[data-phone-project-step="0"] .stage-previous,
  body[data-phone-project-step="0"] .project-stage-copy,
  body[data-phone-project-step="0"] .project-image-index,
  body[data-phone-project-step="1"] .stage-active,
  body[data-phone-project-step="1"] .stage-previous,
  body[data-phone-project-step="1"] .project-stage-copy,
  body[data-phone-project-step="1"] .project-image-index,
  body[data-phone-project-step="2"] .stage-active,
  body[data-phone-project-step="2"] .stage-previous,
  body[data-phone-project-step="2"] .project-stage-copy,
  body[data-phone-project-step="2"] .project-image-index {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body[data-phone-project-step="3"] .mobile-project-story {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-previous,
  body[data-phone-project-step="3"] .project-stage-copy,
  body[data-phone-project-step="3"] .project-image-index {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}


/* Phone sequence header: title plus one Description control; text never blocks swiping. */
@media (max-aspect-ratio: 1 / 1) {
  body[data-phone-project-step="3"] .project-stage-copy {
    top: calc(var(--page-gutter) + var(--interface-type-size) + clamp(24px, 4svh, 36px));
    right: auto;
    left: var(--page-gutter);
    width: auto;
    transform: none;
    pointer-events: none;
  }

  body[data-phone-project-step="3"] .project-stage-title {
    font-size: 14px;
    line-height: 1.1;
  }

  body[data-phone-project-step="3"] .project-stage-details {
    display: none;
  }

  body[data-phone-project-step="3"] .project-description-button {
    margin-top: 0.7em;
    font-size: 13px !important;
    pointer-events: auto;
  }

  body[data-phone-project-step="3"] .project-stage-description {
    pointer-events: none;
  }
}


/* Phone refinements: retain image history, but keep the image stage quiet. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-hero {
    align-content: center;
    justify-items: center;
    gap: clamp(18px, 4svh, 32px);
  }

  .mobile-story-hero-title {
    margin: 0;
    color: rgb(17 17 17);
    font-size: clamp(16px, 5vw, 21px);
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
  }

  body[data-phone-project-step="3"] .stage-previous,
  body[data-phone-project-step="3"] .project-description-button {
    display: none;
  }
}


/* Phone hero: title rises toward the header; image holds the visual centre. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-hero {
    display: block;
  }

  .mobile-story-hero-title {
    position: absolute;
    top: clamp(88px, 16svh, 136px);
    right: var(--page-gutter);
    left: var(--page-gutter);
    text-align: center;
  }

  .mobile-story-hero .mobile-story-image {
    position: absolute;
    top: 60svh;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}


/* Keep every phone project image on one shared centre line. */
@media (max-aspect-ratio: 1 / 1) {
  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-active[data-orientation="landscape"] {
    top: 60svh;
    left: 50%;
    width: min(76vw, calc(100vw - (2 * var(--page-gutter))));
    height: auto;
    transform: translate(-50%, -50%);
  }
}


/* One shared phone composition for the hero and image sequence. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-hero-title,
  body[data-phone-project-step="3"] .project-stage-copy {
    top: calc(45svh - 45vw - 4rem);
  }

  .mobile-story-hero .mobile-story-image,
  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-active[data-orientation="landscape"] {
    top: 45svh;
  }
}


/* With the quiet image stage, frames can use the page margins. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-hero .mobile-story-image,
  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-active[data-orientation="landscape"] {
    width: calc(100vw - (2 * var(--page-gutter)));
  }
}


/* Phone image sequence stays visually quiet. */
@media (max-aspect-ratio: 1 / 1) {
  body[data-phone-project-step="3"] .project-stage-copy {
    display: none;
  }
}


/* Phone typography: centred project title, left-aligned project information. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-intro p {
    width: 100%;
    text-align: left;
  }

  .mobile-story-description {
    justify-items: stretch;
    text-align: left;
  }

  .mobile-story-description-label,
  .mobile-story-description > p:last-child {
    width: 100%;
  }
}


/* Phone project rail: previous, active, and next share one three-point composition. */
@media (max-aspect-ratio: 1 / 1) {
  body.has-project-stage .project-rail {
    --rail-gap: max(12px, calc(50vw - var(--page-gutter) - clamp(87px, 25.5vw, 108px)));
    gap: var(--rail-gap) !important;
    padding-right: var(--page-gutter) !important;
    padding-left: var(--page-gutter) !important;
  }

  body.has-project-stage .project-rail::before,
  body.has-project-stage .project-rail::after {
    flex-basis: max(0px, calc(50vw - (var(--stable-project-width) / 2) - var(--page-gutter) - var(--rail-gap)));
  }
}


/* The active phone project is always the visual focus. */
@media (max-aspect-ratio: 1 / 1) {
  body.has-project-stage .project-card.is-active {
    opacity: 1 !important;
  }
}


/* About is text-only; the name opens the visual gallery and its credits. */
.about-panel {
  position: fixed;
  top: calc(var(--page-gutter) + var(--interface-type-size) + clamp(40px, 6vh, 96px));
  right: var(--page-gutter);
  left: auto;
  z-index: 4;
  display: none;
  width: min(500px, 40vw);
  color: rgb(17 17 17 / 55%);
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.25;
}

.about-panel p { margin: 0; }
.about-panel p + p { margin-top: 0.7em; }
body.is-about .about-panel { display: block; }
body.is-about .gallery-canvas { opacity: 0; pointer-events: none; }
body.is-about .project-rail { opacity: 0; pointer-events: none; }

body.is-gallery .gallery-about-name,
body.is-gallery .gallery-about-bio,
body.is-gallery .gallery-contact-label,
body.is-gallery .gallery-contact-details { display: none; }
body.is-gallery .gallery-photographers {
  position: fixed;
  right: var(--page-gutter);
  bottom: var(--page-gutter);
  left: auto;
  margin: 0;
}

.photo-credits-button {
  position: fixed;
  right: var(--page-gutter);
  bottom: var(--page-gutter);
  z-index: 5;
  display: none;
  color: #111111;
  font-size: var(--interface-type-size);
  text-transform: uppercase;
}

body.is-about .gallery-button,
body.is-gallery .gallery-button { display: inline-flex; align-items: center; }
body.is-about .gallery-exit,
body.is-gallery .gallery-exit { position: static; margin-right: 0.35em; }

@media (max-aspect-ratio: 1 / 1) {
  .about-panel {
    top: calc(var(--page-gutter) + var(--interface-type-size) + 44px);
    right: var(--page-gutter);
    left: var(--page-gutter);
    width: auto;
    font-size: 13px;
  }

  body.is-gallery .gallery-photographers {
    right: var(--page-gutter);
    bottom: calc(var(--page-gutter) + 2.5em);
    left: var(--page-gutter);
    z-index: 6;
    display: none;
    padding: 14px;
    background: rgb(255 255 255 / 94%);
  }

  body.is-gallery.has-photo-credits .gallery-photographers { display: block; }
  body.is-gallery .photo-credits-button { display: block; }
}


/* Phone open-project rail itself sits inside the page margins. */
@media (max-aspect-ratio: 1 / 1) {
  body.has-project-stage .project-rail {
    right: var(--page-gutter);
    left: var(--page-gutter);
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}


/* Experimental phone rail: its clipping edge is the viewport, never an inner white panel. */
@media (max-aspect-ratio: 1 / 1) {
  .site-main,
  .project-stage,
  .project-rail {
    border: 0;
    outline: 0;
    box-shadow: none;
  }

  body.has-project-stage .project-rail {
    margin: 0;
    background: transparent;
  }
}

/* Phone: reserve a clear right margin for the image-progress line. */
@media (max-aspect-ratio: 1 / 1) {
  :root { --phone-image-index-space: 24px; }

  .project-image-index {
    right: calc(var(--page-gutter) / 2);
  }

  .mobile-story-hero .mobile-story-image,
  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-active[data-orientation="landscape"] {
    width: calc(100vw - (2 * var(--page-gutter)) - var(--phone-image-index-space));
  }
}

/* Portrait project strip — one deliberate, full-width layout. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --portrait-card-width: clamp(58px, 17vw, 72px);
    --portrait-card-height: clamp(77px, 22.67vw, 96px);
    --portrait-selected-width: clamp(72px, 21vw, 88px);
    --portrait-selected-height: clamp(96px, 28vw, 117px);
    --portrait-landing-gap: clamp(12px, 3.5vw, 16px);
    --portrait-selected-gap: max(12px, calc(50vw - (var(--portrait-selected-width) / 2) - var(--portrait-card-width)));
  }

  .project-rail,
  body:not(.has-selected-project) .project-rail,
  body.has-selected-project .project-rail,
  body.has-project-stage .project-rail {
    position: fixed;
    top: auto;
    right: 0 !important;
    bottom: var(--page-gutter) !important;
    left: 0 !important;
    z-index: 7;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: auto !important;
    height: calc(var(--portrait-selected-height) + 12px) !important;
    margin: 0;
    padding: 12px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: transparent;
    scrollbar-width: none;
    scroll-behavior: auto;
  }

  .project-rail::-webkit-scrollbar { display: none; }

  .project-card,
  body.has-selected-project .project-card {
    flex: 0 0 var(--portrait-card-width) !important;
    width: var(--portrait-card-width) !important;
    height: var(--portrait-card-height) !important;
    margin: 0;
    transform-origin: center bottom;
    transition: width 260ms cubic-bezier(.22, 1, .36, 1), height 260ms cubic-bezier(.22, 1, .36, 1), transform 180ms ease, opacity 180ms ease;
  }

  body:not(.has-selected-project) .project-rail {
    justify-content: center !important;
    gap: var(--portrait-landing-gap) !important;
  }

  body.project-rail-overflows:not(.has-selected-project) .project-rail {
    justify-content: flex-start !important;
  }

  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    content: none;
    flex-basis: 0 !important;
  }

  body.has-selected-project .project-rail {
    justify-content: flex-start !important;
    gap: var(--portrait-selected-gap) !important;
  }

  body.has-selected-project .project-rail::before,
  body.has-selected-project .project-rail::after {
    content: "";
    display: block;
    flex: 0 0 var(--portrait-card-width) !important;
  }

  body.has-selected-project .project-card.is-active {
    flex-basis: var(--portrait-selected-width) !important;
    width: var(--portrait-selected-width) !important;
    height: var(--portrait-selected-height) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body:not(.has-selected-project) .project-card:hover,
  body.has-selected-project .project-card:not(.is-active):hover {
    position: relative;
    z-index: 2;
    transform: scale(1.045);
  }

  body.has-selected-project .project-card.is-active:hover {
    transform: scale(1.025) !important;
  }
}

/* Portrait selected state: one equal gap and one clear page margin on both sides. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --portrait-selected-gap: max(12px, calc(50vw - var(--page-gutter) - (var(--portrait-selected-width) / 2) - var(--portrait-card-width)));
  }

  body.has-selected-project .project-rail::before,
  body.has-selected-project .project-rail::after {
    flex-basis: calc(var(--portrait-card-width) + var(--page-gutter)) !important;
  }
}

/* First opening: calculate against the final selected-card geometry, not its growth animation. */
@media (max-aspect-ratio: 1 / 1) {
  body.is-centring-project-strip .project-card,
  body.is-centring-project-strip .project-rail::before,
  body.is-centring-project-strip .project-rail::after {
    transition: none !important;
  }
}

/* Portrait interactions use one softer motion curve. */
@media (max-aspect-ratio: 1 / 1) {
  .project-card,
  .mobile-story-intro,
  .mobile-story-hero,
  .mobile-story-description,
  .stage-active {
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
}

/* Central portrait-screen images fill the side margins first, then respect vertical breathing room. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --phone-central-image-width: calc(100vw - (2 * var(--page-gutter)));
    --phone-central-image-max-height: calc(110svh - var(--portrait-selected-height) - var(--portrait-selected-height) - var(--page-gutter) - var(--page-gutter));
  }

  .mobile-story-hero .mobile-story-image,
  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-active[data-orientation="portrait"] {
    width: min(var(--phone-central-image-width), calc(var(--phone-central-image-max-height) * 0.75));
    height: auto;
  }

  .mobile-story-hero .mobile-story-image[data-orientation="landscape"],
  body[data-phone-project-step="3"] .stage-active[data-orientation="landscape"] {
    width: min(var(--phone-central-image-width), calc(var(--phone-central-image-max-height) * 1.333333));
    height: auto;
  }
}

/* Portrait card lift: every highlighted card rises by exactly one page margin. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --portrait-selected-width: calc(var(--portrait-card-width) + 3vw);
    --portrait-selected-height: calc(var(--portrait-card-height) + var(--page-gutter));
  }

  body:not(.has-selected-project) .project-card:hover,
  body.has-selected-project .project-card:not(.is-active):hover {
    transform: scale(1.18);
  }
}

/* Main image sits at the exact midpoint between header and expanded project card. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-hero .mobile-story-image,
  body[data-phone-project-step="3"] .stage-active,
  body[data-phone-project-step="3"] .stage-active[data-orientation="landscape"] {
    top: var(--phone-image-centre-y, 45svh);
  }
}

/* Portrait bottom strip scales from available height, preserving every card proportion. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --portrait-card-height: 11.5svh;
    --portrait-card-width: 8.625svh;
    --portrait-selected-height: calc(11.5svh + 4vw);
    --portrait-selected-width: calc(8.625svh + 3vw);
  }

  .project-rail,
  body:not(.has-selected-project) .project-rail,
  body.has-selected-project .project-rail,
  body.has-project-stage .project-rail {
    height: calc(var(--portrait-selected-height) + 2svh) !important;
    padding-top: 2svh !important;
  }
}

/* EXPERIMENT �w^~)�t unified proportional design scale.
   Every measurement below is relative to the active viewport.
   We will add readability limits only after the proportions are approved. */
:root {
  --page-gutter: 2vw;
  --interface-type-size: 1vw;
  --rail-thumbnail-width: 9.4vw;
  --rail-thumbnail-height: 12.53vw;
  --rail-active-width: 13vw;
  --rail-active-height: 15.6vw;
  --rail-padding: 9svh;
  --rail-gap: 2svh;
  --stage-previous-width: 5vw;
  --stage-previous-title-offset: 6vw;
}

.site-header,
.site-header > .gallery-button,
.site-header > .projects-button,
.site-header > .site-name,
.projects-button {
  font-size: var(--interface-type-size);
}

.name,
.welcome-message {
  font-size: 1vw;
}

.information-content {
  gap: 1.5svh;
  width: 42vw;
  font-size: 1.4vw;
}

.information-content h1 {
  margin-bottom: 2svh;
}

.gallery-label,
.gallery-credit-index {
  font-size: 0.78vw;
}

.gallery-about {
  width: 34vw;
  font-size: 0.95vw;
}

.project-stage-copy .project-stage-description,
.project-stage-copy .project-stage-details,
.project-description-button {
  font-size: 1vw !important;
}

@media (max-aspect-ratio: 1 / 1) {
  :root {
    --page-gutter: 3.5vw;
    --interface-type-size: 3.1vw;
    --portrait-card-height: 11.5svh;
    --portrait-card-width: 8.625svh;
    --portrait-selected-height: calc(11.5svh + 4vw);
    --portrait-selected-width: calc(8.625svh + 3vw);
    --portrait-landing-gap: 3.5vw;
    --stage-previous-width: 14vw;
    --stage-image-gap: 2.5svh;
  }

  .name,
  .welcome-message {
    font-size: 4vw;
  }

  .information-content {
    gap: 2.5svh;
    width: calc(100vw - (2 * var(--page-gutter)));
    font-size: 4vw;
  }

  .project-stage-copy .project-stage-title {
    font-size: 3.5vw;
  }

  .project-stage-copy .project-stage-description,
  .project-stage-copy .project-stage-details,
  .project-description-button,
  .gallery-about {
    font-size: 3.25vw !important;
  }

  .gallery-label,
  .gallery-credit-index {
    font-size: 2.75vw;
  }

  .project-rail,
  body:not(.has-selected-project) .project-rail,
  body.has-selected-project .project-rail,
  body.has-project-stage .project-rail {
    height: calc(var(--portrait-selected-height) + 2svh) !important;
    padding-top: 2svh !important;
  }
}

/* Phone project index: one stripe for hero, one for description, then one for each remaining image.
   Its centre is locked to the same measured visual zone as the main image. */
@media (max-aspect-ratio: 1 / 1) {
  .project-image-index {
    top: var(--phone-image-centre-y, 50svh) !important;
    right: calc(var(--page-gutter) / 2) !important;
    gap: 1.1svh;
  }

  .project-image-index span {
    height: 1.7svh;
  }

  body[data-phone-project-step="1"] .project-image-index,
  body[data-phone-project-step="2"] .project-image-index,
  body[data-phone-project-step="3"] .project-image-index {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
  }
}

/* Phone home strip: cards rise on hover without scaling their cropped artwork. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-card:hover {
    transform: scale(var(--project-hover-scale, 1.18)) !important;
  }

  .mobile-story-description,
  .mobile-story-description p,
  .mobile-story-description-label {
    font-size: 3.25vw !important;
  }
}

/* Vertical reading column: a 4% left edge and a calmer 9% right edge. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-description {
    padding-left: 4vw !important;
    padding-right: 15vw !important;
  }
}

/* Vertical strip endpoints need enough invisible runway to centre the first and last selected projects. */
@media (max-aspect-ratio: 1 / 1) {
  body.has-selected-project .project-rail::before,
  body.has-selected-project .project-rail::after {
    flex-basis: max(
      calc(var(--portrait-card-width) + var(--page-gutter)),
      calc(50vw - (var(--portrait-selected-width) / 2))
    ) !important;
  }
}

/* Vertical typography uses three deliberate device classes; layout remains proportional. */
@media (max-width: 430px) and (max-aspect-ratio: 1 / 1) {
  :root { --type-interface: 13px; --type-reading: 14px; --type-title: 16px; --type-index: 11px; }
}

@media (min-width: 431px) and (max-width: 1024px) and (max-aspect-ratio: 1 / 1) {
  :root { --type-interface: 14px; --type-reading: 15px; --type-title: 18px; --type-index: 12px; }
}

@media (min-width: 1025px) and (max-aspect-ratio: 1 / 1) {
  :root { --type-interface: 15px; --type-reading: 16px; --type-title: 18px; --type-index: 12px; }
}

@media (max-aspect-ratio: 1 / 1) {
  .site-header,
  .site-header > .gallery-button,
  .site-header > .projects-button,
  .site-header > .site-name,
  .projects-button {
    font-size: var(--type-interface) !important;
  }

  .name,
  .welcome-message,
  .mobile-story-intro p,
  .mobile-story-description,
  .mobile-story-description p,
  .mobile-story-description-label,
  .project-stage-copy .project-stage-description,
  .project-stage-copy .project-stage-details,
  .project-description-button,
  .gallery-about {
    font-size: var(--type-reading) !important;
  }

  .mobile-story-intro h2,
  .project-stage-copy .project-stage-title {
    font-size: var(--type-title) !important;
  }

  .gallery-label,
  .gallery-credit-index,
  .project-image-index {
    font-size: var(--type-index) !important;
  }
}

/* Vertical landing strip uses the same responsive card scale as an open project. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-card {
    flex-basis: var(--portrait-selected-width) !important;
    width: var(--portrait-selected-width) !important;
    height: var(--portrait-selected-height) !important;
  }

  body:not(.has-selected-project) .project-rail {
    height: calc(var(--portrait-selected-height) + 2svh) !important;
  }
}

/* Final vertical-strip authority: home and project view share one measured image size. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail .project-card {
    flex: 0 0 var(--portrait-selected-width) !important;
    inline-size: var(--portrait-selected-width) !important;
    block-size: var(--portrait-selected-height) !important;
    min-inline-size: var(--portrait-selected-width) !important;
    min-block-size: var(--portrait-selected-height) !important;
  }
}

/* Portrait landing rail: direct final dimensions, identical to the selected-project card. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail > .project-card {
    flex: 0 0 calc(8.625svh + 3vw) !important;
    width: calc(8.625svh + 3vw) !important;
    min-width: calc(8.625svh + 3vw) !important;
    max-width: calc(8.625svh + 3vw) !important;
    height: calc(11.5svh + 4vw) !important;
    min-height: calc(11.5svh + 4vw) !important;
    max-height: calc(11.5svh + 4vw) !important;
  }

  body:not(.has-selected-project) .project-rail > .project-card > .project-frame {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Vertical photo credits follow the same deliberate device typography tiers. */
@media (max-aspect-ratio: 1 / 1) {
  .photo-credits-button,
  .gallery-photographers-heading {
    font-size: var(--type-interface) !important;
  }

  .gallery-photographers,
  .gallery-photographers dt,
  .gallery-photographers dd {
    font-size: var(--type-reading) !important;
  }
}

/* Header state: About is active only on About; the name is active in the gallery view. */
.site-name::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.65);
  transform-origin: left;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

body.is-gallery .gallery-button {
  opacity: 0.45 !important;
  text-decoration: none !important;
}

body.is-gallery .gallery-button > span:last-child::after {
  opacity: 0 !important;
}

body.is-gallery .site-name::after {
  opacity: 1;
  transform: scaleX(1);
}

body.is-about .gallery-button > span:last-child::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 1;
  transform: scaleX(1);
}

/* Gallery and About use the same Exit-first interaction as Projects. */
.site-name > span:last-child { position: relative; }
.site-exit {
  display: inline-flex;
  margin-right: 0.35em;
  color: rgb(17 17 17 / 45%);
  transition: color 180ms ease;
}

body.is-gallery .site-name::after { opacity: 0 !important; }
body.is-gallery .site-name > span:last-child::after,
body.is-about .gallery-button > span:last-child::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

body.is-gallery .site-name:hover > span:last-child,
body.is-gallery .site-name:focus-visible > span:last-child,
body.is-about .gallery-button:hover > span:last-child,
body.is-about .gallery-button:focus-visible > span:last-child {
  color: rgb(17 17 17 / 45%);
}

body.is-gallery .site-name:hover > span:last-child::after,
body.is-gallery .site-name:focus-visible > span:last-child::after,
body.is-about .gallery-button:hover > span:last-child::after,
body.is-about .gallery-button:focus-visible > span:last-child::after {
  opacity: 0;
  transform: scaleX(.65);
}

body.is-gallery .site-name:hover .site-exit,
body.is-gallery .site-name:focus-visible .site-exit,
body.is-about .gallery-button:hover .gallery-exit,
body.is-about .gallery-button:focus-visible .gallery-exit {
  color: #111111;
}

body.is-about .gallery-exit {
  opacity: 1;
  transform: translateX(0);
}

/* The About column follows the right-hand reading alignment used elsewhere. */
.about-panel {
  top: calc(var(--page-gutter) + var(--interface-type-size) + 5svh);
  width: min(34vw, 500px);
}
.about-panel p + p { margin-top: 0.85em; }
@media (max-aspect-ratio: 1 / 1) {
  .about-panel {
    top: calc(var(--page-gutter) + var(--type-interface) + 5svh);
    right: 15vw;
    left: 4vw;
    width: auto;
    font-size: var(--type-reading) !important;
  }
}

/* Gallery keeps About quiet; About hover reveals only its Exit action. */
body.is-gallery .gallery-exit {
  display: none !important;
}

body.is-gallery .gallery-button {
  opacity: 0.45 !important;
}

body.is-about .gallery-button::after {
  display: none !important;
}

body.is-about .gallery-button:hover > span:last-child::after,
body.is-about .gallery-button:focus-visible > span:last-child::after {
  display: none !important;
}

/* Photo credits sit above the gallery controls and finish flush with the bottom edge. */
@media (max-aspect-ratio: 1 / 1) {
  body.is-gallery .photo-credits-button {
    z-index: 9;
    pointer-events: auto;
    touch-action: manipulation;
  }

  body.is-gallery.has-photo-credits .gallery-photographers {
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    max-height: 75svh;
    padding: 14px var(--page-gutter) calc(var(--page-gutter) + 2.5em);
    overflow-y: auto;
    background: rgb(255 255 255 / 94%);
  }
}

/* Content mapping: Overview opens the gallery; Wouter Kellens opens the written profile. */
body.is-gallery .gallery-button {
  opacity: 1 !important;
  text-decoration: none !important;
}
body.is-gallery .gallery-exit {
  display: inline-flex !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}
body.is-gallery .gallery-button > span:last-child { position: relative; }
body.is-gallery .gallery-button > span:last-child::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 1 !important;
  transform: scaleX(1);
}
body.is-gallery .site-name { opacity: 0.45; }
body.is-gallery .site-name::after { opacity: 0 !important; }

body.is-about .gallery-button { opacity: 0.45 !important; }
body.is-about .gallery-exit { display: none !important; }
body.is-about .site-name::after { opacity: 0 !important; }
body.is-about .site-name > span:last-child { position: relative; }
body.is-about .site-name > span:last-child::after {
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 1;
  transform: scaleX(1);
}
body.is-about .site-name:hover > span:last-child,
body.is-about .site-name:focus-visible > span:last-child { color: rgb(17 17 17 / 45%); }
body.is-about .site-name:hover > span:last-child::after,
body.is-about .site-name:focus-visible > span:last-child::after { display: none; }
body.is-about .site-name:hover .site-exit,
body.is-about .site-name:focus-visible .site-exit { color: #111111; }

/* One shared header rhythm: inactive, hover, and active Exit states. */
.site-header > .gallery-button,
.site-header > .site-name,
.site-header > .projects-button {
  opacity: 1;
  transition: opacity 180ms ease, color 180ms ease;
}

.site-header > .site-name::after,
.site-header > .gallery-button::after,
.site-header > .projects-button::after {
  right: 0;
  bottom: -0.4em;
  left: 0;
  transform-origin: left;
}

/* An available section only gains its line on hover. */
.site-header > .site-name:hover::after,
.site-header > .site-name:focus-visible::after,
.site-header > .gallery-button:hover::after,
.site-header > .gallery-button:focus-visible::after,
.site-header > .projects-button:hover::after,
.site-header > .projects-button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Every open section shows Exit in grey, one line beneath the complete label, and dims the other two. */
body.is-gallery .site-header > .site-name,
body.is-gallery .site-header > .projects-button,
body.is-about .site-header > .gallery-button,
body.is-about .site-header > .projects-button,
body.has-selected-project .site-header > .gallery-button,
body.has-selected-project .site-header > .site-name {
  opacity: 0.5 !important;
}

body.is-gallery .gallery-button,
body.is-about .site-name,
body.has-selected-project .projects-button {
  opacity: 1 !important;
  text-decoration: none !important;
}

body.is-gallery .gallery-exit,
body.is-about .site-exit,
body.has-selected-project .projects-exit {
  display: inline-flex !important;
  max-width: 5em !important;
  margin-right: 0.35em !important;
  overflow: visible !important;
  color: rgb(17 17 17 / 45%) !important;
  opacity: 1 !important;
  transform: none !important;
}

body.is-gallery .gallery-button::after,
body.is-about .site-name::after,
body.has-selected-project .projects-button::after {
  display: block !important;
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Active hover keeps the full underline and turns only Exit black. */
body.is-gallery .gallery-button:hover .gallery-exit,
body.is-gallery .gallery-button:focus-visible .gallery-exit,
body.is-about .site-name:hover .site-exit,
body.is-about .site-name:focus-visible .site-exit,
body.has-selected-project .projects-button:hover .projects-exit,
body.has-selected-project .projects-button:focus-visible .projects-exit {
  color: #111111 !important;
}

body.is-gallery .gallery-button:hover::after,
body.is-gallery .gallery-button:focus-visible::after,
body.is-about .site-name:hover::after,
body.is-about .site-name:focus-visible::after,
body.has-selected-project .projects-button:hover::after,
body.has-selected-project .projects-button:focus-visible::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Old title-only active lines are disabled in favour of the one full-label line. */
body.is-gallery .gallery-button > span:last-child::after,
body.is-about .site-name > span:last-child::after,
body.has-selected-project .projects-button > span:last-child::after {
  display: none !important;
}

/* Header state is carried by opacity and Exit only—never underlines. */
.site-header > .site-name::after,
.site-header > .gallery-button::after,
.site-header > .projects-button::after,
.site-header > .site-name > span:last-child::after,
.site-header > .gallery-button > span:last-child::after,
.site-header > .projects-button > span:last-child::after {
  display: none !important;
}

/* Overview profile story: visual first, written profile after one step. */
.about-profile-image {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: none;
  width: min(34vw, 440px);
  height: min(60svh, 640px);
  padding: 0;
  background: #e8e8e8 url("../../PROFILE/PROFILE.jpg") center / cover no-repeat;
  transform: translate(-50%, -50%);
}

body.is-about[data-about-step="0"] .about-profile-image { display: block; }
body.is-about[data-about-step="0"] .about-panel { display: none; }
body.is-about[data-about-step="1"] .about-profile-image { display: none; }
body.is-about[data-about-step="1"] .about-panel { display: block; }
@media (max-aspect-ratio: 1 / 1) {
  .about-profile-image {
    width: calc(100vw - 8vw);
    height: min(66svh, 125vw);
  }
}

/* Overview now follows the project-story composition exactly. */
.about-profile-image {
  top: 50%;
  left: 50%;
  width: min(34vw, 45svh) !important;
  height: auto !important;
  aspect-ratio: 1600 / 2133;
  background: #ffffff !important;
  overflow: hidden;
}
.about-profile-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-next-label {
  position: fixed;
  bottom: calc(var(--page-gutter) + 2svh);
  left: 50%;
  z-index: 5;
  display: none;
  font-size: var(--type-interface, var(--interface-type-size));
  text-transform: uppercase;
  transform: translateX(-50%);
}
body.is-about[data-about-step="0"] .about-next-label { display: block; }

.about-image-index {
  position: fixed;
  top: 50%;
  right: calc(var(--page-gutter) / 2);
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 1.1svh;
  transform: translateY(-50%);
}
.about-image-index span {
  display: block;
  width: 1px;
  height: 1.7svh;
  background: rgb(17 17 17 / 28%);
}
body.is-about .about-image-index { display: flex; }
body.is-about[data-about-step="0"] .about-image-index span:first-child,
body.is-about[data-about-step="1"] .about-image-index span:last-child {
  background: #111111;
}

body.is-about[data-about-step="1"] .about-panel {
  position: fixed;
  top: 50%;
  right: auto;
  left: 50%;
  width: min(34vw, 500px);
  transform: translate(-50%, -50%);
}
@media (max-aspect-ratio: 1 / 1) {
  .about-profile-image {
    width: min(calc(100vw - 8vw), 45svh) !important;
  }
  .about-next-label { bottom: calc(var(--page-gutter) + 2svh); }
  body.is-about[data-about-step="1"] .about-panel {
    top: 50%;
    right: 15vw;
    left: 4vw;
    width: auto;
    transform: translateY(-50%);
  }
}

/* Header states: active state is opacity + Exit only, never an underline. */
.site-header > .gallery-button, .site-header > .site-name, .site-header > .projects-button { opacity: 1 !important; text-decoration: none !important; }
.site-header > .gallery-button::after, .site-header > .site-name::after, .site-header > .projects-button::after, .site-header > .gallery-button > span:last-child::after, .site-header > .site-name > span:last-child::after, .site-header > .projects-button > span:last-child::after { display: none !important; content: none !important; }
.gallery-exit, .projects-exit, .site-exit { display: none !important; }
body.is-gallery .site-header > .site-name, body.is-gallery .site-header > .projects-button, body.is-about .site-header > .gallery-button, body.is-about .site-header > .projects-button, body.has-selected-project .site-header > .gallery-button, body.has-selected-project .site-header > .site-name { opacity: .5 !important; }
body.is-gallery .gallery-button, body.is-about .site-name, body.has-selected-project .projects-button { opacity: 1 !important; }
body.is-gallery .gallery-exit, body.is-about .site-exit, body.has-selected-project .projects-exit { display: inline !important; margin-right: .35em !important; color: rgb(17 17 17 / 45%) !important; }
body.is-gallery .gallery-button:hover .gallery-exit, body.is-gallery .gallery-button:focus-visible .gallery-exit, body.is-about .site-name:hover .site-exit, body.is-about .site-name:focus-visible .site-exit, body.has-selected-project .projects-button:hover .projects-exit, body.has-selected-project .projects-button:focus-visible .projects-exit { color: #111 !important; }

/* The written About step occupies the identical, fully interactive 3:4 frame. */
body.is-about[data-about-step="1"] .about-panel {
  top: 50%;
  right: auto;
  left: 50%;
  z-index: 6;
  width: min(34vw, 45svh);
  height: min(45.33vw, 60svh);
  margin: 0;
  padding: clamp(16px, 2.4vw, 36px);
  overflow: hidden;
  display: grid;
  align-content: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
body.is-about[data-about-step="1"] .about-panel p { pointer-events: none; }
@media (max-aspect-ratio: 1 / 1) {
  body.is-about[data-about-step="1"] .about-panel {
    top: 50%;
    right: auto;
    left: 50%;
    width: min(92vw, 45svh);
    height: min(122.67vw, 60svh);
    padding: clamp(16px, 4vw, 30px);
    transform: translate(-50%, -50%);
  }
}

body.is-about[data-about-step="1"] .about-panel { font-size: clamp(8px, 1.15vmin, 14px) !important; line-height: 1.25; }

/* Active headers: title black, Exit grey. */
body.is-gallery .gallery-button > span:last-child,
body.is-about .site-name > span:last-child,
body.has-selected-project .projects-button > span:last-child { color: #111 !important; opacity: 1 !important; }
body.is-gallery .gallery-exit,
body.is-about .site-exit,
body.has-selected-project .projects-exit { color: rgb(17 17 17 / 45%) !important; opacity: 1 !important; }
body.is-gallery .gallery-button:hover .gallery-exit,
body.is-gallery .gallery-button:focus-visible .gallery-exit,
body.is-about .site-name:hover .site-exit,
body.is-about .site-name:focus-visible .site-exit,
body.has-selected-project .projects-button:hover .projects-exit,
body.has-selected-project .projects-button:focus-visible .projects-exit { color: #111 !important; }

/* Portrait project descriptions use the same full visual frame as About. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-description {
    padding: 0;
    place-items: center;
  }
  .mobile-story-description-frame {
    width: min(92vw, 45svh);
    height: min(122.67vw, 60svh);
    padding: clamp(16px, 4vw, 30px);
    display: grid;
    align-content: center;
    color: rgb(17 17 17 / 55%);
    font-size: var(--type-reading, 3.25vw);
    line-height: 1.25;
  }
  .mobile-story-description-frame p { margin: 0; }
  .mobile-story-description-frame p + p { margin-top: .85em; }
  .mobile-story-description-label { text-transform: uppercase; }
}

/* Keep the complete text blocks—not only their frames—vertically centred. */
body.is-about[data-about-step="1"] .about-panel,
.mobile-story-description-frame {
  align-content: center !important;
  justify-content: stretch;
}
body.is-about[data-about-step="1"] .about-panel > :first-child,
.mobile-story-description-frame > :first-child { margin-top: 0 !important; }

/* About uses the same reading scale as project descriptions. */
body.is-about[data-about-step="1"] .about-panel { font-size: var(--type-reading, 1vw) !important; }
body.is-about[data-about-step="1"] .about-panel h2 {
  margin: 0 0 .85em;
  color: #111;
  font-size: var(--type-title, 1.2vw);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

/* In the Wouter Kellens section, the label is quiet and Exit stays at half opacity. */
body.is-about .site-name .last-name { font-weight: 400 !important; }
body.is-about .site-name .site-exit,
body.is-about .site-name:hover .site-exit,
body.is-about .site-name:focus-visible .site-exit { color: rgb(17 17 17 / 50%) !important; }

/* The entire central project area is a gesture surface, including its white space. */
body.has-project-stage .project-stage { touch-action: none; }

/* The next-project tile remains a deliberate tap target; the rest of the rail pans freely. */
.project-card.is-next-project { touch-action: none; }

/* Overview begins directly at the left edge, including when zoomed out. */
body.is-gallery .gallery-world {
  left: 0;
  right: auto;
  width: 100%;
  padding-left: 0;
  transform-origin: left center;
}

/* Restore the original Overview movement; only remove its left inset. */
body.is-gallery .gallery-world {
  inset: 0;
  width: auto;
  padding-left: 0;
  transform-origin: center;
}

/* Overview uses one consistent page margin on every edge. */
body.is-gallery .gallery-world { padding-top: var(--page-gutter); }

/* Overview: the left image edge may never move right of the page margin, but may pan left off-screen. */
body.is-gallery .gallery-world { padding-left: var(--page-gutter); }

/* Overview keeps the side margin, with extra breathing space below the header. */
body.is-gallery .gallery-world {
  padding-left: var(--page-gutter);
  padding-top: calc((var(--page-gutter) * 2) + var(--interface-type-size));
}

/* Desktop photographer credits read as a compact gallery index. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-gallery .gallery-photographers {
    right: var(--page-gutter);
    bottom: calc(var(--page-gutter) + 2.25em);
    left: auto;
    width: min(19vw, 250px);
    color: rgb(17 17 17 / 52%);
    font-size: clamp(10px, .72vw, 13px);
    line-height: 1.2;
  }
  body.is-gallery .gallery-photographers-heading {
    margin: 0 0 .8em;
    color: #111;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: .02em;
  }
  body.is-gallery .gallery-photographers dl { margin: 0; gap: .3em; }
  body.is-gallery .gallery-photographers dl div { grid-template-columns: 3.8em 1fr; gap: .45em; }
  body.is-gallery .photo-credits-button {
    right: var(--page-gutter);
    bottom: var(--page-gutter);
    color: rgb(17 17 17 / 52%);
    font-size: clamp(10px, .72vw, 13px);
  }
}

/* Final rule: every horizontal screen keeps the story marker on the exact
   caption/text guide. This intentionally comes last to overrule older
   experimental layouts. */
@media (min-aspect-ratio: 1001 / 1000) {
  .project-image-index {
    top: auto !important;
    right: auto !important;
    bottom: var(--page-gutter) !important;
    left: 50% !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    align-items: center !important;
    gap: clamp(8px, 1.1vw, 14px) !important;
    transform: translateX(-50%) !important;
  }

  .project-image-index span {
    width: clamp(7px, 0.7vw, 12px) !important;
    height: 2px !important;
  }

  .project-image-index span.is-active {
    transform: scaleX(1.25) !important;
  }
}

/* Header: the active section is the only emphasis. */
.site-header > .site-name,
.site-header > .site-name .first-name,
.site-header > .site-name .last-name {
  font-weight: 400 !important;
}

body.is-gallery .site-header .gallery-exit,
body.has-selected-project .site-header .projects-exit,
body.is-about .site-header .site-exit,
.site-header .gallery-exit,
.site-header .projects-exit,
.site-header .site-exit {
  display: none !important;
}

body.is-gallery .site-header > .gallery-button,
body.has-selected-project .site-header > .projects-button {
  font-weight: 700 !important;
}

body.is-gallery .site-header > .gallery-button *,
body.has-selected-project .site-header > .projects-button * {
  font-weight: inherit !important;
}

/* Landing message is intentionally two lines. */
.welcome-message { white-space: normal !important; }
.welcome-message > strong,
.welcome-message > .welcome-support { display: block; }
.welcome-message > strong { color: #111; }
.welcome-message > .welcome-support { margin-top: .15em; }

/* The typing cursor belongs to the active text line, never after the two-line
   message container (which would force it onto a third line). */
.welcome-message::after { content: none !important; }
.welcome-message > strong::after,
.welcome-message > .welcome-support:not(:empty)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: .25em;
  background: currentColor;
  vertical-align: text-bottom;
  transform: translateY(-.06em);
  animation: blink 800ms steps(1) infinite;
}
.welcome-message:has(.welcome-support:not(:empty)) > strong::after,
.welcome-message.is-typed > strong::after,
.welcome-message.is-typed > .welcome-support::after {
  display: none;
}

/* Photographer credits: a quiet typographic index, not a separate panel. */
body.is-gallery .gallery-photographers {
  color: rgb(17 17 17 / 58%);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
body.is-gallery .gallery-photographers-heading {
  display: flex;
  align-items: center;
  gap: .65em;
  margin-bottom: 1em;
  color: #111;
  font-weight: 700;
  letter-spacing: .025em;
}
body.is-gallery .gallery-photographers-heading::after {
  content: "";
  width: 1.7em;
  height: 1px;
  background: currentColor;
  opacity: .35;
}
body.is-gallery .gallery-photographers dl { gap: .42em; }
body.is-gallery .gallery-photographers dl div {
  grid-template-columns: 3.4em minmax(0, 1fr);
  gap: .6em;
  align-items: baseline;
}
body.is-gallery .gallery-photographers dt {
  color: rgb(17 17 17 / 36%);
  letter-spacing: .04em;
}
body.is-gallery .gallery-photographers dd {
  color: rgb(17 17 17 / 64%);
  letter-spacing: .015em;
}

/* Overview credits: open on entry at the lower-left margin, then collapse to one control. */
body.is-gallery .gallery-photographers {
  right: auto;
  bottom: var(--page-gutter);
  left: var(--page-gutter);
  margin: 0;
}
body.is-gallery .photo-credits-button {
  right: auto;
  bottom: var(--page-gutter);
  left: var(--page-gutter);
}
body.is-gallery.has-photo-credits .photo-credits-button { display: none !important; }
body.is-gallery:not(.has-photo-credits) .photo-credits-button { display: block !important; }
body.is-gallery .gallery-photographers-heading {
  display: block;
  margin: 0 0 .8em;
  color: #111;
  font-weight: 400;
  letter-spacing: normal;
}
body.is-gallery .gallery-photographers-heading::after { display: none; }
body.is-gallery .gallery-photographers dl { gap: .35em; }
body.is-gallery .gallery-photographers dl div { grid-template-columns: 4em 1fr; gap: .5em; }
body.is-gallery .gallery-photographers dt,
body.is-gallery .gallery-photographers dd { color: inherit; letter-spacing: normal; }

/* Wouter Kellens is one consistently bold header title in every state. */
.site-header > .site-name,
.site-header > .site-name > span:last-child,
.site-header > .site-name .last-name {
  font-weight: 700 !important;
  -webkit-text-stroke: 0 !important;
}
body.is-about .site-name .site-exit {
  font-weight: 400 !important;
}

/* Credits fade between their open index and lower-left control. */
body.is-gallery .gallery-photographers {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 320ms;
}
body.is-gallery.has-photo-credits .gallery-photographers {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
body.is-gallery .photo-credits-button {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}
body.is-gallery:not(.has-photo-credits) .photo-credits-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.is-gallery.has-photo-credits .photo-credits-button { opacity: 0; pointer-events: none; }
body.is-gallery .gallery-photographers-heading { display: flex; gap: .35em; }
body.is-gallery .gallery-photographers-heading .photography-exit { color: rgb(17 17 17 / 45%); }

/* A clicked Overview begins with its Exit visibly grey, even while the cursor remains there. */
body.suppress-gallery-exit-hover.is-gallery .gallery-button:hover .gallery-exit,
body.suppress-gallery-exit-hover.is-gallery .gallery-button:focus-visible .gallery-exit {
  color: rgb(17 17 17 / 45%) !important;
}

/* Landing strip runway: either end project can travel to the screen centre. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail { justify-content: flex-start !important; }
  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 max(0px, calc(50vw - (var(--portrait-selected-width) / 2) - var(--portrait-landing-gap))) !important;
  }
}

/* Photo credits float as one translucent, margin-padded index. */
body.is-gallery .gallery-photographers {
  box-sizing: border-box;
  padding: var(--page-gutter);
  background: rgb(255 255 255 / 78%);
}

/* Empty runway around the bottom projects is a dedicated horizontal gesture zone. */
body.has-selected-project .project-rail { touch-action: none; }

/* Credits panel bleeds left and bottom; its text keeps one page margin inside. */
body.is-gallery .gallery-photographers {
  left: 0;
  bottom: 0;
  right: auto;
  padding: var(--page-gutter);
}

/* The bottom project strip is a free track: only a selected project is centred. */
body.has-selected-project .project-rail {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
}
body.has-selected-project .project-rail .project-card {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}


/* Credits are a compact floating rectangle, never an edge-to-edge sheet. */
body.is-gallery .gallery-photographers,
body.is-gallery.has-photo-credits .gallery-photographers {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: var(--page-gutter) !important;
  left: var(--page-gutter) !important;
  width: fit-content !important;
  max-width: calc(100vw - (var(--page-gutter) * 2)) !important;
  max-height: calc(100svh - (var(--page-gutter) * 2)) !important;
  margin: 0 !important;
  padding: var(--page-gutter) !important;
  overflow: auto !important;
  background: rgb(255 255 255 / 78%) !important;
}

/* Tighter inset for the compact photography-credit rectangle. */
body.is-gallery .gallery-photographers,
body.is-gallery.has-photo-credits .gallery-photographers {
  padding: calc(var(--page-gutter) * .65) !important;
}

/* Phone credits use the quieter index scale with clear, even row spacing. */
@media (max-width: 430px) and (max-aspect-ratio: 1 / 1) {
  body.is-gallery .gallery-photographers,
  body.is-gallery .gallery-photographers dt,
  body.is-gallery .gallery-photographers dd {
    font-size: var(--type-index) !important;
    line-height: 1.25;
  }
  body.is-gallery .gallery-photographers dl {
    gap: .55em !important;
    margin-top: .75em !important;
  }
  body.is-gallery .gallery-photographers dl div {
    grid-template-columns: 3.8em minmax(0, 1fr) !important;
    gap: .55em !important;
  }
}

/* Touch input never activates the project-card hover enlargement. */
@media (hover: none), (pointer: coarse) {
  body:not(.has-selected-project) .project-card:hover,
  body.has-selected-project .project-card:not(.is-active):hover,
  body.has-selected-project .project-card.is-active:hover {
    transform: none !important;
  }
}

/* Horizontal screens: the project selector becomes the original left-hand vertical strip. */
@media (min-aspect-ratio: 1001 / 1000) {
  .project-rail,
  body:not(.has-selected-project) .project-rail,
  body.has-selected-project .project-rail,
  body.has-project-stage .project-rail {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: var(--page-gutter) !important;
    z-index: 7;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: var(--rail-active-width) !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--rail-padding) 0 !important;
    gap: var(--rail-gap) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-y: contain;
  }
  .project-rail::before,
  .project-rail::after {
    content: none !important;
    display: none !important;
  }
  .project-rail .project-card {
    flex: 0 0 auto !important;
    width: var(--rail-thumbnail-width) !important;
    height: var(--rail-thumbnail-height) !important;
  }
  body.has-selected-project .project-card.is-active {
    width: var(--rail-active-width) !important;
    height: var(--rail-active-height) !important;
  }
}

/* Wide left strip: every image keeps its own source proportion and is never cropped into a square. */
@media (min-aspect-ratio: 1001 / 1000) {
  .project-rail .project-card,
  body.has-selected-project .project-rail .project-card,
  body.has-project-stage .project-rail .project-card {
    height: auto !important;
    aspect-ratio: auto !important;
    background: transparent !important;
  }
  .project-rail .project-card .project-frame,
  body.has-selected-project .project-rail .project-card .project-frame,
  body.has-project-stage .project-rail .project-card .project-frame {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    background-size: contain !important;
    background-color: #ffffff !important;
  }
}

/* Wide screens use the viewport height as the measuring system for the left-hand strip. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root {
    --page-gutter: 2vh;
    --rail-padding: 9vh;
    --rail-gap: 2vh;
    --rail-thumbnail-width: 9vh;
    --rail-active-width: 13vh;
  }
  body.has-selected-project .project-rail::before,
  body.has-selected-project .project-rail::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 calc(50vh - var(--rail-padding)) !important;
  }

  /* When a project opens from the home strip, establish the final vertical
     rail geometry before calculating its centred scroll position. */
  body.is-centring-project-strip .project-rail,
  body.is-centring-project-strip .project-card,
  body.is-centring-project-strip .project-rail::before,
  body.is-centring-project-strip .project-rail::after {
    transition: none !important;
  }
}

/* Wide screens: keep the project-progress index in the quiet space below the story.
   Phone screens deliberately retain the vertical index on the right. */
@media (min-aspect-ratio: 1001 / 1000) {
  .project-image-index {
    top: auto !important;
    right: auto !important;
    bottom: var(--page-gutter) !important;
    /* Share the WOUTER KELLENS / project-text guide instead of floating
       independently in the middle of the page. */
    left: var(--project-caption-left, var(--project-info-content-left, 50%)) !important;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: clamp(8px, 1.1vw, 14px);
    transform: translateX(-50%) !important;
  }

  .project-image-index span {
    width: clamp(12px, 1.05vw, 18px);
    height: 2px;
  }

  .project-image-index span.is-active {
    transform: scaleX(1.15);
  }
}

/* A horizontal window is still a horizontal composition when it is short.
   Use the caption guide for the marker rather than falling back to the
   portrait/phone position. */
@media (min-aspect-ratio: 1001 / 1000) and (min-width: 481px) and (max-height: 499px) {
  .project-image-index {
    top: auto !important;
    right: auto !important;
    bottom: var(--page-gutter) !important;
    left: var(--project-caption-left, 50%) !important;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: clamp(8px, 1.1vw, 14px);
    transform: none !important;
  }

  .project-image-index span {
    width: clamp(10px, 0.9vw, 15px);
    height: 2px;
  }

  .project-image-index span.is-active {
    transform: scaleX(1.25);
  }
}

/* Portrait information slide: use the header-name guide for the actual text,
   rather than the inset edge of its portrait frame. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-description {
    background: #ffffff !important;
    /* This frame supplies its own outer margin; avoid adding the inherited
       4vw reading-column inset a second time. */
    padding: 0 !important;
    justify-items: start !important;
  }

  .mobile-story-description-frame {
    /* Match the visible start of the centred WOUTER KELLENS heading exactly. */
    width: calc(100vw - var(--project-info-content-left) - var(--page-gutter)) !important;
    margin-left: var(--project-info-content-left) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: clamp(16px, 4vw, 30px) !important;
    background: #ffffff !important;
  }
}

/* Wide project view shows only the current central image. */
@media (min-aspect-ratio: 1001 / 1000) {
  .stage-previous { display: none !important; }
}

/* Horizontal orientation — one coherent left-rail composition. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root {
    --page-gutter: clamp(14px, 2vh, 30px);
    --rail-padding: clamp(64px, 9vh, 128px);
    --rail-gap: clamp(12px, 2vh, 26px);
    --rail-thumbnail-width: clamp(70px, 9vh, 132px);
    --rail-active-width: clamp(96px, 13vh, 188px);
    --interface-type-size: clamp(13px, 1.7vh, 18px);
    --wide-stage-height: min(62vh, 32vw);
  }

  /* The project selector is a true vertical rail on the left. */
  .project-rail,
  body:not(.has-selected-project) .project-rail,
  body.has-selected-project .project-rail,
  body.has-project-stage .project-rail {
    top: 0 !important;
    bottom: 0 !important;
    left: var(--page-gutter) !important;
    right: auto !important;
    width: var(--rail-active-width) !important;
    height: auto !important;
    padding: var(--rail-padding) 0 !important;
    gap: var(--rail-gap) !important;
    align-items: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    touch-action: pan-y !important;
  }
  .project-rail::-webkit-scrollbar { display: none; }

  /* Each rail image follows its actual proportion, including landscape frames. */
  .project-rail .project-card,
  body.has-selected-project .project-rail .project-card,
  body.has-project-stage .project-rail .project-card {
    flex: 0 0 auto !important;
    width: var(--rail-thumbnail-width) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    transform-origin: left center !important;
  }
  .project-rail .project-card .project-frame,
  body.has-selected-project .project-rail .project-card .project-frame,
  body.has-project-stage .project-rail .project-card .project-frame {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background-position: center !important;
    background-size: cover !important;
  }
  body.has-selected-project .project-rail .project-card.is-active {
    width: var(--rail-active-width) !important;
    height: auto !important;
  }
  body.has-project-stage .project-rail .project-card.is-active {
    transform: scale(1.055) !important;
    transform-origin: left center !important;
  }
  body.has-project-stage .project-rail .project-card.is-active:hover {
    transform: scale(1.075) !important;
  }

  /* Empty runway allows every project—including the first and last—to meet the screen centre. */
  body.has-selected-project .project-rail::before,
  body.has-selected-project .project-rail::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 calc(50vh - var(--rail-padding) - (var(--rail-active-width) / 2)) !important;
  }

  /* The main story stays centred in the screen; copy moves to the free right side. */
  .stage-previous { display: none !important; }
  .stage-active {
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    height: var(--wide-stage-height) !important;
    max-width: calc(100vw - var(--rail-active-width) - (5 * var(--page-gutter))) !important;
    transform: translate(-50%, -50%) !important;
    cursor: e-resize;
  }
  .stage-active[data-orientation="landscape"] {
    width: auto !important;
    height: var(--wide-stage-height) !important;
  }
  .project-stage-copy {
    top: 50% !important;
    left: auto !important;
    right: var(--page-gutter) !important;
    width: min(24vw, 330px) !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
  }
  .project-stage-copy .project-stage-title,
  .project-stage-copy .project-stage-description,
  .project-stage-copy .project-stage-details {
    text-align: left !important;
  }
  .project-image-index {
    top: 50% !important;
    right: var(--page-gutter) !important;
  }

  /* Before opening the first image, the project title alone holds the real screen centre. */
  body.has-selected-project:not(.has-project-stage) .selected-project {
    top: 50vh !important;
    left: 50vw !important;
  }
}


/* Wide project story: title → hero → description → remaining images. */
@media (min-aspect-ratio: 1001 / 1000) {
  body[data-wide-project-step="hero"] .project-stage-copy,
  body[data-wide-project-step="images"] .project-stage-copy {
    opacity: 0;
    pointer-events: none;
  }

  body[data-wide-project-step="description"] .stage-active {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body[data-wide-project-step="description"] .project-stage-copy {
    top: 50% !important;
    right: 50% !important;
    width: min(46vw, 620px) !important;
    transform: translate(50%, -50%) !important;
    cursor: e-resize;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-title {
    margin-bottom: 1.5em;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-description {
    margin-top: 0;
    font-size: clamp(15px, 1.7vh, 19px) !important;
    line-height: 1.28;
  }
}


@media (min-aspect-ratio: 1001 / 1000) {
  /* The title slide remains a full-screen interaction zone. */
  body.is-project-intro .selected-project { pointer-events: none; }
}


/* Wide rail rhythm: its visible project count is calculated from the screen height. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root {
    --wide-rail-visible-projects: 3.5;
    --wide-rail-thumb-height: calc(var(--rail-thumbnail-width) * 4 / 3);
    --wide-rail-gap: calc(
      (100svh - (2 * var(--rail-padding)) - (var(--wide-rail-visible-projects) * var(--wide-rail-thumb-height)))
      / (var(--wide-rail-visible-projects) - 1)
    );
    --rail-gap: max(2vh, var(--wide-rail-gap));
  }

  /* The selected version remains just as airy even though its active image is larger. */
  body.has-selected-project .project-rail {
    --wide-active-thumb-height: calc(var(--rail-active-width) * 4 / 3);
    --rail-gap: max(
      2vh,
      calc((100svh - (2 * var(--rail-padding)) - var(--wide-active-thumb-height) - (2.5 * var(--wide-rail-thumb-height))) / 2.5)
    );
  }
}


/* Wide central image: height is constrained by the usable vertical zone, not by width. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root {
    /* In landscape, vh is the short screen side: all visual spacing follows it. */
    --wide-header-bottom: calc(var(--page-gutter) + var(--interface-type-size));
    --wide-visual-margin: 4vh;
    --wide-visual-bottom: calc(var(--page-gutter) + var(--wide-visual-margin));
    --wide-stage-height: min(
      calc(100svh - var(--wide-header-bottom) - var(--wide-visual-bottom) - var(--wide-visual-margin)),
      48vw
    );
    --wide-stage-centre-y: calc((var(--wide-header-bottom) + var(--wide-visual-margin) + 100svh - var(--wide-visual-bottom)) / 2);
  }

  .stage-active {
    top: var(--wide-stage-centre-y) !important;
  }

  .project-stage-copy,
  .project-image-index {
    top: var(--wide-stage-centre-y) !important;
  }
}


/* Wide rail: portrait dimensions define every slot, so landscape previews never shift the project list. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root {
    --wide-rail-thumbnail-slot-height: calc(var(--rail-thumbnail-width) * 4 / 3);
    --wide-rail-active-slot-height: calc(var(--rail-active-width) * 4 / 3);
  }

  .project-rail .project-card,
  body.has-selected-project .project-rail .project-card,
  body.has-project-stage .project-rail .project-card {
    position: relative !important;
    height: var(--wide-rail-thumbnail-slot-height) !important;
  }

  body.has-selected-project .project-rail .project-card.is-active {
    height: var(--wide-rail-active-slot-height) !important;
  }

  .project-rail .project-card .project-frame,
  body.has-selected-project .project-rail .project-card .project-frame,
  body.has-project-stage .project-rail .project-card .project-frame {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: translateY(-50%) !important;
  }
}


/* Landscape refinements: all measures use the short screen edge (height). */
@media (min-aspect-ratio: 1001 / 1000) {
  /* Overview canvas uses one height-based rhythm throughout. */
  :root {
    --overview-row-gap: 4vh;
    --overview-image-gap: 2vh;
    --overview-label-gap: 0.8vh;
  }
  .gallery-world {
    gap: var(--overview-row-gap) !important;
    padding: calc(var(--wide-header-bottom) + 4vh) var(--page-gutter) var(--page-gutter) !important;
  }
  .gallery-row { gap: var(--overview-image-gap) !important; }
  .gallery-label { top: calc(100% + var(--overview-label-gap)) !important; }

  /* Wouter’s image and written slide use exactly the project-story frame. */
  .about-profile-image,
  body.is-about[data-about-step="1"] .about-panel {
    top: var(--wide-stage-centre-y) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(var(--wide-stage-height) * 1600 / 2133) !important;
    height: var(--wide-stage-height) !important;
    transform: translate(-50%, -50%) !important;
  }
  body.is-about[data-about-step="1"] .about-panel {
    padding: 4vh !important;
    font-size: clamp(15px, 1.7vh, 19px) !important;
    line-height: 1.28 !important;
  }

  /* Project-title slide: real centre, with the entire title as a forward control. */
  body.has-selected-project:not(.has-project-stage) .selected-project {
    top: 50vh !important;
    left: 50vw !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    pointer-events: auto !important;
    cursor: e-resize;
  }

  /* If the landscape rail overflows, the first project begins exactly below Overview. */
  body:not(.has-selected-project) .project-rail {
    padding-top: calc((2 * var(--page-gutter)) + var(--interface-type-size)) !important;
    padding-bottom: var(--page-gutter) !important;
  }
}


/* Landscape: shared centre line, precise typing cursor, and the complete title slide. */
@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .entry,
  body.has-selected-project:not(.has-project-stage) .selected-project {
    top: var(--wide-stage-centre-y) !important;
  }

  .welcome-message::after {
    vertical-align: baseline !important;
    transform: translateY(-0.05em);
  }

  body.has-selected-project:not(.has-project-stage) .selected-project {
    display: grid !important;
    gap: 1.7vh;
    width: min(42vw, 560px) !important;
    white-space: normal !important;
  }
  .selected-project-title {
    color: #111;
    font-size: var(--interface-type-size);
    line-height: 1;
  }
  .selected-project-details {
    color: rgb(17 17 17 / 45%);
    font-size: clamp(13px, 1.7vh, 18px);
    line-height: 1.28;
    white-space: pre-line;
  }

  /* Project information is a compact floating panel in the clear lower-left content area. */
  .project-info-button,
  .project-info-panel { display: none; }
  body.has-selected-project .project-info-button {
    position: fixed;
    bottom: var(--page-gutter);
    left: calc(var(--page-gutter) + var(--rail-active-width) + var(--page-gutter));
    z-index: 12;
    display: block;
    color: rgb(17 17 17 / 45%);
    font-size: var(--interface-type-size);
    text-transform: uppercase;
  }
  body.has-selected-project .project-info-button:hover { color: #111; }
  body.has-selected-project.has-project-info .project-info-button { display: none; }
  body.has-selected-project.has-project-info .project-info-panel {
    position: fixed;
    bottom: var(--page-gutter);
    left: calc(var(--page-gutter) + var(--rail-active-width) + var(--page-gutter));
    z-index: 13;
    display: grid;
    gap: 1.2vh;
    width: min(34vw, 460px);
    max-height: min(58vh, 620px);
    padding: 2.4vh;
    overflow: visible;
    color: rgb(17 17 17 / 62%);
    background: rgb(255 255 255 / 88%);
    font-size: clamp(13px, 1.6vh, 18px);
    line-height: 1.28;
  }
  .project-info-panel h2,
  .project-info-panel p { margin: 0; }
  .project-info-panel h2 { color: #111; font: inherit; text-transform: uppercase; }
  .project-info-close { display: inline-flex; gap: .35em; width: fit-content; color: #111; font: inherit; text-transform: uppercase; }
  .project-info-close span:first-child { color: rgb(17 17 17 / 45%); }
  .project-info-close:hover span:first-child { color: #111; }
  .project-info-details { white-space: pre-line; }
  .project-info-contributors,
  .project-info-shown { white-space: pre-line; }
  .project-info-more { margin: 0; }
  .project-info-more a { color: inherit; text-decoration: none; }
  .project-info-more a:hover { color: #111; }
}

/* Landscape polish: measured intro centre, clear title spacing, and delayed project info. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-project-intro .entry,
  body.is-project-intro .selected-project {
    pointer-events: auto !important;
    cursor: e-resize;
  }

  body.has-selected-project:not(.has-project-stage) .selected-project {
    gap: 3.4vh !important;
  }

  /* Project information belongs to the image sequence, never the title, hero, or description slides. */
  body.has-selected-project .project-info-button,
  body.has-selected-project.has-project-info .project-info-panel {
    display: none !important;
  }
  body.has-selected-project[data-wide-project-step="images"] .project-info-button {
    display: block !important;
  }
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-panel {
    display: grid !important;
  }

  /* The Overview credits sit in the lower-right corner in the landscape composition. */
  body.is-gallery .gallery-photographers,
  body.is-gallery.has-photo-credits .gallery-photographers {
    right: var(--page-gutter) !important;
    left: auto !important;
  }
}

/* Keep the mobile typing caret on the text baseline. */
@media (max-aspect-ratio: 1 / 1) {
  .welcome-message::after {
    vertical-align: baseline;
    transform: translateY(-0.05em);
  }
}
/* Landscape: project information belongs in the lower-right, with a clear double-line separation below the title. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.has-selected-project:not(.has-project-stage) .selected-project {
    gap: 4.8vh !important;
  }

  body.has-selected-project[data-wide-project-step="images"] .project-info-button,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-panel {
    right: var(--page-gutter) !important;
    left: auto !important;
  }
}
/* Landscape title-slide typography and a calmer opening rail margin. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.has-selected-project:not(.has-project-stage) .selected-project {
    gap: 0 !important;
  }
  body.has-selected-project:not(.has-project-stage) .selected-project-title {
    display: block;
    margin: 0 0 2.56em !important;
  }
  body.has-selected-project:not(.has-project-stage) .selected-project-details {
    display: block;
    margin: 0 !important;
  }

  body:not(.has-selected-project) .project-rail {
    padding-top: calc((2 * var(--page-gutter)) + var(--interface-type-size) + 2vh) !important;
  }
}
/* Landscape title slide: title and metadata always stack as separate lines. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-project-intro .selected-project {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: min(42vw, 560px) !important;
    white-space: normal !important;
  }
  body.is-project-intro .selected-project-title {
    display: block !important;
    margin: 0 0 2.56em !important;
  }
  body.is-project-intro .selected-project-details {
    display: block !important;
    margin: 0 !important;
    white-space: pre-line !important;
  }
}
/* Landscape title slide: centre the block, align every line inside it to the left. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-project-intro .selected-project {
    align-items: flex-start !important;
    text-align: left !important;
  }
  body.is-project-intro .selected-project-title,
  body.is-project-intro .selected-project-details {
    width: 100% !important;
    text-align: left !important;
  }
}
/* Landscape intro: the full left-aligned block is anchored to the project-frame centre. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-project-intro .selected-project {
    top: var(--wide-stage-centre-y) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50vw !important;
    transform: translate(-50%, -50%) !important;
  }
}
/* Landscape intro: centre the visible text block itself, not an oversized invisible column. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-project-intro .selected-project {
    width: fit-content !important;
    max-width: calc(100vw - var(--rail-active-width) - (4 * var(--page-gutter))) !important;
  }
  body.is-project-intro .selected-project-title,
  body.is-project-intro .selected-project-details {
    width: auto !important;
  }
}
/* Landscape Project info: title left, Exit / Project info right, with no overlap. */
@media (min-aspect-ratio: 1001 / 1000) {
  .project-info-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.4em;
    min-width: 0;
  }
  .project-info-header h2 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .project-info-header .project-info-close {
    flex: 0 0 auto;
  }

  /* The trigger is never visible through the open translucent panel. */
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-button {
    display: none !important;
  }
}
/* Overview credits and their button always share the lower-right page margin. */
body.is-gallery .photo-credits-button,
body.is-gallery .gallery-photographers,
body.is-gallery.has-photo-credits .gallery-photographers {
  right: var(--page-gutter) !important;
  left: auto !important;
}
/* Unified text-button feedback. */
body.is-gallery .site-header > .site-name:hover,
body.is-gallery .site-header > .projects-button:hover,
body.is-about .site-header > .gallery-button:hover,
body.is-about .site-header > .projects-button:hover,
body.has-selected-project .site-header > .gallery-button:hover,
body.has-selected-project .site-header > .site-name:hover {
  opacity: 1 !important;
  color: #111 !important;
}

/* Active controls swap focus: Exit black, title grey. */
body.is-gallery .gallery-button:hover > span:last-child,
body.is-gallery .gallery-button:focus-visible > span:last-child,
body.is-about .site-name:hover > .last-name,
body.is-about .site-name:focus-visible > .last-name,
body.has-selected-project .projects-button:hover > span:last-child,
body.has-selected-project .projects-button:focus-visible > span:last-child {
  color: rgb(17 17 17 / 45%) !important;
}
body.is-about .site-name:hover,
body.is-about .site-name:focus-visible {
  color: rgb(17 17 17 / 45%) !important;
}
body.is-about .site-name:hover .site-exit,
body.is-about .site-name:focus-visible .site-exit {
  color: #111 !important;
}

/* Wouter Kellens remains one bold name in its active state. */
body.is-about .site-name,
body.is-about .site-name .last-name {
  font-weight: 700 !important;
}
body.is-about .site-name .site-exit {
  font-weight: 400 !important;
}

body.is-gallery:not(.has-photo-credits) .photo-credits-button {
  color: rgb(17 17 17 / 45%) !important;
}
body.is-gallery:not(.has-photo-credits) .photo-credits-button:hover,
body.is-gallery:not(.has-photo-credits) .photo-credits-button:focus-visible {
  color: #111 !important;
}
.project-info-close:hover span:last-child,
.project-info-close:focus-visible span:last-child {
  color: rgb(17 17 17 / 45%) !important;
}
/* Finish the reverse story at the current project title before moving to another project. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-about .site-name:hover,
  body.is-about .site-name:focus-visible,
  body.is-about .site-name:hover .last-name,
  body.is-about .site-name:focus-visible .last-name {
    color: rgb(17 17 17 / 45%) !important;
  }

  body.is-gallery.has-reopened-photo-credits .gallery-photographers-heading {
    margin-bottom: 1.6em !important;
  }
  body.is-gallery.has-reopened-photo-credits .gallery-photographers-heading:hover,
  body.is-gallery.has-reopened-photo-credits .gallery-photographers-heading:focus-visible {
    color: rgb(17 17 17 / 45%) !important;
  }
  body.is-gallery.has-reopened-photo-credits .gallery-photographers-heading:hover .photography-exit,
  body.is-gallery.has-reopened-photo-credits .gallery-photographers-heading:focus-visible .photography-exit {
    color: #111 !important;
  }
}
/* Active Wouter Kellens: both name parts swap to grey while Exit becomes black. */
body.is-about .site-name:hover .first-name,
body.is-about .site-name:focus-visible .first-name,
body.is-about .site-name:hover .last-name,
body.is-about .site-name:focus-visible .last-name {
  color: rgb(17 17 17 / 45%) !important;
}

/* Landscape About rail: a real media sequence, prepared for future Wouter Kellens images. */
.about-rail { display: none; }

@media (min-aspect-ratio: 1001 / 1000) {
  body.is-about .about-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--page-gutter);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: var(--rail-active-width);
    margin: 0;
    padding: var(--rail-padding) 0;
    gap: var(--rail-gap);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.is-about .about-rail::-webkit-scrollbar { display: none; }

  body.is-about .about-rail-card {
    flex: 0 0 auto;
    position: relative;
    display: block;
    width: var(--rail-thumbnail-width);
    height: var(--wide-rail-thumbnail-slot-height);
    padding: 0;
    color: #111;
    background: transparent;
    text-align: left;
    transition: width 420ms cubic-bezier(.22, 1, .36, 1), height 420ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease;
  }

  body.is-about .about-rail-card.is-active {
    width: var(--rail-active-width);
    height: var(--wide-rail-active-slot-height);
  }

  body.is-about .about-rail-card:not(.is-active) { opacity: .5; }
  body.is-about .about-rail-card:hover { opacity: 1; }

  body.is-about .about-rail-frame,
  body.is-about .about-rail-copy {
    position: absolute;
    top: 50%;
    left: 0;
    display: grid;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    transform: translateY(-50%);
  }

  body.is-about .about-rail-frame { background: #fff; }
  body.is-about .about-rail-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  body.is-about .about-rail-copy {
    place-items: center start;
    padding: 0;
    font-size: var(--interface-type-size);
    line-height: 1;
    text-transform: uppercase;
  }

  body.is-about .project-rail { display: none !important; }
  body.is-about .about-next-label { display: none !important; }
}

/* Overview typography follows the same short-edge proportional system as its image atlas. */
:root {
  --overview-credit-type-size: clamp(10px, 1.18vmin, 16px);
  --overview-label-type-size: clamp(9px, 1vmin, 14px);
}

body.is-gallery .gallery-photographers,
body.is-gallery .gallery-photographers dt,
body.is-gallery .gallery-photographers dd,
body.is-gallery .gallery-photographers-heading,
body.is-gallery .photo-credits-button {
  font-size: var(--overview-credit-type-size) !important;
  line-height: 1.25;
}

body.is-gallery .gallery-label {
  font-size: var(--overview-label-type-size) !important;
  line-height: 1.1;
}




/* Wouter Kellens story: one reading frame, matching project descriptions. */
.about-panel,
.about-contact-panel {
  position: fixed;
  top: var(--wide-stage-centre-y, 50%);
  left: 50%;
  z-index: 6;
  display: none;
  width: calc(var(--wide-stage-height, min(45.33vw, 60svh)) * 1600 / 2133);
  height: var(--wide-stage-height, min(45.33vw, 60svh));
  margin: 0;
  padding: 4vh;
  overflow: hidden;
  background: #fff;
  transform: translate(-50%, -50%);
  color: rgb(17 17 17 / 45%);
  font-size: clamp(15px, 1.7vh, 19px);
  line-height: 1.28;
  text-align: left;
  cursor: e-resize;
}

body.is-about[data-about-step="0"] .about-panel,
body.is-about[data-about-step="2"] .about-contact-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

body.is-about[data-about-step="1"] .about-profile-image {
  display: block;
  top: var(--wide-stage-centre-y, 50%) !important;
  left: 50% !important;
  right: auto !important;
  width: calc(var(--wide-stage-height, min(45.33vw, 60svh)) * 1600 / 2133) !important;
  height: var(--wide-stage-height, min(45.33vw, 60svh)) !important;
  transform: translate(-50%, -50%) !important;
}

body.is-about[data-about-step="0"] .about-profile-image,
body.is-about[data-about-step="0"] .about-contact-panel,
body.is-about[data-about-step="1"] .about-panel,
body.is-about[data-about-step="1"] .about-contact-panel,
body.is-about[data-about-step="2"] .about-profile-image,
body.is-about[data-about-step="2"] .about-panel {
  display: none !important;
}

body.is-about .about-panel h2 {
  width: 100%;
  margin: 0 0 .85em;
  color: #111;
  font: inherit;
  font-weight: 400;
  line-height: inherit;
  text-transform: uppercase;
}
body.is-about .about-panel [data-wouter-bio],
body.is-about .about-contact-panel > * { width: 100%; }
body.is-about .about-panel p,
body.is-about .about-contact-panel a { margin: 0; color: inherit; }
body.is-about .about-panel p + p { margin-top: .85em; }
.about-contact-panel > a { color: #111 !important; }
.about-contact-socials {
  display: flex;
  flex-direction: column;
  gap: .35em;
  margin-top: .4em;
}

body.is-about .about-next-label { display: block; }
body.is-about .about-image-index span { background: rgb(17 17 17 / 28%) !important; }
body.is-about .about-image-index span.is-current { background: #111 !important; }
body.is-about .about-rail-frame[hidden],
body.is-about .about-rail-copy[hidden] { display: none !important; }

@media (max-aspect-ratio: 1 / 1) {
  .about-panel,
  .about-contact-panel {
    top: 50%;
    width: min(92vw, 45svh);
    height: min(122.67vw, 60svh);
    padding: clamp(16px, 4vw, 30px);
    font-size: 3.25vw;
    line-height: 1.25;
  }
  body.is-about[data-about-step="1"] .about-profile-image {
    top: 50% !important;
    width: min(92vw, 45svh) !important;
    height: min(122.67vw, 60svh) !important;
  }
}

/* Final typography: stable across screen sizes. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-about .about-panel,
  body.is-about .about-contact-panel {
    width: min(46vw, 620px);
    padding: 0;
  }
  body.is-about .about-panel *,
  body.is-about .about-contact-panel * {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

body:not(.has-selected-project) .entry .name,
body:not(.has-selected-project) .entry .welcome-message {
  font-size: clamp(15px, 1vw, 18px) !important;
}
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .entry .name,
  body:not(.has-selected-project) .entry .welcome-message {
    font-size: var(--type-reading) !important;
  }
}


/* Landing rail runway: both endpoint projects can travel to the viewport centre. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 max(0px, calc(50vw - ((8.625svh + 3vw) / 2))) !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 max(0px, calc(50svh - var(--rail-padding) - (var(--wide-rail-thumbnail-slot-height) / 2))) !important;
  }
}


/* Homepage only: give the work more presence without altering project-view sizing. */
@media (max-aspect-ratio: 1 / 1) {
  :root {
    --entry-project-width: calc((8.625svh + 3vw) * 2.20);
    --entry-project-height: calc((11.5svh + 4vw) * 2.20);
  }

  body:not(.has-selected-project) .project-rail {
    height: calc(var(--entry-project-height) + 4svh) !important;
  }

  body:not(.has-selected-project) .project-rail > .project-card {
    flex: 0 0 var(--entry-project-width) !important;
    width: var(--entry-project-width) !important;
    min-width: var(--entry-project-width) !important;
    max-width: var(--entry-project-width) !important;
    height: var(--entry-project-height) !important;
    min-height: var(--entry-project-height) !important;
    max-height: var(--entry-project-height) !important;
  }

  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    flex-basis: max(0px, calc(50vw - (var(--entry-project-width) / 2))) !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail .project-card {
    width: calc(var(--rail-thumbnail-width) * 2.20) !important;
    height: calc(var(--wide-rail-thumbnail-slot-height) * 2.20) !important;
  }

  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    flex-basis: max(0px, calc(50svh - var(--rail-padding) - ((var(--wide-rail-thumbnail-slot-height) * 2.20) / 2))) !important;
  }
}

/* Homepage-only enlargement: enlarge the actual visible frame, never crop it inside an old rail slot. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail > .project-card > .project-frame {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background-size: contain !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail {
    width: calc(var(--rail-thumbnail-width) * 2.20) !important;
    overflow-x: visible !important;
  }

  body:not(.has-selected-project) .project-rail .project-card .project-frame {
    background-size: contain !important;
  }
}

/* Keep the generous entry-page rhythm when the frames grow. */
@media (max-aspect-ratio: 1 / 1) {
  /* Overview is its own image atlas; do not leave the landing project strip
     layered over it on phones. */
  body.is-gallery .project-rail {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Every visible part of the Wouter story is a swipe surface. */
  body.is-about .about-profile-image,
  body.is-about .about-panel,
  body.is-about .about-contact-panel {
    touch-action: none;
  }

  /* One native, momentum-scrolling horizontal rail for every vertical screen. */
  .project-rail,
  body.has-selected-project .project-rail,
  body.has-project-stage .project-rail {
    touch-action: pan-x pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
    /* Keep the centred endpoint, but allow the small native elastic pull that
       makes reaching it feel soft rather than abruptly hard. */
    overscroll-behavior-x: contain;
    scroll-snap-type: none !important;
  }

  /* On iPad too, an overflowing landing rail begins at its true first item
     and can travel all the way to the final item. */
  body:not(.has-selected-project) .project-rail {
    justify-content: flex-start !important;
  }

  /* Landing runway is supplied as real measured padding in JavaScript. Remove
     all inherited pseudo-spacers so neither end can be clipped early. */
  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    content: none !important;
    display: none !important;
    flex: 0 0 0 !important;
  }

  /* The selected rail uses the same real padding runway. Removing these older
     pseudo-spacers prevents blank travel before the first project. */
  body.has-selected-project .project-rail::before,
  body.has-selected-project .project-rail::after {
    content: none !important;
    display: none !important;
    flex: 0 0 0 !important;
  }

  /* Once a vertical project story is open, its title belongs only in the
     header. The old selected-project title card must not remain as a layer. */
  body.has-project-stage .selected-project {
    display: none !important;
  }

  body:not(.has-selected-project) .project-rail {
    gap: clamp(16px, 5vw, 42px) !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail {
    gap: clamp(18px, 4vh, 56px) !important;
  }
}

/* Final entry scale: each image stays inside its own enlarged card, with a visible rhythm between cards. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail {
    gap: clamp(28px, 8vw, 72px) !important;
  }

  body:not(.has-selected-project) .project-rail > .project-card > .project-frame {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  body:not(.has-selected-project) .project-card:hover {
    transform: scale(1.025) !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail {
    gap: clamp(24px, 4.5vh, 64px) !important;
  }

  body:not(.has-selected-project) .project-card:hover {
    transform: scale(1.025) !important;
  }
}

/* Wide homepage: the visible image is the card itself—never a separate overlay. */
@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail {
    padding: calc((2 * var(--page-gutter)) + var(--interface-type-size) + 3vh) 0 var(--page-gutter) !important;
    gap: clamp(24px, 4.5vh, 64px) !important;
  }

  body:not(.has-selected-project) .project-rail .project-card {
    position: relative !important;
    flex: 0 0 calc(var(--wide-rail-thumbnail-slot-height) * 2.20) !important;
    width: calc(var(--rail-thumbnail-width) * 2.20) !important;
    height: calc(var(--wide-rail-thumbnail-slot-height) * 2.20) !important;
    min-height: calc(var(--wide-rail-thumbnail-slot-height) * 2.20) !important;
    max-height: calc(var(--wide-rail-thumbnail-slot-height) * 2.20) !important;
  }

  body:not(.has-selected-project) .project-rail .project-card .project-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    background-size: contain !important;
  }
}

/* Wide entry page: a generous horizontal project strip. Opening a project returns to the established left-hand vertical rail. */
@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail {
    top: auto !important;
    right: 0 !important;
    bottom: var(--page-gutter) !important;
    left: 0 !important;
    z-index: 7;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: calc((var(--wide-rail-thumbnail-slot-height) * 2.20) + 5vh) !important;
    margin: 0 !important;
    padding: 5vh 0 0 !important;
    gap: clamp(24px, 4.5vh, 64px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x pinch-zoom !important;
    scrollbar-width: none !important;
  }

  body:not(.has-selected-project) .project-rail::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 max(0px, calc(50vw - ((var(--rail-thumbnail-width) * 2.20) / 2))) !important;
  }

  body:not(.has-selected-project) .project-rail .project-card {
    flex: 0 0 calc(var(--rail-thumbnail-width) * 2.20) !important;
    width: calc(var(--rail-thumbnail-width) * 2.20) !important;
    height: calc(var(--wide-rail-thumbnail-slot-height) * 2.20) !important;
    min-height: 0 !important;
    max-height: none !important;
    transform-origin: center bottom !important;
  }

  body:not(.has-selected-project) .project-rail .project-card .project-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    background-size: contain !important;
  }
}


/* Desktop entry page: project title follows the pointer while choosing a project. */
.landing-project-cursor {
  position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none;
  color: #ffffff; font-size: var(--interface-type-size); font-weight: 400; line-height: 1;
  text-transform: uppercase; white-space: nowrap; mix-blend-mode: difference;
  text-shadow: none;
  opacity: 0; transform: translate(14px, 14px); transition: opacity 120ms ease;
}
.landing-project-cursor.is-visible { opacity: 1; }
.landing-project-cursor.is-light { color: #ffffff; }
@media (min-aspect-ratio: 1001 / 1000) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  body:not(.has-selected-project):not(.is-gallery):not(.is-about) .project-rail .project-card.has-title-cursor { cursor: none; }
}
@media (hover: none), (pointer: coarse) { .landing-project-cursor { display: none; } }


/* Project sequence: hero first, then one complete information slide. */
@media (min-aspect-ratio: 1001 / 1000) {
  body[data-wide-project-step="description"] .project-stage-copy {
    display: flex;
    flex-direction: column;
  }
  body[data-wide-project-step="description"] .project-stage-copy .project-stage-title {
    order: 1;
    margin: 0 0 1.25em;
  }
  body[data-wide-project-step="description"] .project-stage-copy .project-stage-details {
    display: block;
    order: 2;
    margin: 0;
    color: rgb(17 17 17 / 55%);
    white-space: pre-line;
  }
  body[data-wide-project-step="description"] .project-stage-copy .project-stage-description {
    order: 3;
    margin: 1.25em 0 0;
  }
  body[data-wide-project-step="description"] .project-description-button { display: none !important; }
}

@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-description-title,
  .mobile-story-description-details,
  .mobile-story-description-copy { margin: 0; }
  .mobile-story-description-title {
    color: #111111;
    font-size: var(--type-title) !important;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
  }
  .mobile-story-description-details {
    margin-top: 1.15em;
    color: rgb(17 17 17 / 55%);
    white-space: pre-line;
  }
  .mobile-story-description-copy {
    margin-top: 1.15em;
    color: rgb(17 17 17 / 55%);
  }
  body[data-phone-project-step="1"] .mobile-story-hero,
  body[data-phone-project-step="2"] .mobile-story-description {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
}


/* Portrait-format project information card. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.has-selected-project[data-wide-project-step="images"] .project-info-button {
    /* Keep the label visually small, but make its tap/click target generous. */
    z-index: 30;
    padding: clamp(12px, 1.8vh, 22px) clamp(16px, 2.2vh, 28px);
    margin: clamp(-22px, -1.8vh, -12px) clamp(-28px, -2.2vh, -16px);
    cursor: pointer;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-panel {
    position: fixed;
    top: var(--project-information-title-y, var(--wide-stage-centre-y, 50%)) !important;
    right: auto !important;
    bottom: auto !important;
    /* The content column shares the same left guide as the centred header name. */
    left: calc(
      var(--project-info-content-left, 50vw) - var(--info-padding) -
      (var(--info-label-column) * (var(--wide-stage-height) * 3 / 4)) -
      var(--info-column-gap)
    ) !important;
    z-index: 13;
    display: flex !important;
    flex-direction: column;
    width: calc(var(--wide-stage-height) * 1600 / 2133) !important;
    max-width: calc(100vw - (2 * var(--page-gutter))) !important;
    height: var(--wide-stage-height) !important;
    max-height: none !important;
    min-height: 0;
    box-sizing: border-box;
    gap: 0;
    margin: 0;
    padding: clamp(18px, 2.6vh, 38px);
    overflow: hidden;
    background: #f5f5f5;
    color: rgb(17 17 17 / 62%);
    font-size: clamp(13px, 1.6vh, 18px);
    line-height: 1.28;
    transform: translate(-50%, -50%) !important;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2em;
    min-width: 0;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-header h2 {
    min-width: 0;
    margin: 0;
    color: #111;
    font: inherit;
    text-transform: uppercase;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-close {
    flex: 0 0 auto;
    margin: 0;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-details,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-contributors,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-shown,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-description,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-more {
    align-self: end;
    margin: 0;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-details {
    margin-top: auto;
    white-space: pre-line;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-contributors:not(:empty),
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-shown:not(:empty),
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-description:not(:empty),
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-more:not(:empty) {
    margin-top: 1.1em;
  }
}


/* Project information becomes the dedicated portrait story slide. */
@media (min-aspect-ratio: 1001 / 1000) {
  /* The information slide replaces the separate floating panel in wide layouts. */
  body.has-selected-project .project-info-button,
  body.has-selected-project.has-project-info .project-info-panel {
    display: none !important;
  }

  body[data-wide-project-step="description"] .project-stage-copy {
    position: absolute;
    top: var(--wide-stage-centre-y, 50%) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    display: flex !important;
    flex-direction: column;
    width: calc(var(--wide-stage-height) * 1600 / 2133) !important;
    max-width: calc(100vw - (2 * var(--page-gutter))) !important;
    height: var(--wide-stage-height) !important;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(18px, 2.6vh, 38px);
    overflow: hidden;
    background: #f5f5f5;
    color: rgb(17 17 17 / 62%);
    font-size: var(--interface-type-size) !important;
    line-height: 1.28;
    text-align: left !important;
    transform: translate(-50%, -50%) !important;
    cursor: e-resize;
  }

  body[data-wide-project-step="description"] .project-stage-copy::before {
    content: "PROJECT INFORMATION";
    position: absolute;
    top: clamp(18px, 2.6vh, 38px);
    right: clamp(18px, 2.6vh, 38px);
    color: rgb(17 17 17 / 50%);
    font: inherit;
    text-transform: uppercase;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-title,
  body[data-wide-project-step="description"] .project-stage-copy .project-stage-description,
  body[data-wide-project-step="description"] .project-stage-copy .project-stage-details {
    width: 100%;
    font-size: inherit !important;
    line-height: inherit;
    text-align: left !important;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-title {
    order: 1;
    margin: 0;
    padding-right: 9em;
    color: #111;
    font-weight: 400;
    text-transform: uppercase;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-details {
    order: 2;
    margin: auto 0 0;
    color: rgb(17 17 17 / 62%);
    white-space: pre-line;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-description {
    order: 3;
    margin: 1.2em 0 0;
    color: rgb(17 17 17 / 62%);
  }
}


/* Two-column project information grid. */
@media (min-aspect-ratio: 1001 / 1000) {
  body[data-wide-project-step="description"] .project-stage-copy {
    display: flex !important;
    flex-direction: column;
  }

  body[data-wide-project-step="description"] .project-stage-information {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(16px, 2.25vh, 30px);
    min-height: 0;
    margin-top: clamp(20px, 3vh, 44px);
  }

  body[data-wide-project-step="description"] .project-information-row {
    display: grid;
    grid-template-columns: 27% minmax(0, 73%);
    column-gap: clamp(12px, 1.7vh, 24px);
    align-items: start;
  }

  body[data-wide-project-step="description"] .project-information-label,
  body[data-wide-project-step="description"] .project-information-value,
  body[data-wide-project-step="description"] .project-stage-description {
    margin: 0;
    font: inherit;
    line-height: inherit;
  }

  body[data-wide-project-step="description"] .project-information-label {
    grid-column: 1;
    color: rgb(17 17 17 / 48%);
    text-transform: lowercase;
  }

  body[data-wide-project-step="description"] .project-information-value,
  body[data-wide-project-step="description"] .project-stage-description {
    grid-column: 2;
    color: #111;
    white-space: pre-line;
  }

  body[data-wide-project-step="description"] .project-information-row--info {
    margin-bottom: clamp(4px, .6vh, 10px);
  }
}

/* Final wide information-slide composition: one portrait project frame. */
@media (min-aspect-ratio: 1001 / 1000) {
  body[data-wide-project-step="description"] .project-stage-copy {
    --info-padding: clamp(18px, 2.6vh, 38px);
    --info-label-column: 26%;
    --info-column-gap: clamp(12px, 1.7vh, 24px);
    width: calc(var(--wide-stage-height) * 3 / 4) !important;
    max-width: calc(100vw - (2 * var(--page-gutter))) !important;
    height: var(--wide-stage-height) !important;
    padding: var(--info-padding) !important;
    background: #ffffff !important;
    /* Align the project title and all value columns with the header name. */
    left: var(--project-info-panel-left, 50%) !important;
    transform: translateY(-50%) !important;
  }

  body[data-wide-project-step="description"] .project-stage-copy .project-stage-title {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    order: 0;
    width: calc(100% - var(--info-label-column) - var(--info-column-gap)) !important;
    margin: 0 0 0 calc(var(--info-label-column) + var(--info-column-gap)) !important;
    padding: 0 !important;
    transform: none !important;
    color: #111 !important;
    font: inherit !important;
    font-weight: 400;
    line-height: inherit;
    text-transform: uppercase;
  }

  body[data-wide-project-step="description"] .project-stage-copy::before {
    top: var(--info-padding);
    right: var(--info-padding);
  }

  body[data-wide-project-step="description"] .project-stage-information {
    justify-content: flex-end;
    gap: clamp(16px, 2.25vh, 30px);
    margin-top: 0 !important;
    padding-top: clamp(36px, 5vh, 64px);
  }

  body[data-wide-project-step="description"] .project-information-row {
    grid-template-columns: var(--info-label-column) minmax(0, 1fr);
    column-gap: var(--info-column-gap);
  }

  body[data-wide-project-step="description"] .project-information-row--info {
    align-items: start;
  }

  body[data-wide-project-step="description"] .project-information-row--info .project-stage-description,
  body[data-wide-project-step="description"] .project-information-value {
    margin: 0 !important;
    color: #111111 !important;
    text-transform: none !important;
  }
}

/* Typed forward/back cues for desktop project navigation. */
.project-direction-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  color: #ffffff;
  /* Keep this as literal typed characters, rather than an icon arrow. */
  font-family: "Courier New", Courier, monospace;
  font-size: var(--interface-type-size);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  /* Invert directly against the image beneath it, as the original cursor did. */
  mix-blend-mode: difference;
  text-shadow: none;
  opacity: 0;
  transform: translate(14px, 14px);
  transition: opacity 100ms ease;
}

.project-direction-cursor.is-visible { opacity: 1; }
.project-direction-cursor.is-light { color: #ffffff; }

.project-direction-cursor-shaft {
  /* Match the visual centre of the literal < and > characters. */
  display: inline-block;
  position: relative;
  transform: translateY(-0.02em);
}

.project-direction-cursor-head {
  display: inline-block;
}

@media (min-aspect-ratio: 1001 / 1000) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  body.has-project-stage .project-stage,
  body.has-project-stage .project-stage-copy,
  body.has-project-stage .project-stage .stage-active,
  body.has-project-stage .project-stage .stage-previous,
  body.is-project-intro .selected-project {
    cursor: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .project-direction-cursor { display: none; }
}

/* Wide landing page: retain its generous character, but make the project icons
   a little quieter than the project-view thumbnails. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root { --entry-project-scale: 1.75; }

  body:not(.has-selected-project) .project-rail {
    height: calc((var(--wide-rail-thumbnail-slot-height) * var(--entry-project-scale)) + 5vh) !important;
  }

  body:not(.has-selected-project) .project-rail::before,
  body:not(.has-selected-project) .project-rail::after {
    flex-basis: max(0px, calc(50vw - ((var(--rail-thumbnail-width) * var(--entry-project-scale)) / 2))) !important;
  }

  body:not(.has-selected-project) .project-rail .project-card {
    flex-basis: calc(var(--rail-thumbnail-width) * var(--entry-project-scale)) !important;
    width: calc(var(--rail-thumbnail-width) * var(--entry-project-scale)) !important;
    height: calc(var(--wide-rail-thumbnail-slot-height) * var(--entry-project-scale)) !important;
  }
}

/* The project-info button opens the same portrait information page over the
   current image. The translucent surface preserves the project photograph. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-panel {
    --info-padding: clamp(18px, 2.6vh, 38px);
    --info-label-column: 26%;
    --info-column-gap: clamp(12px, 1.7vh, 24px);
    position: fixed;
    top: var(--wide-stage-centre-y, 50%) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--project-info-panel-left, 50%) !important;
    z-index: 20;
    display: flex !important;
    flex-direction: column;
    width: calc(var(--wide-stage-height) * 3 / 4) !important;
    max-width: calc(100vw - (2 * var(--page-gutter))) !important;
    height: var(--wide-stage-height) !important;
    max-height: none !important;
    min-height: 0;
    margin: 0;
    padding: var(--info-padding) !important;
    overflow: auto;
    box-sizing: border-box;
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #111111;
    font-size: var(--interface-type-size) !important;
    line-height: 1.28;
    transform: translateY(-50%) !important;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-header {
    display: grid;
    grid-template-columns: var(--info-label-column) minmax(0, 1fr);
    column-gap: var(--info-column-gap);
    align-items: start;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-header h2 {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    padding-right: 9em;
    color: #111111;
    font: inherit;
    font-weight: 400;
    line-height: inherit;
    text-transform: uppercase;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-close {
    position: absolute;
    top: var(--info-padding);
    right: var(--info-padding);
    margin: 0;
    color: rgb(17 17 17 / 55%);
    font: inherit;
    text-transform: uppercase;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-close span:first-child {
    color: inherit;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-close:hover,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-close:hover span:first-child {
    color: #111111;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-information {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(16px, 2.25vh, 30px);
    min-height: 0;
    padding-top: clamp(36px, 5vh, 64px);
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-row {
    display: grid;
    grid-template-columns: var(--info-label-column) minmax(0, 1fr);
    column-gap: var(--info-column-gap);
    align-items: start;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-label,
  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-value {
    margin: 0;
    font: inherit;
    line-height: inherit;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-label {
    color: rgb(17 17 17 / 48%);
    text-transform: lowercase;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-value {
    color: #111111;
    white-space: pre-line;
    text-transform: none;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-row--info {
    margin-bottom: clamp(4px, .6vh, 10px);
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-more a {
    color: inherit;
    text-decoration: none;
  }

  body.has-selected-project[data-wide-project-step="images"].has-project-info .project-info-more a:hover {
    color: rgb(17 17 17 / 55%);
  }
}

/* The information slide begins at the visual centre of the selected project image.
   This keeps the project title on that horizontal guide, as in the supplied layout. */
@media (min-aspect-ratio: 1001 / 1000) {
  body[data-wide-project-step="description"] .project-stage-copy {
    top: var(--project-information-title-y, var(--wide-stage-centre-y, 50%)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body[data-wide-project-step="description"] .project-stage-copy::before {
    content: none !important;
  }

  body[data-wide-project-step="description"] .project-stage-information {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    padding-top: calc(clamp(28px, 4vh, 48px) + 1em) !important;
  }

}

/* Short landscape screens use the same complete, non-scrolling information
   frame as vertical screens; JavaScript moves its start upward only if needed. */
@media (min-aspect-ratio: 1001 / 1000) and (max-width: 1100px) {
  body[data-wide-project-step="description"] .project-stage-copy {
    max-height: none !important;
    overflow: visible !important;
  }
}

.mobile-story-description-annotation {
  margin: 1.15em 0 0;
  color: rgb(17 17 17 / 62%);
  white-space: pre-line;
}

/* Project captions use the image's own left edge. */
.project-image-caption {
  display: block !important;
}

/* Wide screens: fill the usable canvas.  The previous 48vw cap made images
   unnecessarily small on narrower desktop windows despite available height. */
@media (min-aspect-ratio: 1001 / 1000) {
  :root {
    --wide-stage-height: calc(
      100svh - var(--wide-header-bottom) - var(--wide-visual-bottom) - var(--wide-visual-margin)
    );
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  /* Centre the title itself—not the top edge of its information block. */
  body[data-wide-project-step="description"] .project-stage-copy {
    transform: translateY(-0.64em) !important;
  }
}

/* Final header state: active page underlined, brand normal, no EXIT labels. */
.site-header > .site-name,
.site-header > .site-name .first-name,
.site-header > .site-name .last-name {
  font-weight: 400 !important;
}

.site-header .gallery-exit,
.site-header .projects-exit,
.site-header .site-exit {
  display: none !important;
}

.site-header > button {
  font-weight: 400 !important;
  text-decoration: none !important;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

/* Header order: Overview left, active project title centre, Wouter Kellens right. */
.site-header > .gallery-button {
  grid-column: 1;
  justify-self: start;
}

.site-header > .projects-button {
  grid-column: 2;
  justify-self: center;
}

.site-header > .site-name {
  grid-column: 3;
  justify-self: end;
}

/* The header replaces the separate Project Info control. */
.project-info-button {
  display: none !important;
}

@media (min-aspect-ratio: 1001 / 1000) {
  /* Image notes read vertically beside the image's left edge on desktop. */
  .project-image-caption {
    width: auto !important;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: translateX(-1.8em) translateY(-100%) rotate(180deg);
  }
}

@media (max-aspect-ratio: 1 / 1) {
  .project-image-caption {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  /* The information label takes the former project-title position. */
  body[data-wide-project-step="description"] .project-stage-copy .project-stage-title {
    display: none !important;
  }

}

body.is-gallery .site-header > .gallery-button,
body.is-about .site-header > .site-name,
body.has-selected-project .site-header > .projects-button {
  font-weight: 400 !important;
  text-decoration: underline !important;
}

body.is-gallery .site-header > .gallery-button *,
body.is-about .site-header > .site-name *,
body.has-selected-project .site-header > .projects-button * {
  font-weight: inherit !important;
}

/* Final horizontal-screen position for the story-progress marker. */
@media (min-aspect-ratio: 1001 / 1000) {
  .project-image-index {
    top: auto !important;
    right: auto !important;
    bottom: var(--page-gutter) !important;
    left: var(--project-caption-left, 50%) !important;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    gap: clamp(8px, 1.1vw, 14px);
    transform: none !important;
  }

  .project-image-index span {
    width: clamp(10px, 0.9vw, 15px);
    height: 2px;
  }

  .project-image-index span.is-active {
    transform: scaleX(1.25);
  }
}
/* Restore link feedback in the About contact area without affecting touch layouts. */
body.is-about .about-contact-panel a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

@media (hover: hover) and (pointer: fine) {
  body.is-about .about-contact-panel a:hover {
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }
}

/* Keep About's contact links consistent with the Projects header control. */
body.is-about .about-contact-panel a {
  cursor: pointer;
}

/* Overview is active by black text only—never an underline. */
body.is-gallery .site-header > .gallery-button,
body.is-gallery .site-header > .gallery-button:hover,
body.is-gallery .site-header > .gallery-button:focus-visible {
  color: #111 !important;
  text-decoration: none !important;
}

/* Rotation is a layout reset, not a visual transition between two unrelated
   geometries. Resume normal motion only after the new alignment is in place. */
body.is-orientation-resetting *,
body.is-orientation-resetting *::before,
body.is-orientation-resetting *::after {
  transition: none !important;
  animation: none !important;
}

/* The contact slide shares the exact reading scale of the About text. */
body.is-about[data-about-step="2"] .about-contact-panel,
body.is-about[data-about-step="2"] .about-contact-panel a {
  font-size: var(--type-reading, 1vw) !important;
  line-height: 1.25 !important;
}

/* iPad landscape: hello, Instagram and LinkedIn share the written About
   panel's reading scale, rather than inheriting the smaller desktop fallback. */
@media (min-aspect-ratio: 1001 / 1000) and (hover: none) and (pointer: coarse) {
  body.is-about[data-about-step="2"] .about-contact-panel,
  body.is-about[data-about-step="2"] .about-contact-panel a {
    font-size: clamp(15px, 1.7vh, 19px) !important;
    line-height: 1.28 !important;
  }
}

/* Wouter Kellens marks the active About page with black text only. */
body.is-about .site-header > .site-name,
body.is-about .site-header > .site-name:hover,
body.is-about .site-header > .site-name:focus-visible,
body.is-about .site-header > .site-name .first-name,
body.is-about .site-header > .site-name .last-name {
  color: #111 !important;
  text-decoration: none !important;
}

/* The active project title is identified by black text, not an underline. */
body.has-selected-project .site-header > .projects-button,
body.has-selected-project .site-header > .projects-button:hover,
body.has-selected-project .site-header > .projects-button:focus-visible {
  color: #111 !important;
  text-decoration: none !important;
}

/* Projects is active immediately on its overview page, before an image is opened. */
body.is-project-overview .site-header > .projects-button,
body.is-project-overview .site-header > .projects-button:hover,
body.is-project-overview .site-header > .projects-button:focus-visible {
  color: #111 !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Temporarily keep Skills out of every project-information composition. */
.project-information-row--skills,
.mobile-story-information-row--skills {
  display: none !important;
}

/* About has one active header item.  Set the inactive Projects colour directly
   rather than relying on stacked opacity rules from the earlier header styles. */
body.is-about .site-header > .projects-button,
body.is-about .site-header > .projects-button > span:last-child {
  color: rgb(17 17 17 / 45%) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.is-about .site-header > .projects-button:hover,
  body.is-about .site-header > .projects-button:focus-visible,
body.is-about .site-header > .projects-button:hover > span:last-child,
  body.is-about .site-header > .projects-button:focus-visible > span:last-child {
    color: #111 !important;
  }
}

/* Overview atlas: frame proportions are intrinsic and never reflow with the
   viewport. Screen adaptation happens exclusively through its uniform JS
   transform, so a rotation cannot stretch imagery or its captions. */
body.is-gallery .gallery-world {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: grid !important;
  grid-template-rows: repeat(var(--gallery-row-count, 1), 160px) !important;
  gap: 48px !important;
  width: max-content !important;
  height: max-content !important;
  padding: 0 !important;
  transform-origin: top left !important;
}

body.is-gallery .gallery-row {
  height: 160px !important;
  gap: 18px !important;
}

body.is-gallery .gallery-item {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 160px !important;
}

/* On horizontal touch screens, wait until the landing strip has been placed
   before revealing it, rather than showing its temporary left scroll state. */
body.is-placing-landing-rail .project-rail {
  visibility: hidden !important;
}

/* Keep the laptop Overview composition, with just a slightly tighter row
   rhythm. Portrait keeps the more generous spacing for touch navigation. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.is-gallery .gallery-world {
    gap: 40px !important;
  }
}

/* Optional project websites read as quiet links and remain recognisable
   without an underline. */
.project-stage-description a,
.mobile-story-information-value a {
  color: rgb(17 17 17 / 45%) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

@media (hover: hover) and (pointer: fine) {
  .project-stage-description a:hover,
  .project-stage-description a:focus-visible,
  .mobile-story-information-value a:hover,
  .mobile-story-information-value a:focus-visible {
    color: #111 !important;
    text-decoration: none !important;
  }
}

/* Project information is reading space, not an image-navigation surface. */
@media (min-aspect-ratio: 1001 / 1000) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  body[data-wide-project-step="description"] .project-stage,
  body[data-wide-project-step="description"] .project-stage-copy,
  body[data-wide-project-step="description"] .project-stage-copy * {
    cursor: default !important;
  }

  body[data-wide-project-step="description"] .project-stage-copy a {
    cursor: pointer !important;
  }
}

/* Information labels use the right edge of their column. The label column is
   compensated when the gap becomes the page margin, so the value/explanation
   column retains its existing left-hand guide. */
@media (min-aspect-ratio: 1001 / 1000) {
  body[data-wide-project-step="description"] .project-stage-copy {
    --info-label-width: calc(
      var(--info-label-column) + var(--info-column-gap) - (2 * var(--page-gutter))
    );
  }

  body[data-wide-project-step="description"] .project-information-row {
    grid-template-columns: var(--info-label-width) minmax(0, 1fr) !important;
    column-gap: calc(2 * var(--page-gutter)) !important;
  }

  body[data-wide-project-step="description"] .project-information-label {
    justify-self: end;
    text-align: right;
  }
}

@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-description-frame {
    --mobile-info-original-gap: clamp(12px, 3vw, 20px);
    --mobile-info-label-width: calc(26% + var(--mobile-info-original-gap) - (2 * var(--page-gutter)));
  }

  .mobile-story-information-row {
    grid-template-columns: var(--mobile-info-label-width) minmax(0, 1fr) !important;
    column-gap: calc(2 * var(--page-gutter)) !important;
  }

.mobile-story-information-label {
    justify-self: end;
    text-align: right;
  }
}

/* Overview frames must never flex-shrink in width: their height and source
   aspect ratio define the width, especially after a portrait/landscape swap. */
.gallery-item {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Landing rail endpoints use real padding, so the first and last projects
   can reach centre without sacrificing the native touch-scroll runway. */
body:not(.has-selected-project) .project-rail {
  padding-left: var(--landing-runway-left, 0px) !important;
  padding-right: var(--landing-runway-right, 0px) !important;
  padding-top: var(--landing-runway-top, 0px) !important;
  padding-bottom: var(--landing-runway-bottom, 0px) !important;
}

body:not(.has-selected-project) .project-rail::before,
body:not(.has-selected-project) .project-rail::after {
  content: none !important;
  display: none !important;
  flex: 0 0 0 !important;
}

@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail {
    padding-top: calc(2svh + var(--landing-runway-top, 0px)) !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  body:not(.has-selected-project) .project-rail {
    padding-top: calc(5vh + var(--landing-runway-top, 0px)) !important;
  }
}

/* Open projects on horizontal touch screens retain native vertical momentum. */
@media (min-aspect-ratio: 1001 / 1000) {
  body.has-selected-project .project-rail {
    touch-action: pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}


/* On a phone, the three header anchors always share equal thirds of the top edge. */
@media (max-aspect-ratio: 1 / 1) {
  .site-header {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  }

  .site-header > .gallery-button,
  .site-header > .projects-button,
  .site-header > .site-name {
    position: relative !important;
    top: auto;
    right: auto;
    left: auto;
    min-width: 0;
    white-space: nowrap;
  }

  .site-header > .gallery-button {
    grid-column: 1;
    justify-self: start;
  }

  .site-header > .projects-button {
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
  }

  .site-header > .site-name {
    grid-column: 3;
    justify-self: end;
  }
}

/* Larger vertical screens have enough room for the project title to use the
   true viewport centre, independent of the two header labels at either side. */
@media (max-aspect-ratio: 1 / 1) and (min-width: 601px) {
  .site-header > .projects-button {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    grid-column: auto !important;
    justify-self: auto !important;
  }
}

/* This portfolio is composed for upright phones; pause it clearly when rotated. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) and (hover: none) {
  body:not(.is-gallery)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #ffffff;
  }

  body:not(.is-gallery)::after {
    content: "Please rotate your phone";
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 101;
    color: rgb(17 17 17 / 50%);
    font: 400 var(--type-interface, 14px) / 1 Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }
}

/* Phone information uses the desktop fields, but begins directly at the page margin. */
@media (max-aspect-ratio: 1 / 1) {
  .mobile-story-description {
    display: grid !important;
    place-items: center stretch !important;
    padding: calc(var(--page-gutter) * 3) var(--page-gutter) !important;
    background: #ffffff !important;
  }

  .mobile-story-description-frame {
    position: relative;
    /* Keep the information page in the same portrait-shaped guide as a
       project image.  A full-width text column becomes disproportionately
       broad on a portrait iPad. */
    width: min(92vw, 45svh) !important;
    height: min(122.67vw, 60svh) !important;
    max-height: calc(100svh - (6 * var(--page-gutter))) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    /* It occupies the portrait-image area, with its content beginning at the top. */
    align-content: start !important;
    overflow: visible;
    background: transparent !important;
  }

  .mobile-story-information-row {
    display: grid;
    grid-template-columns: 26% minmax(0, 1fr);
    column-gap: clamp(12px, 3vw, 20px);
    align-items: start;
  }

  .mobile-story-information-row + .mobile-story-information-row {
    margin-top: clamp(16px, 3.5vh, 28px);
  }

  .mobile-story-information-row--info {
    margin-bottom: clamp(4px, 1vh, 8px);
  }

  .mobile-story-information-label,
  .mobile-story-information-value {
    margin: 0 !important;
    font: inherit;
    line-height: inherit;
  }

  .mobile-story-information-label {
    color: rgb(17 17 17 / 48%);
    text-transform: lowercase;
  }

  .mobile-story-information-value {
    color: #111111;
    white-space: pre-line;
  }
}

/* Phone reading frame: retain the left-page guide while leaving a more
   comfortable, deliberately asymmetric margin at the right edge. */
@media (max-width: 430px) and (max-aspect-ratio: 1 / 1) {
  .mobile-story-description {
    padding-right: var(--page-gutter) !important;
  }

  .mobile-story-description-frame {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The JavaScript keeps the portrait frame matched to the hero image. Centre
     the two-column content inside that stable frame instead. */
  .mobile-story-information-row,
  .mobile-story-description-annotation {
    width: calc(100% - 5vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mobile-story-information-row {
    /* Labels take only the width they need; the established two-margin gap
       remains between the labels and the explanation column. */
    grid-template-columns: var(--mobile-info-label-fit, max-content) minmax(0, 1fr) !important;
  }

  .mobile-story-information-label {
    justify-self: end !important;
    text-align: right !important;
  }

  .mobile-story-information-value {
    justify-self: stretch !important;
    text-align: left !important;
    box-sizing: border-box;
    padding-right: 2vw !important;
  }
}

/* About uses the same directional cursor and left/right navigation as projects. */
@media (min-aspect-ratio: 1001 / 1000) and (min-height: 500px) and (hover: hover) and (pointer: fine) {
  body.is-about .about-profile-image,
  body.is-about .about-panel,
  body.is-about .about-contact-panel {
    cursor: none !important;
  }
}

/* Schools, companies and contact details remain quiet until hovered. */
body.is-about [data-wouter-bio] a,
body.is-gallery [data-wouter-bio] a,
body.is-about .about-contact-panel a {
  color: rgb(17 17 17 / 45%) !important;
  text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.is-about [data-wouter-bio] a:hover,
  body.is-gallery [data-wouter-bio] a:hover,
  body.is-about .about-contact-panel a:hover,
  body.is-about [data-wouter-bio] a:focus-visible,
  body.is-gallery [data-wouter-bio] a:focus-visible,
  body.is-about .about-contact-panel a:focus-visible {
    color: #111 !important;
    text-decoration: none !important;
  }
}

/* Portrait overview only: smaller landing heroes; open-project images keep their full size. */
@media (max-aspect-ratio: 1 / 1) {
  body:not(.has-selected-project) .project-rail {
    --entry-project-width: calc((8.625svh + 3vw) * 1.20);
    --entry-project-height: calc((11.5svh + 4vw) * 1.20);
  }

  /* Vertical screens: captions sit below their image and stay quietly sized on iPad. */
  .project-image-caption {
    font-size: clamp(10px, 2.8vw, 14px) !important;
    writing-mode: horizontal-tb;
    transform: none;
  }

  /* The project rail determines the available image height. Keep a newly
     opened image hidden until that rail has reached its final position, so it
     never appears at one size and then visibly settles into another. */
  body:not(.is-phone-image-layout-ready) .mobile-story-hero .mobile-story-image,
  body[data-phone-project-step="3"]:not(.is-phone-image-layout-ready) .stage-active {
    visibility: hidden;
  }

  /* The story hero and the active image are alternatives, never a cross-fade.
     This leaves a single image layer when entering the image sequence. */
  body[data-phone-project-step="3"] .mobile-project-story {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: none !important;
  }
}

@media (min-aspect-ratio: 1001 / 1000) {
  /* Horizontal screens: captions read vertically along the image's left edge. */
  .project-image-caption {
    writing-mode: vertical-rl;
  }
}

/* Final override: Skills is temporarily hidden in both information layouts. */
.project-information-row--skills,
.mobile-story-information-row--skills {
  display: none !important;
}