/* Video transcript pages (Alder and Prevail): the video sits on the page, each
   scene's timestamp plays the video from that point, and the scene being played
   is highlighted. Loaded after each project's own stylesheet. */

.tx { --tx-ink: #17211f; --tx-muted: #5e6c68; --tx-line: #d9ded8; --tx-green: #1f6b57; --tx-green-dark: #104d40; --tx-wash: #ece8df;
  width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 40px 0 72px; color: var(--tx-ink); font-family: Inter, system-ui, sans-serif; }
.tx .return-link { display: inline-block; margin: 0 0 26px; color: var(--tx-ink); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tx-head { max-width: 760px; margin-bottom: 40px; }
.tx-head .eyebrow { margin: 0 0 14px; color: var(--tx-green); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tx-head h1 { margin: 0 0 18px; font-family: Lora, Georgia, serif; font-size: clamp(36px, 4.4vw, 54px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.tx-head p { margin: 0 0 8px; color: var(--tx-muted); font-size: 18px; line-height: 1.6; }
.tx-head .tx-origin { font-size: 15px; }

.tx-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.tx-player { position: sticky; top: 24px; }
.tx-player video { display: block; width: 100%; height: auto; border-radius: 8px; background: #0f1714; box-shadow: 0 14px 36px rgba(23, 33, 31, .16); }
.tx-player-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin: 12px 0 0; color: var(--tx-muted); font-size: 15px; }
.tx-player-meta a { color: var(--tx-green-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.tx-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tx-line); }
.tx-cue { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 22px 14px 22px 0; border-bottom: 1px solid var(--tx-line); scroll-margin-top: 110px; transition: background-color .2s ease; }
.tx-cue h2 { margin: 0 0 8px; font-family: Lora, Georgia, serif; font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.tx-cue p { max-width: 62ch; margin: 0; color: #31413d; font-size: 16px; line-height: 1.65; }
.tx-time { display: inline-flex; align-items: center; gap: 7px; align-self: start; min-height: 40px; padding: 0 12px; border: 2px solid var(--tx-green); border-radius: 6px; background: #fff; color: var(--tx-green-dark); font: 800 14px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.tx-time svg { width: 11px; height: 11px; flex: none; fill: currentColor; }
.tx-time:hover { background: var(--tx-green); color: #fff; }
.tx-time:focus-visible { outline: 3px solid var(--tx-green); outline-offset: 3px; }
.tx-cue.is-active { background: var(--tx-wash); box-shadow: inset 4px 0 0 var(--tx-green); padding-left: 14px; }
.tx-cue.is-active .tx-time { background: var(--tx-green); color: #fff; }
.tx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.tx-actions a { color: var(--tx-green-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .tx { width: calc(100% - 36px); padding-top: 28px; }
  .tx-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* On phones and tablets the player stays in view at the top while the transcript scrolls. */
  .tx-player { top: 0; z-index: 5; margin: 0 -18px; padding: 10px 18px 12px; background: #f7f4ee; box-shadow: 0 8px 18px -12px rgba(23, 33, 31, .35); }
  .tx-player video { border-radius: 6px; max-height: 42vh; object-fit: contain; }
  .tx-cue { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-right: 0; }
  .tx-time { justify-self: start; min-height: 44px; }
  .tx-cue h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .tx-cue { transition: none; } }
/* The duration and captions note: under the player on desktop, above it on phones so the
   pinned player stays compact. */
.tx-meta-mobile { display: none; }
@media (max-width: 900px) {
  .tx-meta-mobile { display: flex; margin: -18px 0 16px; }
  .tx-player .tx-player-meta { display: none; }
}
/* The Prevail header stays pinned on wide screens, so the pinned player sits below it. */
@media (min-width: 961px) { .variant-b .tx-player { top: 104px; } }

/* The already-underlined transcript links gain a small pointer cue. */
.tx .return-link:hover,
.tx-player-meta a:hover,
.tx-actions a:hover { color: var(--tx-green); text-decoration-thickness: 2px; }