/* PandaHub v2: page structures (home, creator, release, browse, studio ...). */

.eyebrow { display: inline-flex; align-items: center; width: fit-content; padding: 6px 12px; border-radius: 999px; font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--sep); }
.eyebrow--lime { background: var(--lime); color: var(--on-lime); box-shadow: none; }

/* ====================================================================== HOME: hero */
.home-hero { position: relative; overflow: hidden; padding-block: var(--s8) var(--s6); }
.home-hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -1; pointer-events: none;
  /* background: radial-gradient(60% 70% at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(40% 50% at 92% 10%, color-mix(in srgb, var(--lime) 18%, transparent), transparent 70%); */ }
.home-hero-inner { display: grid; gap: var(--s8); align-items: center; }
.home-hero-copy { display: grid; gap: var(--s5); justify-items: start; }
.home-hero-title { font: 800 clamp(44px, 9.5vw, 92px)/.94 var(--font-display); letter-spacing: -.055em; text-wrap: balance; }
.home-hero-title em { font-style: normal; color: var(--accent-text); }
.home-hero-lede { max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.home-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.home-hero-art { position: relative; height: 260px; }
.hero-tile { position: absolute; width: 54%; aspect-ratio: 1; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 10px rgb(0 0 0 / .28), 0 0 0 1px rgb(255 255 255 / .1); background: var(--surface-2); }
.hero-tile .art, .hero-tile .rel-ph { width: 100%; height: 100%; aspect-ratio: 1; }
.hero-tile--1 { left: 2%; bottom: 0; transform: rotate(-7deg); z-index: 1; }
.hero-tile--2 { left: 24%; top: 0; transform: rotate(3deg); z-index: 3; }
.hero-tile--3 { right: 0; bottom: 6%; transform: rotate(9deg); z-index: 2; }
@media (min-width: 820px) {
  .home-hero { padding-block: var(--s12) var(--s10); }
  .home-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s12); }
  .home-hero-art { height: 440px; }
  .hero-tile { width: 50%; }
}

/* ====================================================================== HOME: bento */
.bento { display: grid; gap: var(--s5); margin-top: var(--s4); }
.bento .spots { margin: 0; max-width: none; position: relative; border-radius: 28px; overflow: hidden; background: var(--artwork-bg); }
.bento .spot { min-height: 380px; aspect-ratio: 4 / 5; max-height: none; }
.bento-side { display: grid; align-content: start; gap: var(--s3); padding: var(--s5); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.bento-side h2 { font: 800 22px/1 var(--font-display); letter-spacing: -.04em; margin-bottom: var(--s2); }
.mini-rel { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); margin-inline: calc(var(--s2) * -1); border-radius: 18px; transition: background var(--t-fast); }
.mini-rel:hover { background: var(--fill); }
.mini-art { flex: none; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: var(--surface-2); }
.mini-art .art, .mini-art .rel-ph { width: 100%; height: 100%; aspect-ratio: 1; }
.mini-text { display: grid; min-width: 0; }
.mini-text small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mini-text strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s2); font-weight: 650; color: var(--accent-text); }
.bento-more .icon { width: 18px; height: 18px; font-size: 18px; }
@media (min-width: 900px) {
  .bento:has(.bento-side) { grid-template-columns: minmax(0, 1fr) 360px; }
  .bento .spot { aspect-ratio: 16 / 10; min-height: 440px; }
}

/* the featured slide copy lives on a dark artwork stage in every theme */
.bento .spot { color: #fff; }
.bento .spot-copy { padding: 0 var(--s6) var(--s6); }
.bento .spot-copy h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -.045em; }
.bento .spot-dots { right: var(--s5); bottom: var(--s5); }

