/* 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: Arial, Helvetica, 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;
  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;
}

.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: Arial, Helvetica, 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;
  background-size: cover !important;
}

/* 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: Arial, Helvetica, 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: Arial, Helvetica, 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: 1px;
  height: clamp(7px, 0.7vw, 12px);
  border-radius: 0;
  background: rgb(17 17 17 / 28%);
  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);
  }
}

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

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

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

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