/* ── Project page ────────────────────────────────────── */

#project-view {
  position: relative;
  z-index: 2;
  background: color-mix(in lab, var(--color-bg) 10%, transparent);
}

#project-view[hidden] {
  display: none;
}

/* ── Hero zone (full viewport, transparent for shader) ─ */

.project-page__hero {
  position: relative;
  height: calc(0.65 * var(--hero-lock, 65lvh));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) var(--space-xl);
  overflow: hidden;
}

.project-page__hero-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
}

.project-page__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Info (bottom-left, no card box) ─────────────────── */

.project-page__info-card {
  position: relative;
  z-index: 1;
  align-self: center;
  margin-bottom: var(--space-lg);
  max-width: 891px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.project-page__info-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-page__info-title-group {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.project-page__info-title {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--color-blue);
  line-height: var(--leading-normal);
}

.project-page__info-role,
.project-footer__role {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-body-sm);
  color: var(--color-blue);
  opacity: 0.5;
}

/* ── Content zone ────────────────────────────────────── */

.project-page__content {
  background: transparent;
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) 0 calc(var(--space-2xl) * 2);
}

.project-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding: 0 var(--gutter);
}

/* ── Section: image + text (two-column) ──────────────── */

.project-page__section--img-text-left,
.project-page__section--img-text-right {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.project-page__section--img-text-right {
  grid-template-columns: 2fr 3fr;
}

.project-page__section--img-text-left {
  grid-template-columns: 3fr 2fr;
}

.project-page__section--img-text-left .project-page__section-image {
  order: -1;
}

.project-page__section-text p {
  font-family: var(--font-ui);
  font-size: var(--size-body-md);
  color: var(--color-blue-dim);
  line-height: var(--leading-normal);
}

.project-page__section-text p + p {
  margin-top: var(--space-sm);
}

.project-page__section-image {
  position: relative;
  overflow: hidden;
}

.project-page__section-image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-page__section.is-zoomable,
.project-page__section-image.is-zoomable {
  cursor: pointer;
}

/* Hover vignette — mirrors index work/personal images */
.project-page__section-image::after,
.project-page__image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.48) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.project-page__section-image:hover::after,
.project-page__section--image-only:hover .project-page__image-frame::after {
  opacity: 1;
}

/* ── Section: image only ─────────────────────────────── */

.project-page__section--image-only {
  position: relative;
}

.project-page__image-frame {
  position: relative;
  overflow: hidden;
}

.project-page__section--image-only img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-page__section--image-only figcaption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body-md);
  color: var(--color-blue);
  opacity: 1;
  padding-top: var(--space-sm);
  max-width: 860px;
  text-align: left;
}

/* ── Section: text only ──────────────────────────────── */

.project-page__section--text-only {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.project-page__section--text-only p {
  font-family: var(--font-display);
  font-size: var(--size-heading-lg);
  color: var(--color-blue);
  line-height: var(--leading-normal);
}

.project-page__section--text-only p + p {
  margin-top: var(--space-sm);
}

/* ── Section: image pair (legacy compat) ─────────────── */

.project-page__section--image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.project-page__section--image-pair figure {
  overflow: hidden;
}

.project-page__section--image-pair img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-page__section--image-pair figcaption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body-md);
  color: var(--color-blue);
  opacity: 1;
  padding-top: var(--space-sm);
}

/* ── Section: image trio (three across, no text) ─────── */

.project-page__section--image-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
}

.project-page__section--image-trio figure {
  overflow: hidden;
}

.project-page__section--image-trio img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Section: image pair + text (text under the left image) ── */

.project-page__section--pair-text {
  display: flex;
  flex-direction: column;
}

.project-page__pair-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.project-page__pair-imgs figure {
  position: relative;
  overflow: hidden;
}

.project-page__pair-imgs img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Paragraph sits below the first image, matching its column width */
.project-page__pair-textblock {
  width: calc(50% - var(--space-lg) / 2);
  padding-top: var(--space-sm);
}

.project-page__pair-textblock p {
  font-family: var(--font-ui);
  font-size: var(--size-body-md);
  color: var(--color-blue-dim);
  line-height: var(--leading-normal);
}

.project-page__pair-textblock p + p {
  margin-top: var(--space-sm);
}

/* ── Subpage footer ─────────────────────────────────── */

.project-footer {
  position: relative;
  z-index: 2;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 50lvh;
}

