/* =========================================================
   EDITORIAL PROJECTS V8 — fullscreen intro + stable chrome
   ========================================================= */

.projects-v8 {
  --projects-chrome-height: 76px;
}

/* Keep the fixed brand/navigation at a stable height on this page.
   This prevents the sticky project index from changing position
   when the navigation switches to its scrolled state. */
.projects-v8 nav,
.projects-v8 nav.scrolled {
  height: var(--projects-chrome-height);
  box-sizing: border-box;
  padding: 0 52px;
  display: flex;
  align-items: center;
}
.projects-v8 nav.scrolled {
  background: rgba(8,8,8,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(241,237,230,.08);
}

/* The opening screen is a true viewport chapter.
   Nothing from the first project is allowed to peek into it. */
.projects-v8 .projects-intro {
  min-height: 100svh;
  height: 100svh;
  box-sizing: border-box;
  padding: calc(var(--projects-chrome-height) + 72px) 7vw 78px;
}

/* Quiet, more central photographic "ghost". */
.projects-v8 .projects-intro::before {
  width: 34vw;
  height: 66%;
  right: 20vw;
  top: 17%;
  opacity: .062;
  filter: grayscale(.5) contrast(1.02) brightness(.92);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 18%,
    rgba(0,0,0,.72) 50%, rgba(0,0,0,.78) 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 70%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 18%,
    rgba(0,0,0,.72) 50%, rgba(0,0,0,.78) 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

/* Retain the circular gesture as a barely visible trace. */
.projects-v8 .projects-intro::after {
  width: 40vw;
  height: 40vw;
  right: -10vw;
  bottom: -19vw;
  border-color: rgba(241,237,230,.045);
}

/* Keep the chapter marker anchored to the stable nav. */
.projects-v8 .projects-intro-kicker {
  top: calc(var(--projects-chrome-height) + 52px);
}

/* The index is now always directly beneath the fixed navigation.
   Its top value never changes during scroll. */
.projects-v8 .projects-index {
  top: var(--projects-chrome-height);
  min-height: 50px;
  box-sizing: border-box;
}

/* Each project is a complete viewport chapter after its index bar.
   The next project cannot appear at the bottom of the screen. */
.projects-v8 .project-feature {
  height: calc(100svh - var(--projects-index-height, 50px));
  min-height: calc(100svh - var(--projects-index-height, 50px));
  max-height: calc(100svh - var(--projects-index-height, 50px));
  box-sizing: border-box;
  overflow: hidden;
}

/* Keep the main photograph comfortably inside its own grid area. */
.projects-v8 .project-feature-image {
  max-height: 66vh;
}

/* Slightly calmer project transition: the section itself remains
   the focus rather than the next section leaking into view. */
.projects-v8 .project-feature + .project-feature {
  border-top: 1px solid rgba(241,237,230,.035);
}

/* Intro text has a little more breathing room now that the hero is full height. */
.projects-v8 .projects-intro-copy {
  max-width: 455px;
}

/* Desktop: keep the long subtitles on one line without inflating type. */
.projects-v8 .project-feature-copy h2 em {
  white-space: nowrap;
}

/* Mobile/tablet: return to a natural document flow so content is never clipped. */
@media (max-width: 900px) {
  .projects-v8 {
    --projects-chrome-height: 64px;
  }

  .projects-v8 nav,
  .projects-v8 nav.scrolled {
    height: var(--projects-chrome-height);
    padding: 0 24px;
  }

  .projects-v8 .projects-intro {
    min-height: 100svh;
    height: 100svh;
    padding: calc(var(--projects-chrome-height) + 72px) 24px 70px;
  }

  .projects-v8 .projects-intro-kicker {
    top: calc(var(--projects-chrome-height) + 48px);
  }

  .projects-v8 .projects-intro::before {
    width: 54vw;
    right: 8vw;
    opacity: .055;
  }

  .projects-v8 .projects-index {
    top: var(--projects-chrome-height);
  }

  .projects-v8 .project-feature {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 70px 24px 50px;
  }

  .projects-v8 .project-feature-image {
    max-height: 560px;
  }
}

@media (max-width: 560px) {
  .projects-v8 .projects-intro {
    padding-top: calc(var(--projects-chrome-height) + 84px);
  }

  .projects-v8 .projects-intro::before {
    width: 68vw;
    right: -2vw;
    opacity: .045;
  }

  .projects-v8 .project-feature-copy h2 em {
    white-space: normal;
  }
}