/* ============================================================
   OFF//SET — Landing page
   ============================================================ */

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

.osl-nav-logo {
  font-size:      11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--white);
  opacity:        0.8;
  flex-shrink:    0;
}

.osl-nav-links {
  display:     flex;
  gap:         28px;
  margin-left: auto;
}

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

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

.osl-nav-cta {
  flex-shrink:    0;
  font-size:      10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding:        9px 20px;
  border:         0.5px solid rgba(255,255,255,0.3);
  color:          var(--white);
  transition:     border-color 0.2s;
}

.osl-nav-cta:hover { border-color: var(--white); }

/* ── Hero — full-screen centered ── */
.osl-hero {
  padding-top:     var(--nav-h);
  min-height:      100svh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding-left:    var(--gutter);
  padding-right:   var(--gutter);
  padding-bottom:  64px;
  border-bottom:   1px solid var(--border);
}

/* Arial Rounded MT Bold wordmark — system font, no color split */
.osl-hero-wordmark {
  font-family:    'Arial Rounded MT Bold', 'Arial Rounded MT', 'Nunito', 'Varela Round', Arial, sans-serif;
  font-weight:    bold;
  font-size:      clamp(64px, 16vw, 200px);
  line-height:    1;
  letter-spacing: -0.01em;
  color:          var(--white);
  margin-bottom:  0;
  user-select:    none;
}

.osl-hero-divider {
  width:        80px;
  height:       1px;
  background:   rgba(255,255,255,0.25);
  margin:       40px auto;
}

.osl-hero-sub {
  font-family:   var(--serif);
  font-size:     clamp(22px, 3.2vw, 38px);
  font-style:    italic;
  font-weight:   400;
  color:         var(--white);
  line-height:   1.25;
  margin-bottom: 28px;
  max-width:     700px;
}

.osl-hero-desc {
  font-size:     clamp(17px, 1.7vw, 20px);
  line-height:   1.85;
  color:         var(--mid);
  max-width:     560px;
  margin-bottom: 52px;
}


/* ── Artist index (hero) ── */
.osl-artist-index {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
  margin-bottom:  52px;
}

.osl-ai-link {
  font-family:    var(--serif);
  font-size:      clamp(36px, 6vw, 72px);
  font-style:     italic;
  font-weight:    700;
  color:          var(--white);
  opacity:        0.55;
  letter-spacing: -0.01em;
  line-height:    1.15;
  transition:     opacity 0.25s, letter-spacing 0.25s;
  position:       relative;
}

.osl-ai-link::after {
  content:        '→';
  font-style:     normal;
  font-size:      0.45em;
  font-weight:    400;
  opacity:        0;
  margin-left:    12px;
  vertical-align: middle;
  transition:     opacity 0.25s;
}

.osl-ai-link:hover {
  opacity:        1;
  letter-spacing: 0.005em;
}

.osl-ai-link:hover::after {
  opacity: 1;
}

.osl-hero-scroll {
  display:         inline-block;
  font-size:       10px;
  letter-spacing:  0.24em;
  text-transform:  uppercase;
  color:           var(--white);
  border:          0.5px solid rgba(255,255,255,0.35);
  padding:         13px 32px;
  transition:      border-color 0.2s, color 0.2s;
}

.osl-hero-scroll:hover {
  border-color: var(--white);
  color:        var(--white);
}

/* ── List section ── */
.osl-list-section {
  padding: 0 var(--gutter) 80px;
}

.osl-list-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  padding:         64px 0 24px;
  border-bottom:   0.5px solid var(--border);
}

.osl-list-label {
  font-size:      9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--dim);
}

.osl-list-count {
  font-size:      9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--dim);
}

/* ── Artist row ── */
.osl-artist-row {
  display:               grid;
  grid-template-columns: 48px 140px 1fr auto;
  align-items:           center;
  gap:                   40px;
  padding:               36px 0;
  border-bottom:         0.5px solid var(--border);
  transition:            background 0.25s;
}

.osl-artist-row:hover { background: rgba(255,255,255,0.025); }

.osl-ar-num {
  font-size:            12px;
  letter-spacing:       0.12em;
  color:                var(--dim);
  font-variant-numeric: tabular-nums;
}

.osl-ar-img {
  width:       140px;
  aspect-ratio: 3 / 4;
  overflow:    hidden;
}

.osl-ar-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}

.osl-artist-row:hover .osl-ar-img img { transform: scale(1.05); }

.osl-ar-info {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.osl-ar-name {
  font-family:  var(--serif);
  font-size:    clamp(32px, 4.5vw, 56px);
  font-weight:  700;
  line-height:  1.05;
}

.osl-ar-role {
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--dim);
}

.osl-ar-eps {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px 24px;
  margin-top: 4px;
}

.osl-ar-eps span {
  font-size:      12px;
  letter-spacing: 0.04em;
  color:          var(--mid);
}

.osl-ar-arrow {
  font-size:   22px;
  color:       var(--dim);
  transition:  color 0.2s, transform 0.25s;
  flex-shrink: 0;
}

.osl-artist-row:hover .osl-ar-arrow {
  color:     var(--white);
  transform: translateX(6px);
}

/* ── CTA band ── */
.osl-cta {
  border-top: 1px solid var(--border);
  padding:    96px var(--gutter);
}

.osl-cta-inner { max-width: 600px; }

.osl-cta-head {
  font-family:   var(--serif);
  font-size:     clamp(36px, 6vw, 64px);
  font-weight:   700;
  line-height:   1.1;
  margin-bottom: 40px;
}

.osl-cta-actions {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

.osl-btn-p,
.osl-btn-o {
  display:        inline-block;
  font-size:      10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding:        15px 32px;
  transition:     opacity 0.2s;
}

.osl-btn-p { background: var(--white); color: var(--black); }
.osl-btn-o { border: 0.5px solid rgba(255,255,255,0.35); color: var(--white); }
.osl-btn-p:hover, .osl-btn-o:hover { opacity: 0.8; }

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

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

.osl-footer-links {
  display:     flex;
  gap:         28px;
  margin-left: auto;
}

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

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

.osl-footer-copy {
  width:      100%;
  font-size:  11px;
  color:      var(--dim);
  opacity:    0.5;
  margin-top: -8px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .osl-nav          { padding: 0 var(--gutter-sm); gap: 16px; }
  .osl-nav-links    { display: none; }
  .osl-hero         { padding: var(--nav-h) var(--gutter-sm) 56px; }
  .osl-list-section { padding: 0 var(--gutter-sm) 64px; }

  .osl-artist-row {
    grid-template-columns: 28px 90px 1fr auto;
    gap:     16px;
    padding: 24px 0;
  }

  .osl-ar-img  { width: 90px; }
  .osl-ar-eps  { display: none; }

  .osl-cta    { padding: 64px var(--gutter-sm); }
  .osl-footer { padding: 32px var(--gutter-sm); }
  .osl-footer-links { gap: 16px; margin-left: 0; }
}