/* Rows divide the footer's height evenly (50lvh total) */
.project-footer > .project-footer__row {
  height: auto;
  flex: 1;
}

.project-footer__label {
  display: block;
  padding: 0 var(--gutter);
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-heading-md);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  color: var(--color-orange);
}

.project-footer__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--gutter);
  height: 131px;
  border-top: 0.5px solid var(--color-blue);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: none;
}

.project-footer__row:last-child {
  border-bottom: 0.5px solid var(--color-blue);
}

.project-footer__row-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}

.project-footer__row-bg img {
  width: 100%;
  height: 818%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.project-footer__row:hover .project-footer__row-bg {
  opacity: 0.3;
}

.project-footer__title-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.project-footer__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.3vw, 64px);
  color: var(--color-blue);
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color 0.3s var(--ease-out);
}

.project-footer__row:hover .project-footer__title {
  color: var(--color-white);
}

.project-footer__role {
  transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.project-footer__row:hover .project-footer__role {
  color: var(--color-white);
  opacity: 0.7;
}

.project-footer__arrow {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-blue);
  transition: color 0.3s var(--ease-out);
}

.project-footer__row:hover .project-footer__arrow {
  color: var(--color-white);
}

/* Coming Soon — non-clickable More Work row; no hover reveal, label for arrow */
.project-footer__row--soon {
  cursor: default;
}
.project-footer__row--soon:hover .project-footer__row-bg { opacity: 0; }
.project-footer__row--soon:hover .project-footer__title { color: var(--color-blue); }
.project-footer__row--soon:hover .project-footer__role {
  color: var(--color-blue);
  opacity: 0.5;
}

.project-footer__soon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-body-sm);
  letter-spacing: -0.01em;
  color: var(--color-blue);
  opacity: 0.6;
}

/* ── Header burger (project subpage) ────────────────── */

/* Pill base inherited from .btn-cta group; below = position + icon */
.nav__burger {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -27px 0 0 -27px;
  pointer-events: all;
  width: 54px;
  height: 54px;
  padding: 0;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    --btn-r 0.55s var(--ease-out),
    transform 0.25s var(--ease-spring),
    box-shadow var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    opacity 0.4s var(--ease-out),
    visibility 0.4s var(--ease-out);
}

.nav__burger[hidden] { display: none; }

/* Revealed after scrolling past the hero */
.nav__burger--visible {
  opacity: 1;
  visibility: visible;
}

.nav__burger-box {
  position: relative;
  display: block;
  width: 16px;
  height: 14px;
}

/* Menu has two distinct layouts (see also renderMenuRows in project-page.js):
   • Desktop — the burger sits centred in the header and FADES OUT on open; the
     pill row opens on the same header line, and a dedicated close (X)
     button is the right-most item in that row.
   • Mobile — the burger stays put top-right and MORPHS into the X toggle
     itself; the list cascades below it and there is no in-row close button.
   The rules below are the desktop defaults; the mobile media block overrides. */

/* Desktop: three vertical bars side by side */
.nav__burger-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.32s var(--ease-out), opacity 0.18s var(--ease-out);
}

.nav__burger-line:nth-child(1) { left: 0; }
.nav__burger-line:nth-child(2) { left: 7px; }
.nav__burger-line:nth-child(3) { left: 14px; }

/* Desktop open → burger fades out; the row's own close X takes over */
.nav__burger--open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Project menu (burger dropdown) ─────────────────── */

/* Transparent click-catcher — closes menu on outside click, no dimming */
.project-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
}

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

/* Desktop: pill row on the header line itself (the faded-out burger sat
   here). Centred in the nav band; rightmost item is the close X. */
.project-menu {
  position: fixed;
  top: calc(var(--nav-height) / 2);
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  z-index: 95;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  padding: var(--space-xs);
  border-radius: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

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

.project-menu--open {
  pointer-events: all;
}

/* Menu rows — outlined pill buttons, label only. No panel base. */
.project-menu__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 var(--space-md);
  border: 1px solid #fff;
  border-radius: 100px;
  background: transparent;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  /* fade in just behind the panel morph; delay only on opacity so hover stays snappy */
  transition:
    --btn-r 0.55s var(--ease-out),
    transform 0.25s var(--ease-spring),
    opacity 0.25s var(--ease-out) 0.12s;
}

.project-menu--open .project-menu__item {
  opacity: 1;
}

/* Desktop close — square (matches burger 54px), sits last = rightmost.
   Hidden on mobile, where the burger itself is the X (see mobile block). */
