/* ============================================================
   PLATINUM — /platinum
   Page chrome follows the site (dark base, gold eyebrow,
   Cormorant title). The player, season list and reel data use
   Platinum's own look: near-black, a soft purple glow, platinum
   type, Montserrat + JetBrains Mono.
============================================================ */
.pl-page {
  --pl-bg:       #0b0a0f;
  --pl-ink:      #e5e4e2;
  --pl-ink-dim:  rgba(229, 228, 226, 0.55);
  --pl-ink-faint:rgba(229, 228, 226, 0.28);
  --pl-line:     rgba(229, 228, 226, 0.12);
  --pl-glow:     139, 92, 246;
  --pl-sans:     'Montserrat', system-ui, sans-serif;
  --pl-mono:     'JetBrains Mono', ui-monospace, monospace;

  padding-top: clamp(7rem, 14vw, 10rem);
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-32));
}

/* ------------------------------------------------------------
   PAGE HEADER
------------------------------------------------------------ */
.pl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: clamp(var(--space-12), 7vw, var(--space-20));
}

.pl-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.pl-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.pl-tagline {
  max-width: 40ch;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.pl-released {
  flex-shrink: 0;
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.pl-released__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------
   PLAYER
------------------------------------------------------------ */
.pl-stage {
  position: relative;
  margin-bottom: clamp(var(--space-16), 9vw, var(--space-24));
}

/* Soft purple glow behind the player; a little brighter while playing */
.pl-stage::before {
  content: '';
  position: absolute;
  inset: -6% 4% -2%;
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--pl-glow), 0.30), transparent 68%);
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 1.2s var(--ease-out);
}

.pl-stage.is-playing::before { opacity: 1; }

.pl-player {
  position: relative;
  background: var(--pl-bg);
  border: 1px solid rgba(var(--pl-glow), 0.18);
  border-radius: 12px;
  overflow: hidden;
  color: var(--pl-ink);
  font-family: var(--pl-sans);
}

.pl-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.pl-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- control bar ---- */
.pl-controls {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-8));
  border-top: 1px solid var(--pl-line);
}

.pl-play {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--pl-ink);
  border-radius: 50%;
}

.pl-play__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pl-play__track,
.pl-play__progress {
  fill: none;
  stroke-width: 1.5;
}

.pl-play__track    { stroke: var(--pl-ink-faint); }
.pl-play__progress {
  stroke: var(--pl-ink);
  stroke-linecap: round;
  stroke-dasharray: 138.23;   /* 2πr, r = 22 */
  stroke-dashoffset: 138.23;
}

.pl-play__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.pl-play__icon--pause,
.pl-player.is-playing .pl-play__icon--play { display: none; }
.pl-player.is-playing .pl-play__icon--pause { display: block; }

/* ---- segmented chapter timeline ---- */
.pl-timeline {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;              /* generous hit area around a slim bar */
  touch-action: none;
}

.pl-seg {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--pl-line);
  overflow: hidden;
  transition: height 0.2s var(--ease-out);
}

.pl-timeline:hover .pl-seg,
.pl-timeline:focus-visible .pl-seg { height: 5px; }

.pl-seg__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--pl-ink);
}

.pl-seg.is-current .pl-seg__fill { background: #fff; }

.pl-time {
  flex-shrink: 0;
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--pl-ink-dim);
}

/* ---- "Now" row ---- */
.pl-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 84px;
  padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-8)) var(--space-6);
  border-top: 1px solid var(--pl-line);
}

.pl-now__chapter {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: 1rem;
  font-weight: 500;
}

.pl-now__label {
  font-family: var(--pl-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--pl-glow), 0.95);
}

.pl-now__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  max-width: 60%;
  text-align: right;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.pl-now__stat.is-visible { opacity: 1; }

.pl-now__value {
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.pl-now__text {
  font-size: 0.875rem;
  color: var(--pl-ink-dim);
}

/* ---- focus states ---- */
.pl-play:focus-visible,
.pl-timeline:focus-visible,
.pl-ep--open:focus-visible {
  outline: 1px solid rgba(var(--pl-glow), 0.9);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   SEASON 1
------------------------------------------------------------ */
.pl-season {
  max-width: 880px;
  margin-bottom: clamp(var(--space-16), 9vw, var(--space-24));
  font-family: var(--pl-sans);
  color: var(--pl-ink);
}

.pl-season__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--pl-line);
}

.pl-season__title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pl-season__count {
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  color: var(--pl-ink-dim);
}

.pl-eps { list-style: none; }

