/* XALO STUDIO V12.5 — professional editorial layout / contained product visuals
   Inspired by strong contemporary studio sites: immersive motion + disciplined editorial hierarchy.
   The goal is polish and containment, never decorative clipping. */

:root{--pro-shell:min(1240px,calc(100vw - clamp(32px,6vw,96px)));--pro-radius:26px;--pro-line:rgba(255,255,255,.095)}

/* ---------- Global rhythm / consistent shell ---------- */
body.cinematic-universe .shell,body.home-cinematic .shell{width:var(--pro-shell);max-width:none}
body.cinematic-universe .site-header .nav,body.home-cinematic .site-header .nav{width:var(--pro-shell)}
body.cinematic-universe main>.section,body.cinematic-universe main>section.section{padding-top:clamp(78px,9vw,132px);padding-bottom:clamp(78px,9vw,132px)}
body.cinematic-universe .section-head{max-width:880px}
body.cinematic-universe .section-head h2{max-width:780px;text-wrap:balance}
body.cinematic-universe .section-head p{max-width:700px;text-wrap:pretty}
body.cinematic-universe .release-grid{gap:clamp(18px,2vw,28px)}
body.cinematic-universe .release,body.cinematic-universe .product-card,body.cinematic-universe .feature-panel{border-radius:var(--pro-radius)}

/* ---------- Product-detail heroes: real two-column layout, no off-screen ornaments ---------- */
body.cinematic-universe .product-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.04fr) minmax(350px,.96fr)!important;
  grid-template-areas:'copy art';
  align-items:center!important;
  gap:clamp(44px,6vw,92px)!important;
  min-height:min(820px,88svh)!important;
  padding:clamp(138px,15vh,178px) max(24px,calc((100vw - 1240px)/2)) clamp(72px,8vh,100px)!important;
  overflow:hidden!important;
}
html[dir='rtl'] body.cinematic-universe .product-hero{grid-template-areas:'art copy'}
body.cinematic-universe .product-hero>.shell{
  grid-area:copy;position:relative!important;z-index:3!important;
  width:100%!important;max-width:680px!important;margin:0!important;padding:0!important;
}
body.cinematic-universe .product-hero h1{font-size:clamp(4.1rem,7.5vw,8.5rem);line-height:.86;letter-spacing:-.065em;text-wrap:balance}
body.cinematic-universe .product-hero-lead{max-width:650px;line-height:1.82;text-wrap:pretty}
body.cinematic-universe .product-meta-bar{max-width:650px;gap:8px}
body.cinematic-universe .product-keyart{
  grid-area:art;position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:min(100%,520px)!important;max-width:520px!important;aspect-ratio:1!important;
  justify-self:center!important;align-self:center!important;margin:0 auto!important;
  transform:none!important;translate:0 0!important;animation:none!important;overflow:visible!important;
}
html[dir='rtl'] body.cinematic-universe .product-keyart{left:auto!important;right:auto!important}

/* GlowUpfy: contained product mockup */
body.cinematic-universe .glowupfy-art{gap:16px!important;padding:26px;box-sizing:border-box}
body.cinematic-universe .glowupfy-art .app-window{width:min(88%,410px)!important;height:56%!important;max-width:410px!important;box-sizing:border-box}
body.cinematic-universe .glowupfy-art>b{font-size:clamp(1.45rem,2.5vw,2rem)!important;max-width:100%;white-space:nowrap}
body.cinematic-universe .glowupfy-art>small{max-width:88%;text-align:center;line-height:1.6}

/* RYLVORA: title stays inside its orbit */
body.cinematic-universe .rylvora-art{width:min(100%,500px)!important;max-width:500px!important}
body.cinematic-universe .rylvora-art>span{
  left:50%!important;right:auto!important;width:84%!important;max-width:84%!important;
  transform:translateX(-50%)!important;text-align:center!important;white-space:nowrap!important;
  font-size:clamp(2.3rem,4.1vw,4.55rem)!important;letter-spacing:-.055em!important;overflow:visible!important;
}
body.cinematic-universe .rylvora-art>small{left:50%;right:auto;transform:translateX(-50%);width:82%;text-align:center;white-space:nowrap}

/* Book: fully visible cover with calmer editorial depth */
body.cinematic-universe .book-cover-art{width:min(100%,470px)!important;max-width:470px!important}
body.cinematic-universe .book-cover{width:min(62%,300px)!important;height:78%!important;max-height:420px!important;box-sizing:border-box;transform:rotateY(-8deg) rotateZ(1deg)!important}
html[dir='rtl'] body.cinematic-universe .book-cover{transform:rotateY(8deg) rotateZ(-1deg)!important}

/* ---------- Generic page heroes: large but disciplined ---------- */
body.cinematic-universe .page-hero{min-height:clamp(520px,68svh,720px);padding-top:clamp(150px,16vh,190px);padding-bottom:clamp(68px,8vh,92px)}
body.cinematic-universe .page-hero>.shell{width:var(--pro-shell);max-width:none}
body.cinematic-universe .page-hero h1{max-width:min(900px,76vw);font-size:clamp(3.7rem,7.5vw,8rem);line-height:.9}
body.cinematic-universe .cinema-hero-symbol{right:max(32px,calc((100vw - 1240px)/2));width:min(27vw,350px);opacity:.72}
html[dir='rtl'] body.cinematic-universe .cinema-hero-symbol{right:auto;left:max(32px,calc((100vw - 1240px)/2))}