.project-menu__item--close {
  width: 54px;
  padding: 0;
  font: inherit;
}

/* Contact lives in the menu on mobile only */
.project-menu__item--contact {
  display: none;
}

.project-menu__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-body-md);
  letter-spacing: -0.01em;
  color: #fff;
}

/* Hover — slight scale (cursor-fill handles the rest) */
.project-menu__item:hover {
  transform: scale(1.04);
}

.project-menu__item:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .nav__burger,
  .nav__burger-line,
  .project-menu,
  .project-menu__item,
  .project-menu__backdrop {
    transition: none;
  }
}

/* ── Loading / error ─────────────────────────────────── */

.project-page__loading {
  height: 60lvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-page__error {
  font-family: var(--font-body);
  color: var(--color-blue);
  opacity: 0.5;
  text-align: center;
  padding: calc(var(--space-2xl) * 2) var(--gutter);
}

/* ── Responsive: mobile ─────────────────────────────── */

@media (max-width: 768px) {
  .project-page__hero {
    height: calc(0.75 * var(--hero-lock, 75lvh));
    padding: 0 var(--gutter) var(--space-lg);
  }

  .project-page__info-card { max-width: none; }

  /* img-text rows stack; image always first, then text */
  .project-page__section--img-text-left,
  .project-page__section--img-text-right {
    grid-template-columns: 1fr;
  }
  .project-page__section--img-text-left .project-page__section-image,
  .project-page__section--img-text-right .project-page__section-image {
    order: -1;
  }

  /* pair stays 2-up; trio drops to 2-up */
  .project-page__section--image-trio {
    grid-template-columns: 1fr 1fr;
  }

  .project-page__pair-textblock { width: 100%; }

  .project-page__content {
    padding: var(--space-xl) 0 var(--space-2xl);
  }
  .project-page__body {
    padding: 0 var(--gutter);
    gap: var(--space-2xl);
  }

  .project-footer__label { font-size: var(--size-heading-lg); }

  .project-footer__row { padding: 0 var(--gutter); }
  .project-footer__arrow {
    width: 24px;
    height: 24px;
  }

  /* In-flow flex item so it shares the nav's gutter padding (top + right)
     exactly like the Home / Contact pills. Circle = pill height (54px). */
  .nav__burger {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 0 0 auto;
    width: 54px;
    height: 54px;
  }

  /* Mobile: horizontal bars stacked (desktop is vertical) */
  .nav__burger-line {
    top: auto;
    left: 0;
    width: 100%;
    height: 2px;
  }
  .nav__burger-line:nth-child(1) { top: 0; }
  .nav__burger-line:nth-child(2) { top: 50%; left: 0; transform: translateY(-50%); }
  .nav__burger-line:nth-child(3) { top: auto; left: 0; bottom: 0; }

  /* Mobile keeps the burger visible — it IS the X toggle (desktop fades it) */
  .nav__burger--open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  /* Open → cross into an X from the horizontal bars; middle bar fades */
  .nav__burger--open .nav__burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav__burger--open .nav__burger-line:nth-child(2) {
    opacity: 0;
  }
  .nav__burger--open .nav__burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* No in-row close on mobile — the burger is the X */
  .project-menu__item--close {
    display: none;
  }

  /* Full-width vertical menu; Contact joins the list. Burger stays the X
     toggle in the nav, so the list cascades below it (no in-panel close). */
  .project-menu {
    /* Burger sits at gutter-top, 54px tall → start list below its bottom edge
       (was anchored to nav-height, which overlapped the X) */
    top: calc(var(--gutter) + 54px);
    width: calc(100vw - 2 * var(--gutter));
    padding: 0;
    transform: translate(-50%, var(--space-xs));
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
  }

  /* Items cascade in one-by-one (--i set per item, top-to-bottom) */
  .project-menu--open .project-menu__item {
    transition:
      --btn-r 0.55s var(--ease-out),
      transform 0.25s var(--ease-spring),
      opacity 0.3s var(--ease-out) calc(var(--i, 0) * 0.07s);
  }

  /* Contact is part of the list on mobile */
  .project-menu__item--contact {
    display: flex;
  }

  /* Contact moves into the menu, so hide the flying nav pill on subpages */
  body.is-project-view > .btn-cta { display: none; }

  /* Drop the nav__cta anchor on subpages so the burger hugs the right edge */
  body.is-project-view .nav__cta { display: none; }
}