.pl-ep {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--pl-line);
  text-align: left;
  color: inherit;
}

.pl-ep__num {
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  color: var(--pl-ink-dim);
}

.pl-ep__title { font-size: 1rem; font-weight: 500; }

.pl-ep__state {
  font-family: var(--pl-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--pl-glow), 0.95);
}

.pl-ep__time {
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--pl-ink-dim);
}

.pl-ep--open { transition: background-color 0.2s ease; }
.pl-ep--open:hover { background: rgba(var(--pl-glow), 0.07); }

.pl-ep--locked { color: var(--pl-ink-faint); }
.pl-ep--locked .pl-ep__title { font-weight: 400; }

.pl-ep__lock {
  grid-column: 4;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.pl-ep__lock svg { width: 14px; height: 14px; fill: currentColor; }

.pl-ep--more {
  display: block;            /* a plain line, not a 4-column row */
  min-height: 0;
  border-bottom: 0;
  padding: var(--space-5) var(--space-2) 0;
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  color: var(--pl-ink-dim);
}

/* ------------------------------------------------------------
   REEL DATA
------------------------------------------------------------ */
.pl-reel { max-width: 880px; }   /* same column as the season list */

.pl-reel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--pl-line);
  font-family: var(--pl-sans);
}

.pl-reel__grid dt {
  font-family: var(--pl-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pl-ink-dim);
  margin-bottom: var(--space-2);
}

.pl-reel__grid dd {
  font-size: 0.9375rem;
  color: var(--pl-ink);
}

/* ------------------------------------------------------------
   CREDITS
------------------------------------------------------------ */
.pl-credits {
  max-width: 880px;          /* same column as the season list */
  margin-top: clamp(var(--space-12), 7vw, var(--space-16));
  font-family: var(--pl-sans);
  color: var(--pl-ink);
}

.pl-credits__title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--pl-line);
}

.pl-credits__list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.pl-credits__role {
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--pl-ink-dim);
}

.pl-credits__name { font-size: 0.9375rem; }

.pl-credits__note {
  font-size: 0.9375rem;
  color: var(--pl-ink-dim);
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 768px) {
  .pl-head { flex-direction: column; align-items: flex-start; gap: var(--space-6); }

  .pl-now {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 116px;
  }
  .pl-now__stat { max-width: none; text-align: left; }

  .pl-reel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .pl-controls { gap: var(--space-3); padding-inline: var(--space-4); }
  .pl-time { font-size: 0.6875rem; }
  .pl-ep { grid-template-columns: 2.25rem 1fr auto; }
  .pl-ep__state { display: none; }
  .pl-ep__lock { grid-column: 3; }
}

/* No glow animation; the stat keeps its simple fade */
@media (prefers-reduced-motion: reduce) {
  .pl-stage::before { transition: none; }
  .pl-stage.is-playing::before { opacity: 0.6; }
  .pl-seg { transition: none; }
}

/* Role line under the title */
.pl-roles {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------
   STATUS, FOLLOW, PARTNERS
------------------------------------------------------------ */
.pl-released__sub {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pl-ep__state--soon {
  font-family: var(--pl-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-ink-dim);
}

.pl-credits__line {
  font-size: 0.9375rem;
  color: var(--pl-ink);
}

.pl-follow,
.pl-partner {
  max-width: 880px;
  margin-top: clamp(var(--space-12), 7vw, var(--space-16));
  font-family: var(--pl-sans);
  color: var(--pl-ink);
}
.pl-follow[hidden] { display: none; }

.pl-follow__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pl-partner__text {
  font-size: 0.9375rem;
  color: var(--pl-ink-dim);
  margin-bottom: var(--space-5);
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--pl-ink);
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pl-btn:hover {
  border-color: rgba(var(--pl-glow), 0.8);
  background: rgba(var(--pl-glow), 0.08);
}
.pl-btn:focus-visible {
  outline: 1px solid rgba(var(--pl-glow), 0.9);
  outline-offset: 4px;
}
.pl-play:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pl-btn,
  .pl-ep--open { transition: none; }
}

/* ------------------------------------------------------------
   CREDITS BLOCK
------------------------------------------------------------ */
.pl-credits__label {
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-ink-dim);
  margin-bottom: var(--space-5);
}
.pl-credits__person + .pl-credits__person { margin-top: var(--space-6); }
.pl-credits__person .pl-credits__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: var(--space-2);
}
.pl-credits__roles {
  font-size: 0.9375rem;
  color: var(--pl-ink-dim);
}