.watch-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}

/* ---------- title ---------- */
.watch-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 .4rem;
}

/* ---------- byline: creators + tags, one line, distinct colors ---------- */
.byline{
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  font-size: .8rem; margin-bottom: 1rem;
}
.byline .creator{ color: var(--ember); font-weight: 600; }
.byline .tag{ color: var(--moss); }
.byline .sep{ color: var(--line); }

/* ---------- player ---------- */
.player-wrap{
  max-width: 460px; /* keeps portrait video from stretching absurdly wide on desktop */
  margin: 0 auto 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.player-wrap.is-landscape{ max-width: 100%; }

.player-error-banner{
  max-width: 460px;
  margin: -0.5rem auto 1rem;
  padding: .65rem .9rem;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: rgba(193, 85, 60, .12);
  color: var(--danger);
  font-size: .8rem;
  line-height: 1.5;
}
.video-js{ width: 100%; }
/* Video.js default skin tokens nudged toward the brand accent */
.video-js .vjs-big-play-button{
  background-color: rgba(16,22,26,.7);
  border-color: var(--ember);
}
.video-js .vjs-play-progress, .video-js .vjs-volume-level{ background-color: var(--ember); }

/* ---------- engagement row: views + heart, one line, stacked below player ---------- */
.engagement-row{
  display: flex; align-items: center; gap: 1.25rem;
  padding: .5rem 0 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .85rem; color: var(--muted);
}
.engagement-row .stat{ display: flex; align-items: center; gap: .4rem; }
.heart-btn{
  display: flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; cursor: pointer; color: var(--muted);
  font-family: var(--font-mono); font-size: .85rem;
  transition: border-color .15s, color .15s;
}
.heart-btn svg{ width: 15px; height: 15px; }
.heart-btn:hover{ border-color: var(--ember); color: var(--text); }
.heart-btn.is-active{ border-color: var(--ember); color: var(--ember); }
.heart-btn.is-active svg{ fill: var(--ember); }

/* ---------- description ---------- */
.description{
  font-size: .88rem; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  margin-bottom: 2rem; line-height: 1.6;
}
.description.is-empty{ display: none; }

/* ---------- suggested section ---------- */
.watch-wrap .section{ padding: 0; max-width: none; margin: 0; }
.watch-wrap .section h2{ margin-top: 0; }