/* Editorial studio refresh — burgundy palette */

:root {
  color-scheme: dark;
  --bg: #221a1b;
  --bg-soft: #2b2223;
  --panel: #2b2223;
  --line: #453638;
  --deep: #de7272;
  --acid: #de7272;
  --peach: #ffca88;
  --lemon: #fff6a9;
  --mint: #b4e4d6;
  --ink: #f6ede4;
  --muted: #c4ada4;
  var(--peach): #ffca88;
  --sans: 'Nunito', sans-serif;
  --display: 'Nunito', sans-serif;
}

body {
  background:
    radial-gradient(circle at 8% -4%, rgba(222, 114, 114, .16), transparent 34%),
    radial-gradient(circle at 96% 8%, rgba(180, 228, 214, .12), transparent 30%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

::selection {
  background: var(--acid);
  color: var(--ink);
}

.shell {
  width: calc(100% - 96px);
  max-width: 1920px;
  margin: auto;
}

.topline {
  border-color: var(--line);
  color: #b98c86;
  letter-spacing: .12em;
}

.topline .live {
  color: var(--mint);
}

.topline .live:before {
  background: var(--acid);
  box-shadow: 0 0 12px rgba(222, 114, 114, .6);
}

header {
  margin: 18px auto 0;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(43, 34, 35, .82);
  border-color: var(--line);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

.brand {
  color: var(--ink);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.brand span {
  color: var(--acid);
}

nav a {
  color: #c9a39d;
  font-size: 12px;
}

nav a:hover,
footer a:hover {
  color: var(--mint);
}

.nav-cta {
  border: 1px solid #7c5651;
  border-radius: 999px;
  padding: 11px 18px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  transition: background .2s, color .2s, border-color .2s;
}

.nav-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.hero {
  min-height: 660px;
  gap: 56px;
  padding: 72px 0 82px;
}

.eyebrow,
.section-kicker {
  color: var(var(--peach));
  letter-spacing: .14em;
}

.hero h1 {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(78px, 10.2vw, 142px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.025em;
  margin: 26px 0 28px;
}

.hero h1 span {
  color: var(--acid);
  font-style: italic;
  font-weight: 400;
}

.hero-copy {
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.button {
  border-radius: 999px;
  background: var(--mint);
  color: #22302a;
  padding: 16px 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

.button:hover {
  background: var(--lemon);
  color: #22302a;
  transform: translateY(-2px);
}

.text-link {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
}

.arrow {
  color: var(--peach);
}

.hero-art {
  height: 500px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
}

.hero-art:before {
  background:
    linear-gradient(145deg, rgba(34, 26, 27, .12), rgba(20, 15, 16, .34) 42%, rgba(14, 10, 11, .8)),
    url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1200&q=85') center/cover;
  filter: saturate(.68) contrast(1.06);
}

.hero-art:after {
  inset: 0;
  border-radius: inherit;
  border-color: rgba(255, 255, 255, .16);
}

.art-label,
.art-index {
  top: 24px;
  color: rgba(255, 255, 255, .76);
}

.art-label { left: 24px; }
.art-index { right: 24px; }

.orb {
  background: radial-gradient(circle at 35% 30%, var(--peach), var(--lemon) 30%, var(--acid) 55%, #241a1c 78%);
  box-shadow: 0 0 100px rgba(222, 114, 114, .26), inset -24px -30px 60px #111a;
}

.art-bottom {
  bottom: 25px;
  left: 25px;
  right: 25px;
}

.art-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.03em;
}

.art-caption { color: rgba(255, 255, 255, .6); }
.art-caption b { color: var(var(--peach)); }

.ticker {
  border-color: var(--line);
  background: var(--bg-soft);
  color: #c9a39d;
  padding: 18px 0;
}

.ticker strong { color: var(--lemon); }

section {
  padding: 102px 0;
}

.section-head {
  margin-bottom: 46px;
}

.section-head h2 {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(44px, 5.2vw, 66px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 14px;
}

.section-note {
  color: #b98c86;
  font-size: 10px;
  letter-spacing: .06em;
}

.release-grid {
  gap: 22px;
}

.release-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1600px) {
  .release-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cover,
  .youtube-player,
  .secret-track .cover {
    aspect-ratio: 16 / 9;
  }
}

.release {
  padding: 10px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-soft);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.release:hover {
  transform: translateY(-4px);
  border-color: var(--acid);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .36);
}

.cover,
.youtube-player,
.secret-track .cover {
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: #1c0603;
}

.youtube-fallback span {
  width: 56px;
  height: 40px;
  border-radius: 50%;
  background: var(--acid);
}

.secret-track .cover {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 246, 169, .65), transparent 36%),
    radial-gradient(circle at 78% 82%, rgba(180, 228, 214, .45), transparent 40%),
    var(--acid);
}

.secret-track-art {
  color: #3d1e17;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -.02em;
}

.track-meta {
  padding: 16px 4px 2px;
}

.track-title {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.track-sub,
.track-year {
  color: #b98c86;
}

.secret-player {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #2d0805;
  padding: 11px 12px;
}

.secret-play {
  background: var(--mint);
  color: #22302a;
}

.secret-play:hover {
  background: var(--lemon);
  color: #22302a;
}

.secret-timeline {
  background: var(--line);
  accent-color: var(--acid);
}

.secret-timeline::-webkit-slider-thumb,
.secret-timeline::-moz-range-thumb {
  background: var(--acid);
}

.secret-time,
.secret-player-label {
  color: var(--peach);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.secret-player-label:hover {
  color: var(--lemon);
}

.about {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 58px 56px;
  overflow: hidden;
}

.about-copy .section-kicker {
  color: var(var(--peach));
}

.about-visual {
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .42);
}

.about-visual img {
  filter: grayscale(.35) sepia(.12) brightness(.72);
}

.about-copy h2 {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(48px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.about-copy h2 em {
  color: var(--lemon);
  font-weight: 400;
}

.about-copy p {
  color: #c9a39d;
  font-size: 14px;
  line-height: 1.9;
  max-width: 640px;
}

.stats {
  border-top-color: var(--line);
}

.stat strong span { color: var(--peach); }

.stat strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
}

.stat span {
  color: #b98c86;
}

.services {
  border-top: 0;
  gap: 16px;
  margin-top: 0;
}

.service,
.service + .service,
.service:nth-child(4),
.service:nth-child(n + 4) {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-soft);
  padding: 27px;
  transition: background .2s, border-color .2s;
}

.service:hover {
  border-color: var(--acid);
  background: #300a06;
}

.service-num {
  color: var(--peach);
  font-size: 10px;
}

.service h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 20px 0 9px;
}

.service p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.contact {
  background: var(--lemon);
  color: #2b2223;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 84px 0 88px;
}

.contact .section-kicker {
  color: #a5613f;
}

.contact h2 {
  color: #2b2223;
  font-family: var(--display);
  font-size: clamp(54px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .88;
}

.contact-copy {
  color: #7a6355;
  font-size: 14px;
  line-height: 1.8;
}

.contact .button {
  background: #2b2223;
  color: var(--lemon);
  box-shadow: none;
}

.contact .button:hover {
  background: var(--acid);
  color: #fff;
}

footer {
  border-top: 1px solid var(--line);
  color: #b98c86;
  padding: 24px 0;
}

footer .brand {
  color: var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

.toast {
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-art { height: min(64vw, 470px); }

  .about { padding: 42px 34px; }
  .about-grid { gap: 42px; }

  .services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }

  .topline { height: 32px; }
  .topline .right-note { display: none; }

  header {
    height: 68px;
    margin: 12px auto 0;
    padding: 0 16px;
    border-radius: 18px;
  }

  nav {
    top: 100px;
    border: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: rgba(37, 9, 2, .98);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .42);
  }

  .hero { padding: 56px 0 62px; }
  .hero h1 { font-size: clamp(76px, 19vw, 116px); }

  .hero-art {
    height: min(82vw, 430px);
    border-radius: 22px;
  }

  section { padding: 76px 0; }
  .section-head { gap: 16px; }
  .section-head h2 { font-size: clamp(42px, 11vw, 58px); }

  .release-grid { gap: 20px; }
  .release { border-radius: 16px; }

  .about {
    border-radius: 24px;
    padding: 30px 22px;
  }

  .about-copy h2 { font-size: clamp(46px, 12vw, 58px); }

  .services {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service,
  .service + .service,
  .service:nth-child(4),
  .service:nth-child(n + 4) {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
  }

  .contact {
    border-radius: 24px;
    padding: 64px 0 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .release,
  .secret-play,
  .button,
  .service {
    transition: none;
  }
}