/* Project pages – shared layout for all case studies (loaded after the main page styles) */
.p-hero { position: relative; overflow: hidden; isolation: isolate; padding: 150px var(--pad) clamp(48px, 7vw, 96px); }
.p-hero::before {
  content: ""; position: absolute; inset: -20% -10% 0; z-index: -1;
  background:
    radial-gradient(closest-side at 22% 40%, rgb(var(--c1) / .30), transparent),
    radial-gradient(closest-side at 70% 30%, rgb(var(--c2) / .26), transparent),
    radial-gradient(closest-side at 55% 90%, rgba(255, 228, 150, .30), transparent);
  animation: drift 22s ease-in-out infinite alternate;
}
.back { display: inline-block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--soft); margin-bottom: 38px; }
.back:hover { color: var(--ink); }
.p-cat { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--soft); margin: 0 0 18px; }
.p-cat b { color: var(--blue); font-weight: 500; }
.p-title { margin: 0; font-weight: 500; font-size: clamp(2.6rem, 8vw, 7rem); line-height: .98; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; }
.p-lead { margin: clamp(26px, 4vw, 44px) 0 0; max-width: 40ch; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4; }

.p-sec { padding: clamp(56px, 8vw, 110px) var(--pad); }
.p-grid { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 24px clamp(24px, 4vw, 64px); }
.p-sec + .p-sec { padding-top: 0; }

/* Facts as an invoice-style ruled table */
.facts { margin: 0; display: grid; grid-template-columns: minmax(120px, 200px) 1fr; padding-top: 5px;
  background: linear-gradient(var(--ink-blue), var(--ink-blue)) 0 0 / 100% 1.6px no-repeat, linear-gradient(var(--ink-blue), var(--ink-blue)) 0 4px / 100% .6px no-repeat; }
.facts dt, .facts dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.facts dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); padding-top: 17px; }
.facts dd { font-size: 1.05rem; }
.prose-p { max-width: 62ch; margin: 0 0 18px; font-size: 1.08rem; }

/* The five audio dramas */
.tours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); counter-reset: tour; }
.tour { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(180px, 280px); gap: 6px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair); counter-increment: tour; }
.tour::before { content: counter(tour, decimal-leading-zero); font-family: var(--deco); font-size: 14px; letter-spacing: .1em; color: var(--blue); }
.tour h3 { margin: 0; font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.1; text-transform: uppercase; letter-spacing: -0.005em; }
.tour p { margin: 4px 0 0; color: var(--soft); font-size: 14.5px; }
.mini { position: relative; height: 44px; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; }
.mini .play { position: static; }
.mini .wave { position: static; width: 100%; height: 28px; }
.mini .wave path { fill: none; stroke: var(--ink-blue); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; }
.mini .wave .played { opacity: 1; }
.mini .dur { font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; }
.tour.playing .play .i-play { display: none; }
.tour.playing .play .i-pause { display: block; }

/* Image placeholders until the photos are cleared */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.shot { margin: 0; grid-column: span 3; }
.shot.wide { grid-column: span 6; }
.shot.tall .ph { aspect-ratio: 4 / 5; }
.shot.third { grid-column: span 2; }
.ph { aspect-ratio: 3 / 2; background: linear-gradient(135deg, #eceef6, #f5f6fb); position: relative; display: grid; place-items: center; border-radius: 1px; }
.ph span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); text-align: center; padding: 0 16px; }
.shot figcaption { padding-top: 10px; font-size: 13px; color: var(--soft); display: flex; justify-content: space-between; gap: 12px; }
.shot figcaption b { font-weight: 500; color: var(--ink); }

.credits { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 40px; }
.credits div { padding-top: 12px; border-top: 1px solid var(--hair); }
.credits dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; }
.credits dd { margin: 0; font-size: 15.5px; }

.next { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; padding: 28px var(--pad) 0; }
.next a { text-decoration: none; font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.8rem); text-transform: uppercase; }
.next a:hover { color: var(--blue); }

@media (max-width: 760px) {
  .p-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .tour { grid-template-columns: 40px 1fr; }
  .tour .mini { grid-column: 1 / -1; }
  .shot, .shot.third { grid-column: span 6; }
}

/* Single featured clip (video or audio) */
.feature { margin: 0; max-width: 760px; opacity: 1; transform: none; padding: 0; }
.feature .media { aspect-ratio: 16 / 9; }
.feature figcaption { padding-top: 10px; font-size: 13px; color: var(--soft); }

/* Players without a file yet: shown, but quiet and not clickable */
.play.soon { opacity: .35; cursor: default; pointer-events: none; }

/* Real photos in the gallery */
.shot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #eef0f8; border-radius: 1px; }
.shot.tall img { aspect-ratio: 4 / 5; }
.shot.wide img { aspect-ratio: 2 / 1; }
.shot figcaption span:last-child { white-space: nowrap; }