/* V3.1 — quieter frames, clearer arches, and calmer opening typography. */

.v31 .hero h1 {
  font-size: clamp(54px, 6.8vw, 112px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 500;
}

.v31 .hero h1 em { font-weight: 500; }

/* The opening film should feel like footage, not an object in a novelty mask. */
.v31 .hero-media {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.v31 .hero-media::before,
.v31 .hero-media .frame-corners { display: none; }

/* Both featured projects now share one visual language. */
.v31 .project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 58px);
}

.v31 .project:nth-child(2) { margin-top: 0; }

.v31 .project-arch .project-media,
.v31 .project-ticket .project-media,
.v31 .project:nth-child(2) .project-media {
  min-height: 560px;
  border-radius: 48% 48% 2px 2px / 21% 21% 2px 2px;
  clip-path: none;
  box-shadow: inset 0 0 0 1px var(--ink);
}

.v31 .project-ticket::before { display: none; }

/* Timeline film 01: a clean, unmasked screen. */
.v31 .chapter-artist .shape-arch {
  width: min(42vw, 640px);
  height: min(64vh, 610px);
  border-radius: 0;
  clip-path: inset(100% 0 0 0);
  box-shadow: none;
}

.v31 .chapter-artist.is-entered .shape-arch {
  clip-path: inset(0);
}

/* The two-camera frame: matching arches with actual breathing room. */
.v31 .shape-split {
  width: min(49vw, 760px);
  height: min(61vh, 590px);
  gap: clamp(34px, 4.2vw, 68px);
}

.v31 .split-half {
  width: calc(50% - 17px);
  height: 88%;
  border-radius: 50% 50% 2px 2px / 20% 20% 2px 2px;
}

.v31 .split-left { transform: translate(-110px, 35px); }
.v31 .split-right { transform: translate(110px, -35px); }
.v31 .chapter-unique.is-entered .split-left,
.v31 .chapter-unique.is-entered .split-right {
  transform: translate(0, 0) rotate(0);
}

@media (min-width: 851px) {
  .v31 .chapter-unique .chapter-copy h3 {
    font-size: clamp(46px, 4.7vw, 78px);
  }
}

/* Timeline film 03: smaller and intentionally double-framed. */
.v31 .chapter-details .shape-blob {
  width: min(31vw, 470px);
  height: min(44vh, 410px);
  border: 10px solid rgba(248, 246, 239, .68);
  border-radius: 2px;
  clip-path: inset(14%);
  box-shadow:
    0 0 0 1px rgba(17, 17, 22, .72),
    18px 18px 0 rgba(177, 107, 194, .15),
    0 28px 60px rgba(58, 51, 76, .14);
  transform: translateY(55px) scale(.94);
}

.v31 .chapter-details .shape-blob::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 10px;
  border: 1px solid rgba(248, 246, 239, .62);
  pointer-events: none;
}

.v31 .chapter-details.is-entered .shape-blob {
  clip-path: inset(0);
  transform: translateY(0) scale(1);
}

@media (max-width: 850px) {
  .v31 .hero-media {
    border-radius: 0;
    box-shadow: none;
  }

  .v31 .project-grid { grid-template-columns: 1fr; }
  .v31 .project-arch .project-media,
  .v31 .project-ticket .project-media,
  .v31 .project:nth-child(2) .project-media {
    min-height: 58svh;
    border-radius: 46% 46% 2px 2px / 18% 18% 2px 2px;
  }

  .v31 .chapter-artist .shape-arch {
    width: 100%;
    height: 52svh;
  }

  .v31 .shape-split {
    width: 100%;
    height: 54svh;
    gap: 28px;
  }

  .v31 .split-half {
    width: calc(50% - 14px);
    height: 88%;
    border-radius: 50% 50% 2px 2px / 16% 16% 2px 2px;
  }

  .v31 .chapter-details .shape-blob {
    width: min(82vw, 420px);
    height: 42svh;
  }
}

@media (max-width: 520px) {
  .v31 .hero h1 {
    font-size: clamp(54px, 16vw, 72px);
    line-height: .96;
  }

  .v31 .shape-split {
    height: 48svh;
    gap: 26px;
  }

  .v31 .split-half { width: calc(50% - 13px); }
  .v31 .chapter-details .shape-blob { width: 84vw; height: 38svh; }
}

@media (prefers-reduced-motion: reduce) {
  .v31 .chapter-artist .shape-arch,
  .v31 .chapter-details .shape-blob { clip-path: none !important; }
}