/* ============================================================
   Individual project pages (e.g. /films/flour-soul/)
   Additive layer on top of styles.css.

   Sections:
     1. Page-level overrides (allow scrolling)
     2. Video hero
     3. Content (title, duration, about text)
     4. "More Projects" CTA
     5. Active-nav indicator
   ============================================================ */


/* -------------------------------------------------------
   1. Page-level overrides
   ------------------------------------------------------- */
/* Allow the document to scroll naturally on these pages — base
   styles.css locks html/body to 100vh/overflow:hidden for the
   homepage, so we override with overflow:visible here. Nested
   overflow:auto on both html and body confuses iOS Safari and
   can leave scroll completely stuck. */
html {
  height: auto;
  width: auto;
  overflow: visible;
}
body {
  height: auto;
  min-height: 100vh;
  width: auto;
  overflow-x: hidden;
  overflow-y: visible;
}
body.page-project { background: var(--bg); }


/* -------------------------------------------------------
   2. Video hero — full-bleed 2.4 : 1 vimeo embed
   ------------------------------------------------------- */
.project-page {
  position: relative;
  z-index: 5;
  padding-top: 92px;
}

.project-video {
  position: relative;
  width: 100%;
  background: #000;
}
.project-video-frame {
  position: relative;
  /* Default aspect padding = 2.4 : 1 (matches the films-grid cells).
     Per-page override: set inline `style="--video-aspect: 50%"` etc. */
  padding-top: var(--video-aspect, 41.67%);
}
.project-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* -------------------------------------------------------
   3. Content — title + duration + about
   ------------------------------------------------------- */
.project-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 4vw;
}

.project-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 64px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}

.project-duration {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.project-section {
  padding: 40px 0 56px;
}

.project-section-heading {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.project-description {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(236, 230, 217, 0.85);
  max-width: 60ch;
}
/* Spacing between consecutive paragraphs of about-text */
.project-description + .project-description {
  margin-top: 1em;
}


/* -------------------------------------------------------
   4. "More Projects" CTA
   ------------------------------------------------------- */
.project-cta {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 80px;
}

/* Ghost button — no border, just text + arrow with the same underline-grow
   animation as topnav links. */
.more-projects {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
  transition: color 0.3s ease;
}
/* Underline lives on the inner label span so it only spans the words,
   not the trailing arrow. */
.more-projects-label {
  position: relative;
  padding: 4px 0;
}
.more-projects-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.more-projects::after {
  content: '→';
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.more-projects:hover { color: #fff; }
.more-projects:hover .more-projects-label::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.more-projects:hover::after {
  transform: translateX(6px);
}


/* -------------------------------------------------------
   5. Active-nav indicator
   ------------------------------------------------------- */
.topnav a.is-current {
  color: #fff;
}
.topnav a.is-current::after {
  transform: scaleX(1);
  transform-origin: left center;
}


/* -------------------------------------------------------
   Responsive
   ------------------------------------------------------- */
@media (max-width: 760px) {
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 40px 0 22px;
  }
  .project-section {
    padding: 32px 0 40px;
  }
  .project-description {
    font-size: 14px;
  }
  .project-cta {
    padding: 8px 0 64px;
  }
}