@import url("../lkt/styles.css");

.video-hero { align-items: center; }
.video-hero h1 { font-size: clamp(3.25rem, 5.4vw, 5.5rem); }

.role-card {
  padding: clamp(1.7rem, 4vw, 2.8rem);
  border-radius: 24px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 30px 80px rgba(23, 35, 31, 0.2);
  transform: rotate(1deg);
}
.role-card .eyebrow { color: var(--lime); }
.role-card ul { margin: 0; padding-left: 1.2rem; line-height: 2; }
.role-card > p:last-child { margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.18); color: #bdc9c3; font-size: .82rem; line-height: 1.6; }

.portfolio { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 7rem 0; }
.piece { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: 4.5rem 0; border-bottom: 1px solid var(--line); }
.piece.reverse .player { order: 2; }
.player { overflow: hidden; border: 1px solid rgba(23,35,31,.2); border-radius: 20px; background: #07100d; box-shadow: 0 24px 70px rgba(23,35,31,.14); }
.player.landscape { aspect-ratio: 16 / 9; }
.player iframe, .player video { width: 100%; height: 100%; display: block; border: 0; object-fit: contain; }
.piece-number { margin-bottom: 2.4rem; color: var(--orange); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.piece h3 { margin-bottom: 1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.3vw, 3.2rem); font-weight: 500; line-height: 1; }
.piece-copy > p:not(.piece-number) { color: var(--muted); line-height: 1.7; }
.piece dl { margin: 1.6rem 0; }
.piece dl div { display: grid; grid-template-columns: 5rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.5; }
.piece dt { color: var(--green); font-weight: 800; }
.piece dd { margin: 0; color: var(--muted); }
.piece a { color: var(--green); font-size: .88rem; font-weight: 800; text-underline-offset: 4px; }

.process { padding: 7rem max(1rem, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 7vw, 7rem); background: var(--ink); color: var(--white); }
.process .eyebrow { color: var(--lime); }
.process h2 { margin-bottom: 0; }
.process-links { border-top: 1px solid rgba(255,255,255,.18); }
.process-links a { display: grid; gap: .35rem; padding: 1.35rem 0; border-bottom: 1px solid rgba(255,255,255,.18); text-decoration: none; }
.process-links strong { color: var(--lime); }
.process-links span { color: #bdc9c3; font-size: .84rem; line-height: 1.5; }

@media (max-width: 820px) {
  .role-card { transform: none; }
  .piece, .process { grid-template-columns: 1fr; }
  .piece.reverse .player { order: 0; }
}

@media (max-width: 560px) {
  .site-header nav a:not(:last-child) { display: none; }
  .portfolio, .process { padding-top: 5rem; padding-bottom: 5rem; }
  .piece { padding: 3.5rem 0; }
  .piece dl div { grid-template-columns: 1fr; gap: .2rem; }
}