@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

:root {
  --edge: clamp(16px, 2.2vw, 36px);
  --ui-size: 12px;
  --scroll-distance: 0px;

  /* Project row: all media use one common height.
     V10 reduces the V9 78vh size by 5%: 74.1vh.
     The row is vertically centered in the live space between the
     top project text and the bottom image-name text. */
  --project-image-height: 74.1vh;
  --project-row-top: 0px;
  --project-row-bottom: 0px;
  --project-row-center-y: 50%;

  /* Same-chapter spacing is 1/3 tighter than V8. The mini-chapter extra
     is increased by the removed base gap, keeping the chapter-to-chapter
     distance visually identical to V8. */
  --project-gap: clamp(22.4px, 3.2vw, 58.4px);
  --project-mini-chapter-gap: clamp(134px, 16vw, 317px);

  /* Introductory description occupies a reserved left-hand zone. */
  --project-description-width: min(28vw, 420px);
  --project-description-reserve: min(40vw, 600px);
}

* { box-sizing: border-box; }

html { min-height: calc(100% + var(--scroll-distance)); }

body {
  margin: 0;
  min-height: calc(100vh + var(--scroll-distance));
  overflow-x: hidden;
  background: #fff;
  font-family: "Space Mono", monospace;
  font-size: var(--ui-size);
  line-height: 1.1;
}

button, a {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  outline: none;
}

a { text-decoration: none; }

button:focus,
a:focus {
  outline: none;
}

button:focus-visible,
a:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
}

/* STANDARD TYPE: black fill / white outline */
.brand,
.filter,
.separator,
.utility a,
.utility button,
.meta,
.meta *,
.image-counter,
.intro-introduction,
.about,
.about *,
.about-close {
  color: #000;
  -webkit-text-stroke: 0.65px #fff;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #fff,
     1px 0 #fff,
     0 -1px #fff,
     0 1px #fff;
}

/* ACTIVE FILTERS: exact inverse */
.filter.is-active {
  color: #fff;
  -webkit-text-stroke: 0.65px #000;
  text-shadow:
    -1px 0 #000,
     1px 0 #000,
     0 -1px #000,
     0 1px #000;
}

.stream {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #fff;
}

.item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w);
  max-width: 94vw;
  max-height: 92vh;
  transform: translate(-50%, -50%);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z);
  pointer-events: none;
}

.item.is-visible {
  opacity: 1;
  visibility: visible;
  /* A visible non-project image must still own its pixels.
     Otherwise pointer events fall through to an older project image
     underneath it, leaving a stale hand cursor / clickable link. */
  pointer-events: auto;
  cursor: default;
}

/* Homepage trailers are decorative, not native media controls.
   Let pointer/wheel events reach the figure instead of the video player. */
.stream .item video { pointer-events: none; }

.item img,
.item video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.item.is-fullframe {
  inset: 0;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  transform: none;
}

.item.is-fullframe img,
.item.is-fullframe video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* Top UI: name left, Contact / About right */
.topbar {
  position: fixed;
  inset: var(--edge) var(--edge) auto var(--edge);
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 24px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  pointer-events: none;
}

.brand {
  grid-column: 1;
  justify-self: start;
  font-size: clamp(14px, 1.15vw, 18px);
  letter-spacing: -0.03em;
  pointer-events: auto;
}

.utility {
  grid-column: 3;
  display: flex;
  justify-self: end;
  gap: 18px;
  pointer-events: auto;
}

/* Filters: vertically centered at the right edge, one single column */
.filters {
  position: fixed;
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  text-align: right;
  pointer-events: auto;
}

.filter-group {
  display: contents;
}

.separator {
  display: block;
  width: 34px;
  height: 1px;
  margin: 4px 0;
  font-size: 0;
  line-height: 0;
  background: #000;
  box-shadow:
    0 -1px #fff,
    0 1px #fff;
}