/* ====================================================================== HOME: creators */
.rail--pcards { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x proximity; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: var(--s2); }
.rail--pcards::-webkit-scrollbar { display: none; }
.pcard { flex: 0 0 188px; width: 188px; scroll-snap-align: start; display: grid; gap: var(--s3); padding: var(--s3); border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); text-align: left; overflow: visible; }
.pcard-link { display: grid; gap: var(--s3); width: 100%; }
.pcard-art { display: block; }
.pcard-art .avatar { --size: 100% !important; width: 100%; height: auto; aspect-ratio: 1; border-radius: 22px; box-shadow: none; }
.pcard-art .avatar b { font-size: 56px; }
.pcard-text { display: grid; gap: 2px; align-items: start; padding-inline: 4px; }
.pcard-text strong { display: flex; align-items: center; gap: 4px; font: 700 17px/1.2 var(--font-display); letter-spacing: -.025em; }
.pcard-text .meta { font-size: 13px; }
.pcard-latest { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .btn { width: 100%; }
@media (min-width: 820px) { .pcard { flex-basis: 212px; width: 212px; } }

/* ====================================================================== HOME: release shelf, coming soon, ranked list */
@media (min-width: 900px) {
  .rel-row.rel-row--uniform.rel-row--shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s8) var(--s5); overflow: visible; padding-inline: 0; margin-inline: 0; }
  .rel-row--shelf > * { width: auto !important; }
  .rel-row--shelf .rel--date, .rel-row--shelf .rel--text { grid-column: span 2; }
}
.rel-row--uniform .rel-media, .rel-media { border-radius: 20px; box-shadow: 0 0 0 1px var(--sep); }
.rel-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 16px; }
.rel-kicker { font-weight: 700; letter-spacing: .08em; }

.soon-grid { display: grid; gap: var(--s3); }
.soon-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); padding-right: var(--s5); border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
.soon-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--text-3); }
.soon-date { flex: none; display: grid; place-content: center; justify-items: center; width: 68px; height: 68px; border-radius: 18px; background: var(--lime); color: var(--on-lime); }
.soon-date b { font: 800 28px/1 var(--font-display); letter-spacing: -.04em; }
.soon-date span { font: 700 11px/1 var(--font); text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }
.soon-art { flex: none; width: 68px; height: 68px; border-radius: 18px; overflow: hidden; background: var(--surface-2); }
.soon-art .art, .soon-art .rel-ph { width: 100%; height: 100%; aspect-ratio: 1; }
.soon-text { display: grid; min-width: 0; gap: 1px; }
.soon-text small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.soon-text strong { font: 700 17px/1.2 var(--font-display); letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 720px) { .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .soon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rank-list { display: grid; gap: 2px; }
.rank-row { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); border-radius: 20px; transition: background var(--t-fast); }
.rank-row:hover { background: var(--fill); }
.rank-n { flex: none; width: 40px; font: 800 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--text-3); text-align: center; }
.rank-row:nth-child(-n+3) .rank-n { color: var(--accent-text); }
.rank-art { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.rank-art .art, .rank-art .rel-ph { width: 100%; height: 100%; aspect-ratio: 1; }
.rank-text { display: grid; min-width: 0; flex: 1; }
.rank-text strong { font: 700 17px/1.2 var(--font-display); letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row > .icon { color: var(--text-3); }
@media (min-width: 820px) { .rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); } }

.rel-row--uniform .rel.rel--landscape, .rel-row--uniform .rel.rel--portrait, .rel-row--uniform .rel.rel--product, .rel-row--uniform .rel.rel--square { --rel-ar: 1 / 1; }

/* mixed-type rails: uniform square tiles that scroll sideways */
.rel-row.rel-row--uniform { display: flex; gap: var(--s4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); }
.rel-row--uniform::-webkit-scrollbar { display: none; }
.rel-row--uniform > * { width: 172px !important; flex: none; scroll-snap-align: start; }
.rel-row--uniform .rel--date, .rel-row--uniform .rel--text { width: 260px !important; }
@media (min-width: 820px) { .rel-row--uniform > * { width: 200px !important; } .rel-row.rel-row--uniform { gap: var(--s5); } }
@media (min-width: 900px) { .rel-row.rel-row--uniform.rel-row--shelf > * { width: auto !important; } }