/* ---------- Xalo Mustafa profile: editorial portrait, balanced name hierarchy ---------- */
body.xp-page .xp-shell{width:min(1120px,calc(100% - clamp(28px,6vw,84px)))}
body.xp-page .xp-main{padding:clamp(48px,6vw,76px) 0 96px}
body.xp-page .xp-grid{
  grid-template-columns:minmax(250px,320px) minmax(0,700px)!important;
  justify-content:center;gap:clamp(52px,7vw,104px)!important;align-items:center!important;
}
body.xp-page .xp-portrait-wrap{min-height:0!important;align-self:center;justify-self:center;width:100%;max-width:320px}
body.xp-page .xp-portrait-wrap::before{inset:-18% -24%!important;opacity:.62!important;filter:blur(30px)!important}
body.xp-page .xp-portrait{
  width:100%!important;max-width:320px!important;height:420px!important;aspect-ratio:auto!important;
  object-fit:cover!important;object-position:50% 28%!important;border-radius:24px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.018)!important;
}
body.xp-page .xp-copy{max-width:700px!important}
body.xp-page .xp-kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px!important;color:#8993a1!important}
body.xp-page .xp-kicker::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,rgba(205,224,255,.7),transparent)}
html[dir='rtl'] body.xp-page .xp-kicker::before{background:linear-gradient(270deg,rgba(205,224,255,.7),transparent)}
body.xp-page .xp-title{
  display:block!important;margin:0!important;font-size:clamp(3.6rem,5.1vw,5rem)!important;
  line-height:.88!important;letter-spacing:-.06em!important;max-width:620px
}
body.xp-page .xp-title em{
  display:block!important;margin:8px 0 0!important;font-size:.56em!important;line-height:1!important;
  letter-spacing:-.015em!important;color:#bdb7ae!important;opacity:.92
}
body.xp-page .xp-role{margin-top:24px!important;font-size:clamp(.82rem,1.05vw,.98rem)!important;line-height:1.7!important;max-width:680px}
body.xp-page .xp-bio{margin-top:22px!important;font-size:clamp(.88rem,1vw,1rem)!important;line-height:1.9!important;max-width:680px}
body.xp-page .xp-tags{margin-top:24px!important;gap:8px!important}
body.xp-page .xp-tag{padding:8px 11px!important;font-size:8px!important}
body.xp-page .xp-links{margin-top:28px!important}
body.xp-page .xp-authority,body.xp-page .xp-now{max-width:1040px;margin-left:auto;margin-right:auto}
body.xp-page .xp-authority-card{border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.028),rgba(255,255,255,.012))}

/* ---------- Focus / professionalism ---------- */
body.cinematic-universe a:focus-visible,body.cinematic-universe button:focus-visible,body.xp-page a:focus-visible,body.xp-page button:focus-visible{outline:2px solid rgba(175,214,255,.82);outline-offset:4px}
body.cinematic-universe .btn,body.cinematic-universe .pill,body.xp-page .xp-link{transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
@media(hover:hover) and (pointer:fine){body.cinematic-universe .btn:hover,body.xp-page .xp-link:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.18)}}

/* ---------- Responsive containment ---------- */
@media(max-width:980px){
  body.cinematic-universe .product-hero,html[dir='rtl'] body.cinematic-universe .product-hero{
    grid-template-columns:1fr!important;grid-template-areas:'copy' 'art'!important;gap:38px!important;min-height:auto!important;
    padding:132px max(24px,6vw) 72px!important;
  }
  body.cinematic-universe .product-hero>.shell{max-width:760px!important;margin:0 auto!important}
  body.cinematic-universe .product-keyart{width:min(82vw,500px)!important;margin:4px auto 0!important}
  body.cinematic-universe .page-hero h1{max-width:82vw}
  body.xp-page .xp-grid{grid-template-columns:280px minmax(0,1fr)!important;gap:48px!important}
  body.xp-page .xp-portrait{height:380px!important;max-width:290px!important}
}
@media(max-width:760px){
  body.cinematic-universe .product-hero,html[dir='rtl'] body.cinematic-universe .product-hero{padding:116px 24px 62px!important}
  body.cinematic-universe .product-keyart{width:min(92vw,460px)!important}
  body.cinematic-universe .page-hero{min-height:500px;padding-top:130px}.cinema-hero-symbol{opacity:.28!important}
  body.xp-page .xp-grid{grid-template-columns:1fr!important;gap:38px!important}
  body.xp-page .xp-portrait-wrap{justify-self:start;max-width:290px}
  html[dir='rtl'] body.xp-page .xp-portrait-wrap{justify-self:end}
  body.xp-page .xp-portrait{height:360px!important;max-width:280px!important}
  body.xp-page .xp-title{font-size:clamp(3.4rem,13vw,4.6rem)!important}
}
@media(max-width:520px){
  :root{--pro-shell:calc(100vw - 28px)}
  body.cinematic-universe .product-hero,html[dir='rtl'] body.cinematic-universe .product-hero{padding:104px 16px 54px!important;gap:28px!important}
  body.cinematic-universe .product-hero h1{font-size:clamp(3.2rem,17vw,4.9rem)}
  body.cinematic-universe .product-keyart{width:min(92vw,390px)!important}
  body.cinematic-universe .glowupfy-art{padding:12px}.glowupfy-art .app-window{width:90%!important}
  body.cinematic-universe .rylvora-art>span{font-size:clamp(2rem,12vw,3.2rem)!important}
  body.xp-page .xp-portrait-wrap{max-width:250px}
  body.xp-page .xp-portrait{height:320px!important;max-width:250px!important;border-radius:20px!important}
  body.xp-page .xp-title{font-size:clamp(3.15rem,16vw,4.2rem)!important}
  body.xp-page .xp-title em{font-size:.58em!important}
}
@media(prefers-reduced-motion:reduce){body.cinematic-universe *,body.xp-page *{scroll-behavior:auto}}

body.xp-page .xp-identity-line{margin-top:18px;color:#8793a4;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}html[dir='rtl'] body.xp-page .xp-identity-line{letter-spacing:.05em}