/* Roberto Sound V15 — final polish
   Top-aligned transparent navigation, readable editorial columns, reactive music-disc brand,
   and Spotify cover presentation that does not rely on letter placeholders. */

:root{
  --rs-topbar-y:clamp(20px,1.8vw,30px);
  --rs-top-logo:clamp(66px,4.8vw,82px);
  --rs-panel-gap:clamp(24px,2.2vw,40px);
  --rs-editorial-width:clamp(240px,18vw,310px);
}

/* --- Identity / reactive music-disc --------------------------------------------------------- */
.site-grid{padding-top:clamp(118px,8.4vw,146px)!important;padding-bottom:clamp(92px,8vw,132px)!important}
.roberto-corner-brand{
  left:var(--rs-safe-x)!important;top:var(--rs-topbar-y)!important;
  width:var(--rs-top-logo)!important;height:var(--rs-top-logo)!important;
  display:grid!important;place-items:center!important;z-index:6000!important;
}
.roberto-corner-brand::after{
  content:"ROBERTO SOUND"!important;
  left:calc(100% + 14px)!important;color:#f7f4f8!important;opacity:.78!important;
  font-size:9px!important;letter-spacing:.2em!important;
}
.roberto-brand-sun{
  border-radius:50%!important;
  background:conic-gradient(from -18deg,
    rgba(249,247,250,.98) 0 2.6deg,transparent 2.6deg 5.4deg,
    rgba(249,247,250,.56) 5.4deg 7.2deg,transparent 7.2deg 10.5deg)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 42px rgba(0,0,0,.4)!important;
  transition:transform .45s cubic-bezier(.16,1,.3,1),filter .35s ease!important;
}
.roberto-brand-sun::before{
  inset:14%!important;border-radius:50%!important;
  background-color:#111014!important;
  background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.3)!important;
  box-shadow:inset 0 0 0 7px rgba(10,9,12,.64),0 0 0 1px rgba(255,255,255,.08)!important;
}
.roberto-brand-sun::after{
  inset:3.5%!important;border:1px solid rgba(255,255,255,.22)!important;
  background:conic-gradient(#ff355d var(--rs-logo-progress,0%),transparent 0)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0)!important;
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0)!important;
  opacity:.78!important;
}
.roberto-brand-sun b{
  width:34%!important;height:34%!important;border-radius:50%!important;
  background:#111014!important;border:1px solid rgba(255,255,255,.3)!important;
  font-size:clamp(13px,1vw,17px)!important;letter-spacing:-.05em!important;
  position:relative!important;z-index:4!important;
}
.roberto-corner-brand.is-playing .roberto-brand-sun{
  background:conic-gradient(from 0deg,
    #f7f4f8 0 3deg,transparent 3deg 6deg,
    rgba(255,54,91,.92) 6deg 8deg,transparent 8deg 12deg)!important;
  animation:rsDiscSpin 5.8s linear infinite,rsDiscPulse .66s ease-in-out infinite alternate!important;
  filter:drop-shadow(0 0 16px rgba(255,50,90,.3)) drop-shadow(0 12px 32px rgba(0,0,0,.42))!important;
}
.roberto-corner-brand.is-playing .roberto-brand-sun b{box-shadow:0 0 0 5px rgba(255,255,255,.04),0 0 20px rgba(255,53,91,.14)!important}
@keyframes rsDiscSpin{to{transform:rotate(360deg)}}
@keyframes rsDiscPulse{0%{scale:.975}100%{scale:1.035}}