.filter {
  display: block;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* Selected filter marker: preserve the existing inverse styling. */
.filter.is-active::before {
  content: "+";
  margin-right: 0.5em;
}

/* Metadata stays bottom-left */
.meta {
  position: fixed;
  left: var(--edge);
  bottom: var(--edge);
  z-index: 1000;
  max-width: 55vw;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  pointer-events: none;
}

#metaSub {
  opacity: 1;
  margin-top: 3px;
}

.image-counter {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 1000;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  pointer-events: none;
  white-space: nowrap;
}

.about {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: calc(var(--edge) * 2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(255,255,255,.90);
}

.about.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-copy {
  width: min(900px, 86vw);
  font-size: clamp(20px, 2.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.about-copy p { margin: 0 0 .8em; }

.about-close {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
}

body.about-open .stream,
body.about-open .topbar,
body.about-open .meta,
body.about-open .filters,
body.about-open .image-counter {
  opacity: .14;
}

@media (max-width: 700px) {
  :root {
    --edge: 14px;
    --ui-size: 11px;
  }

  .item { max-width: 96vw; }
  .meta { max-width: 60vw; }

  .utility { gap: 12px; }
  .filters { gap: 5px; }

 .about-copy {
    width: 100%;
    font-size: clamp(18px, 6vw, 30px);
  }
}


/* =========================================================
   OPENING INTRODUCTION
   Full text on the initial white landing state.
   ========================================================= */

.intro-introduction {
  position: fixed;
  left: var(--edge);
  bottom: var(--edge);
  top: auto;
  z-index: 1600;
  width: min(900px, 76vw);
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.intro-introduction.is-visible {
  opacity: 1;
  visibility: visible;
}

.intro-introduction-text {
  white-space: pre-line;
  margin: 0;
  font-size: clamp(20px, 2.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

body.project-open .intro-introduction,
body.about-open .intro-introduction {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 700px) {
  .intro-introduction {
    width: calc(100vw - (var(--edge) * 2));
  }

  .intro-introduction-text {
    font-size: clamp(18px, 6vw, 30px);
    line-height: 1.1;
  }
}


/* =========================================================
   PROJECT OVERLAY
   ========================================================= */

.project-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: #fff;
}

.project-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.project-open {
  overflow: hidden;
}

.project-ui,
.project-image-name,
.project-similar,
.project-description-zone,
.project-description-panel,
.project-description-toggle {
  color: #000;
  -webkit-text-stroke: 0.65px #fff;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #fff,
     1px 0 #fff,
     0 -1px #fff,
     0 1px #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.project-ui-top {
  position: fixed;
  top: var(--edge);
  left: var(--edge);
  right: var(--edge);
  z-index: 5030;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.project-title-block {
  max-width: min(65vw, 900px);
}

.project-title {
  font-size: clamp(14px, 1.15vw, 18px);
  letter-spacing: -0.03em;
}

.project-chapter-title {
  margin-top: 4px;
  font-size: var(--ui-size);
  letter-spacing: -0.01em;
}

.project-chapter-title:empty {
  display: none;
}

.project-back {
  pointer-events: auto;
  color: #000;
  -webkit-text-stroke: 0.65px #fff;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #fff,
     1px 0 #fff,
     0 -1px #fff,
     0 1px #fff;
  text-transform: uppercase;
}

.project-track-shell {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--project-row-top);
  bottom: var(--project-row-bottom);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.project-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--project-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 38vw 0 var(--project-description-reserve);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

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

.project-image {
  --project-ratio: 1;
  flex: 0 0 auto;
  height: min(var(--project-image-height), calc(100vh - 120px));
  aspect-ratio: var(--project-ratio);
  margin: 0;
  display: grid;
  place-items: center;
  transform: none;
}

/* Filename mini chapters: project-a-01, project-b-01, etc.
   Every image keeps the same height; chapter changes are expressed only
   through a larger white interval in the horizontal strip. */
.project-image.is-mini-chapter-start {
  margin-left: var(--project-mini-chapter-gap);
}

/* Every project video is visually treated as its own mini-chapter:
   a larger interval on both sides isolates motion from adjacent stills. */
.project-image.is-motion {
  margin-left: var(--project-mini-chapter-gap);
  margin-right: var(--project-mini-chapter-gap);
}

.project-image img,
.project-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.project-image video {
  background: #000;
}

/* Silent looped trailer preview with the centered white play icon. */
.project-image video[hidden] { display: none; }
.project-image .project-video-trailer { pointer-events: none; }
.project-image.is-motion { position: relative; }
.project-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
  z-index: 1;
}
.project-video-play[hidden] { display: none; }
.project-video-play svg {
  display: block;
  width: clamp(100px, 14vw, 180px);
  height: clamp(100px, 14vw, 180px);
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.28));
  transition: transform 150ms ease;
}
.project-video-play:hover svg { transform: scale(1.08); }
.project-video-play:focus-visible { outline: 2px solid white; outline-offset: -6px; }

.project-image-name {
  position: fixed;
  left: var(--edge);
  bottom: var(--edge);
  z-index: 5030;
  max-width: 55vw;
  pointer-events: none;
}


.project-similar {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 5040;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  color: #000;
  -webkit-text-stroke: 0.65px #fff;
  paint-order: stroke fill;
  text-shadow:
    -1px 0 #fff,
     1px 0 #fff,
     0 -1px #fff,
     0 1px #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity 90ms linear;
}

.project-similar.is-available {
  visibility: visible;
}

.project-description-zone {
  position: fixed;
  left: var(--edge);
  top: var(--project-row-center-y);
  z-index: 5040;
  width: var(--project-description-width);
  max-width: calc(100vw - (2 * var(--edge)));
  transform: translateY(-50%);
  text-align: left;
  pointer-events: none;
  transition: opacity 90ms linear;
  will-change: opacity;
}

/* Description is an introductory field, not a click-to-open overlay anymore. */
.project-description-toggle {
  display: none !important;
}

.project-description-panel {
  position: static;
  width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  text-align: left;
  line-height: 1.28;
  text-transform: none;
}

.project-description-panel[hidden] {
  display: none;
}

.project-description-panel p {
  margin: 0 0 .75em;
}

.project-description-panel p:last-child {
  margin-bottom: 0;
}

.item.is-project-link.is-visible {
  pointer-events: auto;
  cursor: pointer;
}

@media (max-width: 700px) {
  :root {
    --project-gap: 16.8px;
    --project-mini-chapter-gap: clamp(83px, calc(18vw + 11px), 141px);
    --project-description-width: min(62vw, 34ch);
    --project-description-reserve: 72vw;
  }

  .project-track {
    padding-left: var(--project-description-reserve);
    padding-right: 24vw;
  }

  .project-image {
    height: min(var(--project-image-height), calc(100vh - 100px));
  }
}

/* Homepage navigation — compact and visually consistent with the counter. */
.homepage-step-nav {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 1000;
  display: flex;
  align-items: baseline;
  gap: 13px;
  white-space: nowrap;
}
.homepage-step-nav .image-counter {
  position: static;
  pointer-events: none;
}
.homepage-step-nav button {
  font: inherit;
  color: #000;
  -webkit-text-stroke: .65px #fff;
  paint-order: stroke fill;
  text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff;
  font-size: 16px;
  line-height: 1;
  min-width: 20px;
  min-height: 25px;
  text-align: center;
}
.homepage-step-nav button:disabled { opacity: .25; cursor: default; }
.homepage-step-nav button:not(:disabled):hover { opacity: .55; }
body.about-open .homepage-step-nav { opacity: .14; pointer-events: none; }
body:has(.project-overlay.is-open) .homepage-step-nav { visibility: hidden; }
@media (max-width: 700px) {
  .homepage-step-nav { gap: 9px; }
  .homepage-step-nav button { min-width: 28px; min-height: 32px; font-size: 18px; }
}