/* ============================================================
   OFF//SET — Artist page
   ============================================================ */

/* ── Nav ── */
.os-nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          var(--nav-h);
  display:         grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:     center;
  padding:         0 var(--gutter);
  background:      rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(10px);
  border-bottom:   1px solid var(--border);
  z-index:         400;
}

.os-nav-logo {
  font-size:      11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--white);
  opacity:        0.8;
  justify-self:   start;
}

.os-nav-center {
  font-family:    'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, sans-serif;
  font-size:      13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--white);
  font-weight:    bold;
  justify-self:   center;
}

.os-slash { color: var(--white); }

.os-nav-links {
  display:      flex;
  gap:          24px;
  justify-self: end;
  align-items:  center;
}

.os-nav-links a {
  font-size:      11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--dim);
  transition:     color 0.2s;
}

.os-nav-links a:hover { color: var(--white); }

/* back link lives inside nav-links on desktop, hidden separately on mobile */
.os-nav-back {
  display: none; /* replaced by nav-links "All Artists" on desktop */
}

@media (max-width: 900px) {
  .os-nav-back {
    display:        block;
    font-size:      11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--dim);
    justify-self:   end;
    transition:     color 0.2s;
  }
  .os-nav-back:hover { color: var(--white); }
}

/* ── Artist page ── */
.os-artist-page {
  padding-top: var(--nav-h);
}

/* ── Hero ── */
.os-hero {
  padding:    80px var(--gutter) 56px;
  max-width:  820px;
}

.os-hero-eyebrow {
  font-size:      9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--dim);
  margin-bottom:  20px;
}

.os-hero-name {
  font-family:   var(--serif);
  font-size:     clamp(40px, 7vw, 72px);
  font-weight:   700;
  line-height:   1.05;
  margin-bottom: 24px;
}

.os-hero-bio {
  font-size:   15px;
  line-height: 1.75;
  color:       var(--mid);
  max-width:   560px;
}

/* ── Episodes row ── */
.os-episodes {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  padding:               0 0 80px;
}

.os-episode {
  display:        flex;
  flex-direction: column;
}

.os-ep-video-wrap {
  position:     relative;
  aspect-ratio: 9 / 16;
  background:   #0d0d0d;
  overflow:     hidden;
}

.os-ep-video-wrap video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.os-ep-info {
  padding: 20px 24px 28px;
}

.os-ep-num {
  font-size:      9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--dim);
  margin-bottom:  6px;
}

.os-ep-title {
  font-family: var(--serif);
  font-size:   22px;
  font-weight: 700;
  font-style:  italic;
  line-height: 1.2;
}

/* ── Footer ── */
.os-footer {
  border-top:      1px solid var(--border);
  padding:         40px var(--gutter);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             32px;
  flex-wrap:       wrap;
}

.os-footer-logo {
  font-size:      11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity:        0.5;
}

.os-footer-links {
  display: flex;
  gap:     32px;
}

.os-footer-links a {
  font-size:      11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--dim);
  transition:     color 0.2s;
}

.os-footer-links a:hover { color: var(--white); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .os-nav { padding: 0 var(--gutter-sm); }
  .os-nav-links { display: none; }
  .os-hero { padding: 56px var(--gutter-sm) 40px; }

  .os-episodes {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .os-ep-video-wrap { aspect-ratio: 9 / 16; }

  .os-footer { padding: 32px var(--gutter-sm); }
  .os-footer-links { gap: 20px; }
}