/* Pitch pages: one page per role, e.g. /everyone-wants-tomorrow. The look is
   the approved E3 prototype (backstage/portfolio/pitch/e3-role-first.html). */

.pitch-body {
  --pitch-ink: #161616;
  --pitch-muted: #5C5C5C;
  --pitch-rule: #E4E4E4;
  --pitch-link: #1F3A5F;
  --pitch-link-hover: #0E1F36;
  --pitch-serif: "Libre Caslon Text", Georgia, serif;
  --pitch-sans: Manrope, system-ui, sans-serif;
  background: #FFFFFF;
  color: var(--pitch-ink);
  font-family: var(--pitch-sans);
  font-size: 16px;
  line-height: normal;
  /* The site sets antialiased smoothing, which renders text thinner and lighter on a Mac. */
  -webkit-font-smoothing: auto;
}
.pitch-body a { color: var(--pitch-link); }
.pitch-body a:hover { color: var(--pitch-link-hover); }

/* The column narrows on short screens so the hero, the note and the row of
   extras all sit above the fold; with no extras the hero gets that room. */
.pitch {
  --below-hero: 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: max(560px, min(1080px, calc((100vh - var(--below-hero)) * 16 / 9 + 32px)));
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.pitch--hero-only { --below-hero: 190px; }

.pitch-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; }
.pitch-title { margin: 0; font-family: var(--pitch-serif); font-size: 40px; font-weight: 400; line-height: 1.05; }
.pitch-project { margin-top: 4px; color: var(--pitch-muted); font-family: var(--pitch-serif); font-size: 17px; font-style: italic; }
.pitch-body .pitch-name { padding-bottom: 3px; color: var(--pitch-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.pitch-body .pitch-name:hover { color: var(--pitch-link); }

/* YouTube's own player under his still and play button (a copy of Safari's video control).
   The still ignores clicks, so they reach the player; it comes off once the video plays. */
.pitch-video { position: relative; overflow: hidden; border-radius: 4px; background: #000; }
.pitch-hero .pitch-video { border-radius: 6px; }
.pitch-still { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s; }
.pitch-still img { width: 100%; height: 100%; object-fit: cover; }
.pitch-video-started .pitch-still { opacity: 0; visibility: hidden; }
.pitch-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(40, 40, 40, .45);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
}
.pitch-play svg { width: 28px; height: 28px; margin-left: 4px; fill: #fff; }
.pitch-video:hover .pitch-play { background: rgba(40, 40, 40, .6); }

/* Preview only: a draft whose videos are still being picked. */
.pitch-waiting {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; padding: 24px;
  border: 1px dashed var(--pitch-rule); border-radius: 6px;
  color: var(--pitch-muted); font-size: 14px; text-align: center;
}
.pitch-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Above the hero: one line on what it shows, and its run time on the right. */
.pitch-intro { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 24px; }
.pitch-note { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.45; }
.pitch-hero-time { flex: none; color: var(--pitch-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.pitch-eyebrow { color: var(--pitch-muted); }
/* The strip: every clip with its full line. Four columns on a laptop, so fewer clips keep the same size;
   on a phone it scrolls sideways. The picked clip is outlined. */
.pitch-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pitch-clip { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pitch-clip-still { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #000; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.pitch-clip-still img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .15s; }
.pitch-clip:hover .pitch-clip-still img { opacity: .85; }
.pitch-clip[aria-pressed="true"] .pitch-clip-still { outline-color: var(--pitch-ink, currentColor); }
.pitch-clip:focus-visible .pitch-clip-still { outline-color: var(--pitch-link); }
.pitch-clip-time { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.pitch-clip-line { font-size: 13px; font-weight: 500; line-height: 1.35; }
.pitch-clip[aria-pressed="false"] .pitch-clip-line { color: var(--pitch-muted); }

.pitch-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--pitch-rule); font-size: 14px; }

/* Phones: the strip scrolls sideways, with a bit of the next clip showing so it is clear there is more. */
@media (max-width: 600px) {
  .pitch-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .pitch-strip::-webkit-scrollbar { display: none; }
  .pitch-clip { flex: 0 0 40%; scroll-snap-align: start; scroll-margin-left: 16px; }
}

@media (max-width: 480px) {
  .pitch-note { font-size: 16px; }
  .pitch-footer { justify-content: flex-start; }
}