/* ====================================================================== CREATOR PAGE */
.cp-banner { position: relative; height: 280px; overflow: hidden; background: linear-gradient(135deg, var(--artwork-primary), var(--artwork-bg)); border-radius: 0 0 32px 32px; }
.cp-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cp-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .42), transparent 38%, rgb(0 0 0 / .18)); }
.cp-banner--blur img { filter: blur(36px) saturate(1.5); transform: scale(1.35); }
.cp-id { position: relative; display: grid; gap: var(--s4); margin-top: -72px; }
.cp-avatar { width: 128px; height: 128px; border-radius: 34px; overflow: hidden; box-shadow: 0 0 0 6px var(--bg), 0 18px 40px rgb(0 0 0 / .28); background: var(--surface-2); }
.cp-avatar .avatar { --size: 100% !important; width: 100%; height: 100%; border-radius: 0; }
.cp-avatar .avatar b { font-size: 56px; }
.cp-id-main { display: grid; gap: var(--s2); min-width: 0; }
.cp-roles { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 700 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.cp-roles span + span::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.cp-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 800 clamp(38px, 7vw, 72px)/.94 var(--font-display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.cp-name .verified .icon { width: .5em; height: .5em; font-size: .5em; }
.cp-logo { max-height: 84px; max-width: min(100%, 420px); width: auto; object-fit: contain; }
.cp-handle { color: var(--text-2); font-size: 16px; }
.cp-handle .sep { margin: 0 .5em; color: var(--text-3); }
.cp-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s2) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 15px; }
.cp-stats b { font: 700 18px var(--font-display); color: var(--text); letter-spacing: -.02em; }
.cp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cp .announce { margin-top: var(--s6); }
.cp-tabs { position: sticky; top: var(--topbar-h); z-index: 40; margin-top: var(--s8); background: var(--material); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: 0 1px 0 var(--sep); }
.cp-tabs-inner { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.cp-tabs a { position: relative; padding: 16px 12px; font-weight: 650; font-size: 15px; color: var(--text-2); white-space: nowrap; }
.cp-tabs a:hover { color: var(--text); }
.cp-tabs a.is-active { color: var(--text); }
.cp-tabs a.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.cp-layout { display: grid; gap: var(--s10); padding-top: var(--s6); }
.cp-main { min-width: 0; }
.cp-main > .catalog > .section:first-child, .cp-main > .catalog > .spotlight-wrap:first-child { margin-top: 0; }
.cp-main .spotlight-wrap { margin-top: 0; }
.about-card { display: grid; gap: var(--s4); padding: var(--s6); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.about-card h2 { font: 800 24px/1 var(--font-display); letter-spacing: -.04em; }
.about-card h3 { margin-top: var(--s2); font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rail--people { display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.person { flex: none; width: 112px; display: grid; gap: 4px; justify-items: start; }
.person .avatar { --size: 112px !important; width: 112px; height: 112px; border-radius: 28px; }
.person strong { font: 700 15px/1.2 var(--font-display); letter-spacing: -.02em; }
@media (min-width: 820px) {
  .cp-banner { height: 360px; border-radius: 0 0 40px 40px; }
  .cp-id { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--s8); margin-top: -96px; }
  .cp-avatar { width: 184px; height: 184px; border-radius: 46px; }
  .cp-actions { padding-bottom: var(--s2); }
  .cp-id-main { padding-bottom: var(--s1); }
}
@media (min-width: 1040px) {
  .cp-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s12); align-items: start; }
  .cp-side { position: sticky; top: calc(var(--topbar-h) + 72px); }
}
.cp-main > .catalog:not(:has(*)) + .section { margin-top: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="black"]) .cp-logo:not(.logo-dark) { filter: brightness(0); } }
:root[data-theme="light"] .cp-logo:not(.logo-dark) { filter: brightness(0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cp-logo.logo-dark { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] .cp-logo.logo-dark, :root[data-theme="black"] .cp-logo.logo-dark { filter: brightness(0) invert(1); }

/* ====================================================================== RELEASE PAGE */
.release { padding-bottom: 0; }
.release-top { padding-top: calc(var(--topbar-h) + var(--s6)); padding-bottom: var(--s10); }
.release-cover { border-radius: 30px; box-shadow: 0 40px 90px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .12); }
@media (max-width: 599px) { .release-cover { width: 100% !important; max-width: none !important; margin-inline: 0 !important; border-radius: 26px !important; } }
.release-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.055em; line-height: .95; font-size: clamp(40px, 6vw, 88px); }
.release-info .kicker { display: flex; flex-wrap: wrap; gap: 6px 0; font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.release-summary { font-size: 19px; color: rgb(255 255 255 / .88); }
.release-cta .btn--light { min-height: 56px; font-size: 17px; border-radius: 16px; }
.also-on { border-radius: 18px; background: rgb(255 255 255 / .12); }
.release-info .btn--tint, .release-info .like-btn { background: rgb(255 255 255 / .16); color: #fff; box-shadow: none; }
.release-grid { display: grid; gap: var(--s10); margin-top: var(--s2); }
.release-block + .release-block { margin-top: var(--s10); }
.release-block h2 { font: 800 26px/1 var(--font-display); letter-spacing: -.045em; margin-bottom: var(--s4); }
.release-body { font-size: 18px; line-height: 1.7; max-width: 64ch; }
.release-meta { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); }
.release-meta div { padding: var(--s4); border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.release-meta dd { font: 650 17px/1.3 var(--font-display); letter-spacing: -.02em; }
.creator-card { display: grid; gap: var(--s4); padding: var(--s5); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.creator-card-id { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.creator-card-art .avatar { --size: 72px !important; width: 72px; height: 72px; border-radius: 22px; }
.creator-card-id small { display: block; font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.creator-card-id strong { display: flex; align-items: center; gap: 4px; font: 800 22px/1.1 var(--font-display); letter-spacing: -.035em; }
.creator-card-actions { display: flex; gap: var(--s2); }
.release-side { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 1000px) {
  .release-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s12); }
  .release-side { position: sticky; top: calc(var(--topbar-h) + 24px); }
}

/* ====================================================================== BROWSE */
.browse-layout { display: grid; gap: var(--s6); }
.browse-filters { display: grid; gap: var(--s5); min-width: 0; }
.filter-group h2 { margin-bottom: var(--s3); font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.filter-list { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.filter-list::-webkit-scrollbar { display: none; }
.filter-list a { flex: none; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--sep); transition: background var(--t-fast); }
.filter-list a b { font-weight: 600; color: var(--text-3); font-size: 13px; }
.filter-list a:hover { background: var(--fill); }
.filter-list a[aria-current="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.filter-list a[aria-current="true"] b { color: inherit; opacity: .7; }
@media (min-width: 900px) {
  .browse-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s12); align-items: start; }
  .browse-filters { position: sticky; top: calc(var(--topbar-h) + 20px); max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto; padding-right: var(--s2); }
  .filter-list { display: grid; gap: 2px; overflow: visible; padding-inline: 0; margin-inline: 0; }
  .filter-list a { justify-content: space-between; box-shadow: none; border-radius: 12px; min-height: 40px; }
  .filter-list a:hover { background: var(--fill); }
}
.pager { padding-top: var(--s6); }
.filter-group:nth-child(2) { order: -1; }

/* ====================================================================== CREATOR WORKSPACE (studio, insights, share, profile, account) */
.studio-shell { display: grid; gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s6); }
.studio-nav { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.studio-me { display: none; }
.studio-add { flex: none; min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.studio-links { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; min-width: 0; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
.studio-links::-webkit-scrollbar { display: none; }
.studio-links a { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.studio-links a .icon { width: 20px; height: 20px; font-size: 20px; }
.studio-links a:hover { background: var(--fill); color: var(--text); }
.studio-links a[aria-current="page"] { background: var(--text); color: var(--bg); }
.studio-content { min-width: 0; }
.studio-content > .page-head:first-child, .studio-content > .editor:first-child { padding-top: 0; }
@media (min-width: 900px) {
  .studio-shell { grid-template-columns: 250px minmax(0, 1fr); gap: var(--s12); padding-top: var(--s10); align-items: start; }
  .studio-nav { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: var(--s4); }
  .studio-me { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); margin: calc(var(--s3) * -1); border-radius: 20px; }
  .studio-me:hover { background: var(--fill); }
  .studio-me-art .avatar { --size: 56px !important; width: 56px; height: 56px; border-radius: 18px; }
  .studio-me strong { display: block; font: 800 18px/1.1 var(--font-display); letter-spacing: -.03em; }
  .studio-me small { color: var(--text-3); font-size: 13px; }
  .studio-add { min-height: 48px; font-size: 15px; width: 100%; }
  .studio-links { display: grid; gap: 2px; overflow: visible; margin-right: 0; padding-right: 0; }
  .studio-links a { min-height: 44px; }
}

/* studio lists + panels */
.studio-tabs { margin-inline: 0; padding-inline: 0; }
.studio-list { gap: var(--s2); }
.studio-row { padding: var(--s3); border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); transition: box-shadow var(--t-fast); }
.studio-row + .studio-row { box-shadow: inset 0 0 0 1px var(--sep); }
.studio-row:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.studio-thumb { border-radius: 14px; overflow: hidden; }
.week, .credit-requests, .stat, .editor-section { border-radius: 26px; }
.week, .stat { background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.credit-requests { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.stat-value, .week-stat strong { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; }
.editor-section { padding: var(--s6); background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.editor-section h2 { font: 800 22px/1.1 var(--font-display); letter-spacing: -.04em; }
.editor { gap: var(--s4); }
.editor-bar { border-radius: 22px; background: var(--material); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: inset 0 0 0 1px var(--sep), var(--shadow-pop); }
.table th, .table td { border-bottom-color: var(--sep); }
.share-item { border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.page.studio-shell { max-width: calc(var(--content-max) + var(--gutter) * 2); }

/* ====================================================================== SHARED: lists, feed, empty states, prose, settings */
.empty { max-width: 460px; margin: var(--s12) auto; padding: var(--s8) var(--s6); border-radius: 32px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); gap: var(--s3); }
.empty > .icon { display: grid; place-items: center; width: 72px; height: 72px; font-size: 34px; margin-bottom: var(--s3); border-radius: 24px; background: var(--lime); color: var(--on-lime); }
.empty h2 { font: 800 26px/1.05 var(--font-display); letter-spacing: -.045em; }
.empty .btn { margin-top: var(--s3); }

.list { max-width: none; gap: 2px; }
.row { padding: var(--s3); border-radius: 22px; transition: background var(--t-fast); }
.row + .row { box-shadow: none; }
.row:hover { background: var(--fill); }
.row-rank { width: 44px; font: 800 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--text-3); }
.row:nth-child(-n+3) .row-rank { color: var(--accent-text); }
.row-thumb { border-radius: 16px; }
.row-text strong { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; font-size: 17px; }
@media (min-width: 820px) { .list--cols { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } .list--cols .row:nth-child(2) { box-shadow: none; } }

.feed-item .feed-media { border-radius: 22px; box-shadow: 0 0 0 1px var(--sep); }
@media (max-width: 599px) { .feed { margin-inline: 0; } .feed-item .feed-media { border-radius: 20px; } .feed-body { padding-inline: var(--s1); } }
.feed-text h3 { font: 700 18px/1.25 var(--font-display); letter-spacing: -.025em; }
.dur-chip { border-radius: 8px; }
.play-chip { background: rgb(15 15 18 / .6); }

.prose { max-width: 740px; margin-inline: auto; padding-bottom: var(--s10); }
.prose h2 { margin: var(--s10) 0 var(--s3); font: 800 30px/1.05 var(--font-display); letter-spacing: -.045em; color: var(--text); }
.prose p, .prose li { font-size: 17px; line-height: 1.7; }
.prose .page-head { padding-top: var(--s10); }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--fill); font-size: .9em; }

.settings { max-width: 760px; margin-inline: auto; }
.group-title { font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.group-row { min-height: 60px; }
.group-row:hover { background: var(--fill); }
.letter { font: 800 30px/1 var(--font-display); letter-spacing: -.04em; color: var(--text-3); }
.artist-tile .avatar { border-radius: 28%; }
.artist-grid { gap: var(--s6) var(--s5); }
.comment-form textarea, .comment-form input { border-radius: 14px; }
.toolbar { margin-bottom: var(--s5); }

/* ====================================================================== AUTH */
body.auth-page .auth-art { background: radial-gradient(120% 90% at 15% 0%, #7d68ff, #3b24cc 58%, #170c66); }
body.auth-page .auth-art::after { background: linear-gradient(to top, rgb(10 5 50 / .6), transparent 70%) !important; }
body.auth-page .auth-statement { font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em; }
body.auth-page .auth-statement em { color: var(--lime); }
body.auth-page .auth-tile { border-radius: 18px; box-shadow: 0 18px 40px rgb(0 0 0 / .35); }
body.auth-page .auth-head h1 { font: 800 clamp(36px, 8vw, 52px)/.98 var(--font-display); letter-spacing: -.055em; }
body.auth-page .auth-brand { font: 800 22px var(--font-display); letter-spacing: -.04em; }
body.auth-page .auth-brand .brand-mark { color: var(--accent); }
body.auth-page .auth-card .btn--primary { min-height: 52px; font-size: 16px; }
.browse-layout > * { min-width: 0; } .browse-filters { max-width: 100%; }
.filter-group { min-width: 0; }
@media (min-width: 820px) {
  .cp-id { align-items: start; }
  .cp-id-main { margin-top: 112px; padding-bottom: 0; }
  .cp-actions { margin-top: 112px; padding-bottom: 0; }
}
.topbar[data-chrome="overlay"]:not(.is-scrolled) .btn--quiet { color: #fff; }
.topbar[data-chrome="overlay"]:not(.is-scrolled) .brand { color: #fff; }

/* ====================================================================== HOME: following strip */
.follow-strip { margin-top: var(--s2); }
.strip-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s3); }
.strip-head h2 { font: 800 20px/1 var(--font-display); letter-spacing: -.04em; }
.strip-head a { display: inline-flex; align-items: center; font-weight: 650; font-size: 14px; color: var(--accent-text); }
.strip-head .icon { width: 18px; height: 18px; font-size: 18px; }
.strip { display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: none; padding: 4px var(--gutter) 6px; margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x proximity; }
.strip::-webkit-scrollbar { display: none; }
.strip-item { flex: none; width: 76px; display: grid; justify-items: center; gap: 6px; scroll-snap-align: start; }
.strip-ring { display: grid; place-items: center; width: 72px; height: 72px; padding: 3px; border-radius: 26px; background: var(--fill-hover); transition: transform var(--t-base) var(--ease-out); }
.strip-item:hover .strip-ring { transform: translateY(-3px); }
.strip-item.has-new .strip-ring { background: conic-gradient(from 210deg, var(--accent), var(--lime), var(--accent)); }
.strip-ring .avatar { --size: 100% !important; width: 100%; height: 100%; border-radius: 23px; box-shadow: 0 0 0 3px var(--bg); }
.strip-name { max-width: 76px; font-size: 12px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.strip-item.has-new .strip-name { color: var(--text); }

/* ====================================================================== TINTED STAGES (watch page): dark, coloured by the artwork */
body.is-tinted {
  color-scheme: dark;
  --deep: color-mix(in srgb, var(--artwork-bg) 78%, #000);
  --bg: var(--deep); --surface: rgb(255 255 255 / .075); --surface-2: rgb(255 255 255 / .12); --surface-3: rgb(255 255 255 / .18);
  --material: color-mix(in srgb, var(--artwork-bg) 82%, transparent);
  --text: #fff; --text-2: rgb(255 255 255 / .76); --text-3: rgb(255 255 255 / .62);
  --sep: rgb(255 255 255 / .14); --fill: rgb(255 255 255 / .1); --fill-hover: rgb(255 255 255 / .17);
  --accent: var(--artwork-fill, #5b3df5); --accent-text: var(--artwork-accent, #b3a8ff); --on-accent: #fff;
  --lime: color-mix(in srgb, var(--artwork-glow) 55%, #fff);
  background: var(--deep); color: #fff;
  transition: background-color .6s var(--ease);
}

body.is-tinted .site-nav a, body.is-tinted .brand, body.is-tinted .search-pill, body.is-tinted .round-btn, body.is-tinted .btn--quiet { color: #fff; }
body.is-tinted .search-pill, body.is-tinted .round-btn { background: rgb(255 255 255 / .14); }
body.is-tinted .btn--ink { background: #fff; color: #111; }
body.is-tinted .btn--primary { background: #fff; color: #111; }
body.is-tinted .site-footer { border-top-color: var(--sep); }
.watch-info h1, .watch-title { font: 800 clamp(26px, 3.4vw, 42px)/1.05 var(--font-display); letter-spacing: -.045em; }
.watch-actions .btn { min-height: 44px; border-radius: 999px; }
.credit { padding: var(--s3) var(--s4); border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.credit-text strong { font: 700 17px/1.2 var(--font-display); letter-spacing: -.025em; }
.watch .desc { padding: var(--s5); border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.comments { padding-top: var(--s4); }
.comments .section-head span { font: 800 24px/1 var(--font-display); letter-spacing: -.04em; }
.up-next .section-head h2 { font-size: 22px; }
.chapter { border-radius: 14px; }

/* ====================================================================== SEARCH: result filters */
.search-tabs { display: flex; gap: var(--s2); padding: var(--s2) var(--gutter) var(--s1); overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 2; background: var(--bg); }
.search-tabs::-webkit-scrollbar { display: none; }
.search-tabs button { flex: none; min-height: 34px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--sep); font-size: 14px; font-weight: 650; }
.search-tabs button[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
[data-search-results][data-sk="creators"] .result-group:not([data-kind="creators"]),
[data-search-results][data-sk="releases"] .result-group:not([data-kind="releases"]),
[data-search-results][data-sk="videos"] .result-group:not([data-kind="videos"]) { display: none; }
@media (min-width: 820px) { .search-tabs { background: var(--surface); padding-inline: var(--s4); } }

/* ====================================================================== CREATORS DIRECTORY: portrait cards */
.artist-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--s4); }
.artist-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; text-align: left; isolation: isolate; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--sep); transition: transform var(--t-base) var(--ease-out); }
.artist-tile .avatar { position: absolute; inset: 0; --size: 100% !important; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0 !important; z-index: -2; transition: transform 700ms var(--ease-out); }
.artist-tile .avatar b { font-size: 72px; }
.artist-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 8 20 / .86) 0, rgb(10 8 20 / .5) 34%, transparent 62%); }
.artist-tile strong, .artist-tile .meta { position: absolute; left: 14px; right: 14px; color: #fff; max-width: none; }
.artist-tile strong { bottom: 34px; font: 800 19px/1.1 var(--font-display); letter-spacing: -.035em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.artist-tile .meta { bottom: 14px; margin: 0; color: rgb(255 255 255 / .78); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .artist-tile:hover { transform: translateY(-4px); } .artist-tile:hover .avatar { transform: scale(1.06); } }
@media (min-width: 820px) { .artist-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s5); } .artist-tile strong { font-size: 22px; bottom: 38px; } }
.letter-group { margin-top: var(--s2); }
.letter { margin: var(--s6) 0 var(--s3); }

/* ====================================================================== ACTIVITY FEED (Following, Notifications): cards on a timeline */
.act-list { gap: var(--s3); max-width: 900px; }
.feed-group { max-width: 900px; }
.act { grid-template-columns: 52px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); transition: box-shadow var(--t-fast); }
.act:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.act-avatar .avatar { --size: 52px !important; width: 52px; height: 52px; border-radius: 17px; }
.act-line { font-size: 15px; align-items: center; min-height: 52px; margin-top: -2px; }
.act-who { font: 800 17px/1.2 var(--font-display); letter-spacing: -.03em; }
.act .rel, .act .rel--landscape, .act .rel--square, .act .rel--date, .act .rel--text, .act .rel--portrait, .act .rel--product { max-width: none; }
@media (min-width: 640px) {
  .act { grid-template-columns: 52px minmax(0, 1fr); }
  .act .rel:not(.rel--date):not(.rel--text) { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s5); align-items: center; }
  .act .rel:not(.rel--date):not(.rel--text) .rel-body { padding-block: var(--s2); }
  .act .rel-title { font-size: 22px; letter-spacing: -.03em; }
}
.act--new { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ====================================================================== DYNAMIC COLOUR: buttons and cards take the creator's dominant colour */
body.is-artist .btn[aria-pressed="true"], body.is-tinted .btn[aria-pressed="true"] { background: var(--artwork-accent, var(--accent)); color: #0d0d10; box-shadow: none; }
.pcard .btn[aria-pressed="true"] { background: var(--artwork-fill, var(--accent)); color: #fff; box-shadow: none; }
.pcard { transition: box-shadow var(--t-base), transform var(--t-base) var(--ease-out); }
.pcard:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--artwork-accent, var(--text-3)) 60%, transparent); }
.pcard-art .avatar { box-shadow: 0 14px 30px color-mix(in srgb, var(--artwork-primary, #000) 55%, transparent); }

/* Links are never underlined, anywhere. They read as links by colour and weight (inline links) or by their shape (buttons, rows, cards). */
a, a:hover, a:focus, a:active, a:visited { text-decoration: none; }

/* featured release inside the home bento: media on top, copy below (the column is not wide enough for side-by-side) */
.bento { align-items: start; }
.bento-main { min-width: 0; }
.bento-main .spotlight { grid-template-columns: minmax(0, 1fr) !important; border-radius: 28px; padding: var(--s6); }
.bento-main .spotlight-media { width: 100% !important; max-width: none !important; }
.bento-main .spotlight-title { font-size: clamp(26px, 3vw, 40px); }
.bento-main .spotlight-body { padding: 0; }

/* creator cards: identical size whatever the content */
.rail--pcards { align-items: stretch; }
.pcard { flex: 0 0 188px; width: 188px; min-width: 188px; grid-template-rows: 1fr auto; }
.pcard-link { align-content: start; }
.pcard-art { width: 100%; aspect-ratio: 1; }
.pcard-art .avatar { width: 100%; height: 100%; }
@media (min-width: 820px) { .pcard { flex-basis: 212px; width: 212px; min-width: 212px; } }