/* --- Navbar: back to the top-right, aligned with logo -------------------------------------- */
.roberto-agency-menu-toggle{
  top:var(--rs-topbar-y)!important;right:var(--rs-safe-x)!important;bottom:auto!important;
  width:var(--rs-top-logo)!important;height:var(--rs-top-logo)!important;
  background:rgba(235,232,236,.13)!important;color:#f5f2f6!important;
  border:1px solid rgba(255,255,255,.18)!important;
  backdrop-filter:blur(24px) saturate(145%)!important;-webkit-backdrop-filter:blur(24px) saturate(145%)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.25)!important;z-index:6000!important;
}
.roberto-agency-menu-toggle:hover{background:rgba(245,242,246,.22)!important}
.roberto-agency-menu-toggle span{background:#f2eef4!important}
.roberto-agency-menu{
  left:auto!important;right:var(--rs-safe-x)!important;top:calc(var(--rs-topbar-y) + var(--rs-top-logo) + 14px)!important;bottom:auto!important;
  width:min(430px,calc(100vw - 2 * var(--rs-safe-x)))!important;max-height:min(72vh,620px)!important;
  padding:22px!important;border-radius:22px!important;
  background:rgba(26,24,29,.72)!important;border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(30px) saturate(145%)!important;-webkit-backdrop-filter:blur(30px) saturate(145%)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.38)!important;
  transform:translate3d(0,-12px,0) scale(.985)!important;opacity:0!important;
  display:grid!important;grid-template-columns:1fr!important;gap:12px!important;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease,visibility 0s linear .42s!important;
}
.roberto-agency-menu.is-open{transform:translate3d(0,0,0) scale(1)!important;opacity:1!important;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease,visibility 0s!important}
.roberto-agency-menu-links{grid-template-columns:1fr 1fr!important;gap:2px 18px!important}
.roberto-agency-menu-links a{font-size:clamp(25px,2.2vw,34px)!important;padding:6px 0!important}
.roberto-agency-menu-foot{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.roberto-agency-menu-foot small{grid-column:1/-1!important}
.roberto-agency-backdrop{background:transparent!important;backdrop-filter:none!important;pointer-events:none!important}
body.roberto-menu-open{overflow:auto!important}
body.roberto-menu-open .site-grid{filter:none!important;transform:none!important}
body:has(#stickyPlayer:not([hidden])) .roberto-agency-menu-toggle{top:var(--rs-topbar-y)!important;bottom:auto!important}
body:has(#stickyPlayer:not([hidden])) .roberto-agency-menu{top:calc(var(--rs-topbar-y) + var(--rs-top-logo) + 14px)!important;bottom:auto!important}

/* --- Editorial side headings: smaller, isolated, never under panels ----------------------- */
.studio-section.subgrid{
  grid-template-columns:var(--rs-editorial-width) repeat(4,minmax(0,1fr))!important;
  column-gap:var(--rs-panel-gap)!important;row-gap:clamp(18px,2vw,30px)!important;
  overflow:visible!important;align-items:start!important;
}
.section-header{
  grid-column:1/2!important;position:relative!important;z-index:3!important;
  min-width:0!important;max-width:var(--rs-editorial-width)!important;
  padding:4px 12px 0 0!important;overflow:visible!important;
}
.section-header h2{
  font-size:clamp(34px,2.9vw,50px)!important;line-height:.98!important;font-weight:520!important;
  letter-spacing:-.055em!important;margin:.75rem 0 1rem!important;
  max-width:11ch!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;
  color:#efebf1!important;text-transform:none!important;
}
.section-header p{font-size:clamp(.78rem,.76vw,.9rem)!important;line-height:1.6!important;max-width:29ch!important;color:#c1bac5!important}
.section-header>span{font-size:.65rem!important;line-height:1.4!important}
.youtube-section .section-header h2,.moss-section .section-header h2,.player-section .section-header h2,.lyrics-section .section-header h2{max-width:11ch!important}
.youtube-discovery,.moss-reader-card,.player-layout,.lyrics-workbench{grid-column:2/-1!important;position:relative!important;z-index:2!important;min-width:0!important}
.moss-reader-card,.player-layout{margin-left:0!important}

/* --- Spotify presentation ----------------------------------------------------------------- */
.spotify-now-card>img[src$="spotify-mark.svg"]{object-fit:contain!important;padding:18px!important;background:#111014!important}
.spotify-chart-art-media img[src]{opacity:1!important}
.spotify-chart-art-card.has-art .spotify-chart-art-placeholder,.spotify-chart-art-media img[src]+*{ }
.spotify-chart-art-card.has-art .spotify-chart-art-placeholder{opacity:0!important;visibility:hidden!important}
.spotify-chart-art-placeholder{transition:opacity .22s ease,visibility .22s ease!important}

.spotify-chart-now{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;
  margin:.2rem 0 1rem;padding:12px;border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:linear-gradient(130deg,#17151b,#0d0c10);color:#f5f2f6;
}
.spotify-chart-now img{width:92px;height:92px;object-fit:cover;border-radius:8px;background:#111014;box-shadow:0 16px 34px rgba(0,0,0,.34)}
.spotify-chart-now div{display:grid;gap:4px;min-width:0}
.spotify-chart-now span{font-size:.52rem!important;letter-spacing:.17em!important;font-weight:950!important;color:#aaa5ae!important}
.spotify-chart-now strong{font-size:clamp(1rem,1.8vw,1.5rem)!important;line-height:1.08!important;color:#f7f4f8!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotify-chart-now p{font-size:.68rem!important;line-height:1.45!important;color:#ada7b1!important;margin:0!important}
.spotify-iframe-host{width:100%;min-height:352px}
.spotify-iframe-host iframe{display:block;width:100%!important;min-height:352px!important;border:0!important}

/* Keep dark Spotify styling and make official attribution visible. */
.spotify-logo-lockup{color:#fff!important}
.spotify-panel{background:linear-gradient(145deg,#111014 0%,#17151b 58%,#0d0d0f 100%)!important}

@media(max-width:1180px){
  :root{--rs-editorial-width:clamp(210px,21vw,250px)}
  .section-header h2{font-size:clamp(32px,3.8vw,46px)!important}
}
@media(max-width:900px){
  .studio-section.subgrid{grid-template-columns:1fr!important}
  .section-header,.youtube-discovery,.moss-reader-card,.player-layout,.lyrics-workbench{grid-column:1/-1!important;max-width:none!important}
  .section-header{padding:0!important}
  .section-header h2{font-size:clamp(36px,8vw,56px)!important;max-width:13ch!important}
  .section-header p{max-width:60ch!important}
}
@media(max-width:760px){
  :root{--rs-top-logo:60px;--rs-topbar-y:16px}
  .site-grid{padding-top:92px!important}
  .roberto-corner-brand{left:16px!important}
  .roberto-corner-brand::after{display:none!important}
  .roberto-agency-menu-toggle{right:16px!important}
  .roberto-agency-menu{right:16px!important;left:16px!important;width:auto!important;top:90px!important}
  .spotify-chart-now{grid-template-columns:72px minmax(0,1fr)}
  .spotify-chart-now img{width:72px;height:72px}
}
@media(max-width:520px){
  .roberto-agency-menu-links{grid-template-columns:1fr!important}
  .section-header h2{font-size:clamp(34px,11vw,48px)!important}
}
@media(prefers-reduced-motion:reduce){
  .roberto-corner-brand.is-playing .roberto-brand-sun{animation:none!important}
}