/* James Studio — a single entrance, two creative worlds. */
.home{--bg:#080e0c;--fg:#edf2e9;--muted:#a6b4aa;background:var(--bg)}
.home>.wrap{max-width:1920px;padding:0 3.5vw}
.home .nav{height:88px;border-bottom:1px solid #e0f3df1a}
.home .brand{font-size:34px}
.home .brand span{font-size:14px;letter-spacing:.035em;margin-left:10px}
.home .navlinks a{color:#b8c5bd}
.home .navlinks a:is(:hover,[aria-current=page]){color:#ddf6ae}
.home .navlinks .contact{border-color:#d8f0dc3d;padding:10px 19px}
.home .navlinks .contact:hover{background:#d8f0dc12}
.home .gateway{max-width:1920px;padding:0 18px 18px;margin:0 auto}
.home .gateway-intro{min-height:126px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:24px calc(3.5vw - 18px)}
.home .gateway-intro .eyebrow{max-width:190px;color:#8d9f94;font-size:12px;line-height:1.7;letter-spacing:.13em;margin:0}
.home .gateway-intro h1{font-size:clamp(25px,2.7vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.04em;text-align:center;margin:0}
.home .gateway-intro h1 br{display:none}
.home .gateway-intro h1 em{display:block;color:#c8d7c8;font-weight:400;letter-spacing:-.03em}
.home .gateway-intro>p:last-child{display:block;justify-self:end;font-size:14px;line-height:1.65;margin:0;color:#a6b4aa}
.home .gateway-panels{height:calc(100svh - 232px);min-height:530px;max-height:1000px;display:flex;gap:1px;background:#829f8233;overflow:hidden}
.home .universe{min-width:0;min-height:0;flex:1;padding:32px clamp(28px,4vw,76px) 30px;transition:flex .9s var(--motion-ease);animation:none}
.home .universe-music{background:#101917}
.home .universe-design{background:#09251f;color:#eaf2df}
.home .universe-art{opacity:.72;object-position:55% 45%;transform:scale(1.025);transition:transform 1.7s var(--motion-ease),opacity 1s ease;z-index:-2}
.home .universe-music:after{background:linear-gradient(180deg,#07120e70 0%,#05120c10 28%,#07120eb8 73%,#040d0bee 100%)}
.home .universe-design:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 85% 5%,#30664d 0%,#123e31 35%,#09251f 70%);transition:opacity 1s ease;opacity:.8}
.home .universe-design:after{background:linear-gradient(140deg,transparent 45%,#041610aa);z-index:-1}
.home .universe-top{font-size:12px;letter-spacing:.09em;line-height:1.7;color:#d9e5db;display:flex;justify-content:space-between;gap:12px}
.home .universe-top span:last-child{display:block;letter-spacing:.02em;color:#bbcdbf}
.home .universe-design .universe-top>span:first-child{color:#c7e8a5}
.home .universe-title{padding-top:70px;margin-top:auto;padding-bottom:20px}
.home .universe-title h2{font-size:clamp(72px,10vw,180px);font-weight:400;line-height:.95;letter-spacing:-.065em;margin:0;transition:transform .9s var(--motion-ease)}
.home .universe-title h2 span{font-size:.37em;line-height:1.35;letter-spacing:-.035em;margin:8px 0 0 5px;color:#c8d9c9}
.home .universe-design .universe-title h2{color:#d8f3b0}
.home .universe-design .universe-title h2 span{color:#b7cdbb}
.home .universe-title p{font-size:16px;line-height:1.65;color:#c1cdc3;margin:25px 0 0;max-width:330px}
.home .universe-link{margin-top:12px;padding-top:20px;border-color:#daebd333;font-size:14px;line-height:1.5;color:#e1edd8}
.home .universe:focus-visible{outline:2px solid #d8f3b0;outline-offset:-5px}
.home .footer{padding:28px 0;border-top:0}
.home .footer .wrap{max-width:1920px;padding:0 3.5vw}
.home .footer .brand{font-size:26px}
.home .footer small{color:#9aa99f}
@media(hover:hover) and (pointer:fine){
.home .universe:is(:hover,:focus-visible){flex:1.12}
.home .universe:is(:hover,:focus-visible) .universe-title h2{transform:translateY(-5px)}
.home .universe-music:is(:hover,:focus-visible) .universe-art{transform:scale(1.065);opacity:.9}
.home .universe-design:is(:hover,:focus-visible):before{opacity:1}
.home .gateway-panels:has(.universe-design:hover) .universe-art{opacity:.5}
}
@media(prefers-reduced-motion:no-preference){
.home .nav{animation:scene-copy .65s var(--motion-ease) both}
.home .gateway-intro h1{animation:scene-copy .8s .08s var(--motion-ease) both}
.home .gateway-intro .eyebrow,.home .gateway-intro>p:last-child{animation:scene-copy .8s .16s var(--motion-ease) both}
.home .universe-top{animation:scene-copy .85s .15s var(--motion-ease) both}
.home .universe-title h2{animation:scene-title 1.05s .12s var(--motion-ease) both}
.home .universe-design .universe-title h2{animation-delay:.22s}
.home .universe-title p,.home .universe-link{animation:scene-copy 1s .3s var(--motion-ease) both}
.home .universe-art{animation:scene-art 1.5s .05s var(--motion-ease) backwards}
.home .universe-design:before{animation:scene-light 1.5s .1s ease backwards}
@keyframes scene-copy{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes scene-title{from{opacity:0;translate:0 32px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(-10%)}}
@keyframes scene-art{from{opacity:0;scale:1.04}to{opacity:.72;scale:1}}
@keyframes scene-light{from{opacity:0}to{opacity:.8}}
}
@media(min-width:761px) and (max-width:1100px){
.home .gateway-intro{grid-template-columns:1fr auto 1fr;gap:20px}
.home .gateway-intro>p:last-child{grid-column:auto;font-size:14px}
.home .universe{padding:28px}
.home .universe-top{flex-direction:column;gap:5px}
.home .universe-title h2{font-size:clamp(72px,10vw,110px)}
}
@media(max-width:760px){
.home>.wrap{padding:0 6vw}.home .nav{height:76px}.home .brand{font-size:29px}.home .brand span{font-size:13px}
.home .gateway{padding:0 12px 12px}
.home .gateway-intro{min-height:0;padding:27px calc(6vw - 12px) 30px;display:grid;grid-template-columns:1fr;gap:17px}
.home .gateway-intro .eyebrow{font-size:12px;max-width:none;letter-spacing:.1em;margin:0}
.home .gateway-intro h1{text-align:left;font-size:clamp(29px,7vw,44px);line-height:1.18}
.home .gateway-intro h1 em{display:inline}.home .gateway-intro h1 em:before{content:' '}
.home .gateway-intro>p:last-child{justify-self:start;font-size:14px;line-height:1.65}
.home .gateway-panels{display:grid;grid-template-columns:minmax(0,1fr);height:auto;min-height:0;max-height:none;gap:1px}
.home .universe{min-height:460px;padding:25px 24px}
.home .universe-top{flex-direction:row;flex-wrap:wrap;gap:7px 15px;font-size:12px}
.home .universe-title{padding-top:70px;padding-bottom:14px}
.home .universe-title h2{font-size:clamp(78px,18vw,126px)}
.home .universe-title h2 span{font-size:.39em;margin-top:7px}
.home .universe-title p{font-size:16px;margin-top:22px}
.home .universe-link{margin-top:8px;padding-top:18px;font-size:14px}
.home .footer{padding:28px 0}.home .footer .wrap{padding:0 6vw}.home .footer-row{gap:22px}
}
@media(prefers-reduced-motion:reduce){.home *, .home *:before,.home *:after{animation:none!important;transition:none!important}}

/* One randomly selected release fills the Music entrance. */
.home .music-random-cover{object-fit:cover;object-position:center;opacity:.88}
.home .universe-music:after{background:linear-gradient(180deg,#030a086b 0%,#030a080a 25%,#030a0866 52%,#030a08d4 80%,#030a08f0 100%)}
.home .universe-music .universe-title h2{text-shadow:0 3px 35px #0009}
.home .universe-music .universe-title p{color:#e0e8e1;text-shadow:0 1px 10px #000}
/* The incoming cover fades over the current one without a blank frame. */
.home .universe-art.cover-transition{animation:none!important;pointer-events:none}