/* Roberto Sound V15 — layout/readability + lower transparent nav + reactive music-disc logo.
   Keeps the existing Shatlyk-inspired motion/cursor system while preventing decorative UI from covering content. */

:root{
  --rs-safe-x:clamp(18px,2vw,34px);
  --rs-logo-size:clamp(62px,4.8vw,78px);
  --rs-bottom-nav-size:clamp(58px,4.4vw,72px);
  --rs-bottom-safe:clamp(18px,2vw,30px);
}

/* Reserve a clean identity row. Logo stays at the top and never sits on top of body copy. */
.site-grid{padding-top:clamp(112px,8vw,136px)!important;padding-bottom:clamp(150px,12vw,190px)!important}
.masthead{padding-top:0!important;min-height:0!important}
.roberto-corner-brand{
  left:var(--rs-safe-x)!important;top:clamp(18px,1.8vw,28px)!important;
  width:var(--rs-logo-size)!important;height:var(--rs-logo-size)!important;
  opacity:1!important;isolation:isolate;
}
.roberto-corner-brand::after{
  content:"ROBERTO SOUND";position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  color:#f4f1f6;font:800 9px/1.25 system-ui,sans-serif;letter-spacing:.18em;white-space:nowrap;
  opacity:.72;pointer-events:none;
}
.roberto-brand-sun{
  background:repeating-conic-gradient(from -5deg,rgba(244,241,246,.78) 0 5deg,transparent 5deg 10deg)!important;
  filter:drop-shadow(0 9px 24px rgba(0,0,0,.34));
  transition:filter .35s ease,transform .35s ease,background .35s ease;
}
.roberto-brand-sun::before{
  inset:18%!important;background:#18171b center/cover no-repeat!important;
  background-image:var(--rs-logo-art,linear-gradient(145deg,#232127,#0c0b0e))!important;
  border:2px solid rgba(255,255,255,.28)!important;
  box-shadow:inset 0 0 0 5px rgba(13,12,15,.56),0 0 0 1px rgba(255,255,255,.08);
}
.roberto-brand-sun::after{
  content:"";position:absolute;inset:5%;border-radius:50%;border:1px solid rgba(255,255,255,.24);
  box-shadow:0 0 0 6px rgba(255,255,255,.018);opacity:.72;pointer-events:none;
}
.roberto-brand-sun b{
  display:grid;place-items:center;width:36%;height:36%;border-radius:50%;
  background:rgba(12,11,14,.84);color:#fff!important;border:1px solid rgba(255,255,255,.28);
  font-size:clamp(14px,1vw,18px)!important;backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.roberto-corner-brand.is-playing .roberto-brand-sun{
  background:repeating-conic-gradient(from 0deg,#ff334f 0 4deg,rgba(255,255,255,.86) 4deg 7deg,transparent 7deg 12deg)!important;
  animation:rsLogoSpin 7s linear infinite,rsLogoBeat .72s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 18px rgba(255,45,72,.34)) drop-shadow(0 10px 24px rgba(0,0,0,.34));
}
.roberto-corner-brand.is-playing .roberto-brand-sun::after{border-color:rgba(255,63,87,.68);animation:rsLogoHalo 1.44s ease-out infinite}
.roberto-corner-brand.is-playing .roberto-brand-sun b{background:rgba(12,11,14,.72)}
@keyframes rsLogoSpin{to{rotate:360deg}}
@keyframes rsLogoBeat{0%{scale:.97}100%{scale:1.035}}
@keyframes rsLogoHalo{0%{scale:.9;opacity:.75}100%{scale:1.18;opacity:0}}

/* Put navigation low and keep it translucent. It does not occupy content layout when closed. */
.roberto-agency-menu-toggle{
  top:auto!important;right:var(--rs-safe-x)!important;bottom:var(--rs-bottom-safe)!important;
  width:var(--rs-bottom-nav-size)!important;height:var(--rs-bottom-nav-size)!important;
  background:rgba(235,232,234,.14)!important;color:#f0edf2!important;
  border:1px solid rgba(255,255,255,.24)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.28)!important;
}
.roberto-agency-menu-toggle:hover{background:rgba(245,242,246,.24)!important}
.roberto-agency-menu-toggle span{background:#f2eef3!important;width:32%!important}

/* Bottom glass navigation sheet instead of a full-height side wall. */
.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}
.roberto-agency-menu{
  left:50%!important;right:auto!important;top:auto!important;bottom:calc(var(--rs-bottom-safe) + var(--rs-bottom-nav-size) + 14px)!important;
  width:min(900px,calc(100vw - 2 * var(--rs-safe-x) - 92px))!important;height:auto!important;max-height:min(68vh,620px)!important;
  padding:clamp(20px,2vw,28px)!important;border-radius:24px!important;
  background:rgba(26,24,29,.72)!important;border:1px solid rgba(255,255,255,.16)!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(-50%,36px,0) scale(.985)!important;opacity:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(210px,.36fr)!important;gap:20px 28px!important;
  overflow:auto!important;
  transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .34s ease,visibility 0s linear .48s!important;
}
.roberto-agency-menu.is-open{transform:translate3d(-50%,0,0) scale(1)!important;opacity:1!important;transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .34s ease,visibility 0s!important}
.roberto-agency-menu-head{grid-column:1/-1;margin:0 0 4px!important;padding:0 0 12px!important}
.roberto-agency-menu-links{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 24px!important;margin:0!important}
.roberto-agency-menu-links a{font-size:clamp(25px,2.2vw,38px)!important;line-height:1.08!important;padding:7px 0!important;transform:translateY(14px)!important}
.roberto-agency-menu.is-open .roberto-agency-menu-links a{transform:translateY(0)!important}
.roberto-agency-menu-links a:hover{transform:translateX(8px)!important}
.roberto-agency-menu-foot{margin:0!important;align-self:end}
.roberto-agency-menu-foot button{background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:12px!important}

/* Reduce the oversized editorial side copy and give content predictable room. */
.studio-section.subgrid{
  grid-template-columns:minmax(215px,.78fr) repeat(4,minmax(0,1fr))!important;
  column-gap:clamp(22px,2vw,36px)!important;row-gap:clamp(18px,2vw,30px)!important;
  overflow:visible!important;scroll-margin-top:108px;
}
.section-header{grid-column:1/2!important;min-width:0!important;padding:2px clamp(8px,1vw,18px) 0 0!important;align-self:start!important;overflow:visible!important}
.section-header h2{
  font-size:clamp(40px,4.15vw,72px)!important;line-height:.92!important;font-weight:560!important;
  letter-spacing:-.055em!important;margin:.7rem 0 1rem!important;max-width:6.7ch!important;
  overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;
  color:#eeeaf1!important;
}
.section-header p{font-size:clamp(.78rem,.78vw,.92rem)!important;line-height:1.58!important;color:#b8b2bc!important;max-width:31ch!important}
.section-header>span{font-size:.66rem!important;color:#f3eef5!important;letter-spacing:.14em!important}
.youtube-discovery,.moss-reader-card,.player-layout,.lyrics-workbench{grid-column:2/-1!important;min-width:0!important}
.studio-section::before{opacity:.5!important;font-size:clamp(110px,13vw,230px)!important;right:1vw!important}
.youtube-section::before{content:"01."!important}.moss-section::before{content:"02."!important}.player-section::before{content:"03."!important}.lyrics-section::before{content:"04."!important}

/* Do not let left editorial headlines collide with their panels. */
.youtube-section .section-header h2{max-width:5.8ch!important}
.moss-section .section-header h2{max-width:5.4ch!important}
.player-section .section-header h2{max-width:5.3ch!important}

/* Keep core content above decorative fluid layers and maintain high text contrast. */
.search-banner,.studio-section,.spotify-panel,.catalog{isolation:isolate}
.studio-section p,.studio-section small,.studio-section label{color:#c0bac5}
.player-console h3,.moss-reader-head h3,.youtube-discovery h3{color:#f7f4f8!important}

/* Avoid bottom navigation covering the sticky music player. */
body:has(#stickyPlayer:not([hidden])) .roberto-agency-menu-toggle{bottom:clamp(88px,8vw,112px)!important}
body:has(#stickyPlayer:not([hidden])) .roberto-agency-menu{bottom:clamp(164px,13vw,196px)!important}

@media(max-width:1100px){
  .studio-section.subgrid{grid-template-columns:minmax(190px,.72fr) repeat(3,minmax(0,1fr))!important}
  .section-header h2{font-size:clamp(38px,5vw,58px)!important}
  .roberto-agency-menu{width:min(760px,calc(100vw - 96px))!important}
}
@media(max-width:820px){
  .site-grid{padding-top:96px!important;padding-bottom:150px!important}
  .roberto-corner-brand{width:60px!important;height:60px!important;left:16px!important;top:16px!important}
  .roberto-corner-brand::after{display:none}
  .studio-section.subgrid{grid-template-columns:1fr!important;overflow:hidden!important}
  .section-header,.youtube-discovery,.moss-reader-card,.player-layout,.lyrics-workbench{grid-column:1/-1!important}
  .section-header{padding:0!important;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .section-header h2{font-size:clamp(38px,10vw,62px)!important;max-width:10ch!important;margin:.35rem 0 .35rem!important}
  .section-header p{max-width:62ch!important;font-size:.86rem!important}
  .roberto-agency-menu-toggle{right:16px!important;bottom:16px!important;width:60px!important;height:60px!important}
  .roberto-agency-menu{left:16px!important;right:16px!important;width:auto!important;bottom:88px!important;transform:translate3d(0,28px,0) scale(.985)!important;grid-template-columns:1fr!important;max-height:70vh!important}
  .roberto-agency-menu.is-open{transform:translate3d(0,0,0) scale(1)!important}
  .roberto-agency-menu-links{grid-template-columns:1fr 1fr!important}
  .roberto-agency-menu-foot{display:grid;grid-template-columns:1fr 1fr!important}
  .roberto-agency-menu-foot small{grid-column:1/-1}
  body:has(#stickyPlayer:not([hidden])) .roberto-agency-menu-toggle{bottom:82px!important}
  body:has(#stickyPlayer:not([hidden])) .roberto-agency-menu{bottom:154px!important}
}
@media(max-width:520px){
  .site-grid{padding-top:88px!important}
  .section-header h2{font-size:clamp(34px,11vw,50px)!important;line-height:.96!important}
  .roberto-agency-menu-links{grid-template-columns:1fr!important}
  .roberto-agency-menu-links a{font-size:28px!important}
  .roberto-agency-menu-foot{grid-template-columns:1fr!important}
  .roberto-agency-menu-foot small{grid-column:1}
}
@media(prefers-reduced-motion:reduce){
  .roberto-corner-brand.is-playing .roberto-brand-sun,.roberto-corner-brand.is-playing .roberto-brand-sun::after{animation:none!important}
}