/* Studio edition — full-width films and a shared motion rhythm. */
.studio-hero.hero-immersive{display:flex;align-items:center;width:100%;max-width:none;min-height:620px;min-height:clamp(620px,calc(100svh - 140px),880px);margin:0;padding:70px max(6%,calc((100vw - 1400px)/2)) 145px;background:#20232c;color:white;overflow:hidden}
.hero-immersive .mv-backdrop{container-type:size;z-index:-2}
.hero-immersive .mv-shade{background:linear-gradient(90deg,rgba(13,16,25,.73),rgba(13,16,25,.35) 42%,rgba(13,16,25,.08) 75%),linear-gradient(0deg,rgba(13,16,25,.65),transparent 40%)}
.hero-immersive #mv-player,.hero-immersive .mv-backdrop iframe{width:100%;height:100%;min-width:177.78vh;min-height:56.25vw}
@supports(width:1cqw){.hero-immersive #mv-player,.hero-immersive .mv-backdrop iframe{width:max(100cqw,177.778cqh);height:max(100cqh,56.25cqw);min-width:0;min-height:0}}
.hero-immersive .hero-type{width:min(480px,100%);min-width:0;position:relative;z-index:1}
.hero-immersive .hero-kicker{font-size:14px;font-weight:500;letter-spacing:.13em;line-height:1.5;margin-bottom:26px;color:#f3e7ed;text-shadow:0 2px 12px #0006}
.hero-immersive .hero-brand{width:clamp(270px,27vw,410px);max-width:100%;margin:0;font-size:1rem;line-height:1;white-space:normal}
.hero-brand-logo{width:100%;height:auto;filter:drop-shadow(0 3px 14px #0002)}
.hero-immersive .hero-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:20px;margin-top:34px;text-shadow:0 2px 12px #0008}
.hero-immersive .hero-person{font-size:clamp(25px,2.2vw,34px);font-weight:500;letter-spacing:.1em;line-height:1.5}
.hero-immersive .hero-caption>p:last-child{font-size:15px;font-weight:500;letter-spacing:.06em;line-height:1.5;margin:0;border-left:2px solid var(--pink);padding-left:20px}
.hero-immersive .hero-scroll{position:absolute;left:max(6%,calc((100vw - 1400px)/2));bottom:52px;right:auto;z-index:2;margin:0;font-size:16px;gap:18px}
.hero-immersive .hero-scroll>span:last-child{border-color:#fff9;background:#14172040;width:44px;height:44px}
.hero-immersive .hero-scroll:hover>span:last-child{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.hero-immersive .mv-console{position:absolute;right:max(6%,calc((100vw - 1400px)/2));bottom:52px;z-index:2;margin:0;max-width:min(560px,50%);padding:7px 9px 7px 18px;border:1px solid #ffffff59;border-radius:40px;background:#151820aa;backdrop-filter:blur(12px);font-size:15px;gap:10px}
.hero-immersive .mv-console button{min-height:40px;border-color:#fff6;background:transparent;color:white;padding:8px 14px;font-size:14px}
.hero-immersive .mv-console button:hover{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.hero-immersive .mv-console a{max-width:300px;margin-right:12px}
.hero-accent{position:absolute;display:block;background:var(--pink);width:14px;height:76px;transform:skew(-28deg);pointer-events:none;z-index:1;animation:accent-drift 5s ease-in-out infinite;animation-play-state:paused}
.hero-accent-one{top:11%;right:8%}.hero-accent-two{height:44px;width:7px;top:calc(11% + 98px);right:calc(8% + 60px);opacity:.65;animation-delay:-2s}
.studio-ticker .ticker-track{animation-play-state:paused}.studio-ticker.scene-active .ticker-track{animation-play-state:running}
.scene-active .hero-accent{animation-play-state:running}
/* A slim horizontal motion strip directly below the film. */
.studio-ticker{position:relative;z-index:2;transform:none;width:100%;max-width:100%;margin:0;padding:0;clip-path:none}
.ticker-ribbon{width:100%;margin:0;padding:10px 0;transform:none;overflow:hidden;border-top:1px solid #ffffff20}
.studio-ticker span{font-size:24px;letter-spacing:.1em}
.studio-ticker .ticker-track{animation-duration:38s}
@media(min-width:701px){.hero-immersive .mv-console{bottom:36px}}
/* The section colours stay still; type, images and accents carry the movement. */
.motion .reveal{transition-duration:.7s;transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-item{opacity:0;transform:translateY(22px);transition:opacity .7s var(--motion-delay,0ms),transform .8s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms)}
.motion-ready .motion-item.is-in-view{opacity:1;transform:none}
.studio-section-title{position:relative;align-items:flex-start;min-width:0}
.motion-ready .studio-section-title>.section-word{display:block;clip-path:inset(0 0 100% 0);transform:translateY(20px);transition:clip-path .85s cubic-bezier(.16,1,.3,1) .1s,transform .85s cubic-bezier(.16,1,.3,1) .1s}
.motion-ready .studio-section-title.is-in-view>.section-word{clip-path:inset(0);transform:none}
.motion-ready .studio-section-title>.section-number{transform:translateY(9px);transition:transform .55s ease}
.motion-ready .studio-section-title.is-in-view>.section-number{transform:none}
.studio-section-title:after{content:'';display:block;flex-shrink:0;align-self:center;width:22px;height:52px;margin-left:12px;background:repeating-linear-gradient(90deg,var(--pink) 0 5px,transparent 5px 10px);transform:skew(-24deg);animation:section-accent 4.8s ease-in-out infinite;animation-play-state:paused}
.scene-active .studio-section-title:after{animation-play-state:running}
.service{position:relative;isolation:isolate}.service:before{content:'';position:absolute;inset:0 -16px;background:var(--pink-light);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.workflow-step{overflow:hidden}.workflow-step:after{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .8s .2s}.workflow-step.visible:after{transform:scaleX(1)}
.jacket-link:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#ffffff40 47%,transparent 68%);transform:translateX(-115%);pointer-events:none;transition:transform .65s ease}.jacket-link{position:relative}
.group-controls button,.role-controls button,.bio-tabs button,.yxre-view-controls button{transition:background .25s,color .25s,box-shadow .25s,transform .25s}
.group-controls button[aria-pressed=true],.bio-tabs button[aria-selected=true]{box-shadow:0 0 0 2px #ffffff24 inset}
.social-icons a,.social-icons button,.header-social a{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.header-more[open] .more-links{animation:menu-arrive .25s cubic-bezier(.2,.8,.2,1) both;transform-origin:top right}
.hero-scroll>span:last-child{animation:scroll-nudge 2.8s ease-in-out infinite;animation-play-state:paused}.scene-active .hero-scroll>span:last-child{animation-play-state:running}
.yxre-render.view-changing img{animation:view-signal .45s ease-out}.bio-project-cover{transition:filter .4s,transform .65s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){
 .service:hover:before,.service:focus-within:before{transform:scaleX(1)}
 .jacket-link:hover:after{transform:translateX(115%)}
 .thumbnail-link:hover .play-indicator{background:var(--pink)}
 .social-icons a:hover,.social-icons button:hover,.header-social a:hover{transform:translateY(-4px) rotate(-5deg)}
 .bio-project-cover:hover{transform:translateY(-5px)}
 .group-controls button:hover,.bio-tabs button:hover{transform:translateY(-2px)}
}
@keyframes accent-drift{0%,100%{transform:translateY(0) skew(-28deg)}50%{transform:translateY(15px) skew(-28deg)}}
@keyframes section-accent{0%,100%{transform:translateY(0) skew(-24deg);opacity:.75}50%{transform:translateY(-7px) skew(-24deg);opacity:1}}
@keyframes scroll-nudge{0%,55%,100%{transform:translateY(0)}70%{transform:translateY(5px)}85%{transform:translateY(-2px)}}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes view-signal{0%{opacity:.4;filter:brightness(1.5);transform:translateX(5px)}30%{transform:translateX(-4px)}100%{opacity:1;filter:none;transform:none}}
.motion-page-paused *, .motion-page-paused *:before,.motion-page-paused *:after,.effects-paused *, .effects-paused *:before,.effects-paused *:after{animation-play-state:paused!important}
.intro-active .hero-accent,.intro-active .hero-scroll>span:last-child{animation-play-state:paused!important}
@media(max-width:950px){.studio-hero.hero-immersive{padding-block:64px 148px;min-height:650px}.hero-immersive .hero-brand{width:330px}.hero-immersive .hero-person{font-size:28px}.hero-immersive .mv-console{right:5%;max-width:53%}.hero-immersive .hero-scroll{left:5%}.hero-immersive .mv-console a{max-width:190px}}
@media(max-width:700px){
 /* Keep the complete landscape film in view, with controls outside the picture. */
 .studio-hero.hero-immersive{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-height:0;padding:0;align-items:stretch;background:#202126}
 .hero-immersive .mv-backdrop{position:relative;inset:auto;width:100%;aspect-ratio:16/9;container-type:normal;z-index:0;background:#000}
 .hero-immersive #mv-player,.hero-immersive .mv-backdrop iframe{width:100%;height:100%;min-width:0;min-height:0}
 .hero-immersive .mv-poster{background-size:contain;background-color:#000}
 .hero-immersive .hero-type{width:100%}.hero-immersive .hero-brand{width:270px;max-width:76vw}.hero-immersive .hero-kicker{font-size:12px;letter-spacing:.1em;margin-bottom:25px;max-width:260px}
 .hero-immersive .hero-caption{gap:15px;margin-top:28px;flex-wrap:nowrap}.hero-immersive .hero-person{font-size:25px;letter-spacing:.08em;flex-shrink:0}.hero-immersive .hero-caption>p:last-child{font-size:13px;padding-left:15px;line-height:1.5}
 .hero-immersive .mv-shade{display:none}
 .hero-immersive .hero-scroll{left:24px;bottom:45px;gap:12px;font-size:14px}.hero-immersive .hero-scroll>span:first-child{display:none}
 .hero-immersive .mv-console{position:relative;inset:auto;width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;border:0;border-radius:0;padding:10px 20px;gap:8px;font-size:13px;background:#202126;backdrop-filter:none}
 .hero-immersive .mv-console a{max-width:100%;width:100%;margin:0;line-height:1.5;white-space:normal;overflow-wrap:anywhere}.hero-immersive .mv-console button{font-size:13px;min-height:44px;padding:8px 12px}.hero-immersive .mv-led{display:none}
 .hero-immersive .hero-accent{display:none}
 .studio-ticker{padding:0;margin:0}.ticker-ribbon{padding:8px 0;transform:none}.studio-ticker span{font-size:18px}.studio-ticker .ticker-track{gap:24px}.studio-ticker span:after{margin-left:24px}.studio-section-title:after{height:34px;width:16px;margin-left:4px;background-size:auto;flex-shrink:0}.motion-ready .studio-section-title>.section-word{transform:translateY(14px)}
}
@media(max-width:380px){.hero-immersive .hero-caption{flex-wrap:wrap;gap:10px 15px}.hero-immersive .hero-person{font-size:23px}.hero-immersive .hero-scroll{left:20px}.hero-immersive .mv-console{padding-inline:16px}.studio-section-title:after{display:none}}
@media(prefers-reduced-motion:reduce){
 .motion-ready .motion-item,.motion-ready .studio-section-title>.section-word,.motion-ready .studio-section-title>.section-number{opacity:1;transform:none;clip-path:none}
 .hero-accent,.studio-section-title:after,.hero-scroll>span:last-child{animation:none!important}.jacket-link:after{display:none}
}

/* Studio edition — film first, identity in ABOUT. */
.about-label:after{display:none}
.about-brand{margin-top:38px;max-width:360px}
.about-brand-kicker{font-family:var(--display);font-size:14px;font-weight:500;line-height:1.5;letter-spacing:.12em;margin-bottom:24px}
.about-brand-logo{width:310px;max-width:100%;height:auto;filter:brightness(0)}
.about-person{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.6;letter-spacing:.12em;margin-top:28px}
.about-person>span{display:block;font-family:Georgia,var(--serif);font-size:15px;font-weight:400;letter-spacing:.14em;margin-top:9px}
.about-roles{font-family:var(--font);font-size:12px;line-height:1.9;font-weight:400;letter-spacing:.065em;margin-top:18px}
#works{padding-inline:max(4.5%,calc((100vw - 1760px)/2))}
.hero-immersive .mv-shade{background:linear-gradient(0deg,#11141d66,transparent 27%)}
/* Ambient strokes remain behind content and animate only while in view. */
.section,footer{isolation:isolate}footer{position:relative}
.ambient-marks{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;user-select:none}
.ambient-mark{position:absolute;display:block;width:11px;height:86px;background:var(--pink);opacity:.48;transform:skew(-28deg);animation:ambient-drift 8s ease-in-out infinite;animation-play-state:paused}
.ambient-mark:nth-child(1){right:2.2%;top:12%}
.ambient-mark:nth-child(2){right:calc(2.2% + 30px);top:calc(12% + 108px);width:5px;height:44px;opacity:.25;animation-delay:-3s;animation-duration:10s}
.ambient-mark:nth-child(3){left:1.8%;bottom:12%;width:8px;height:60px;opacity:.24;animation-delay:-5s;animation-duration:9s}
.ambient-mark:nth-child(4){left:calc(1.8% + 29px);bottom:calc(12% + 78px);width:4px;height:30px;opacity:.13;animation-delay:-1s;animation-duration:7s}
.section:nth-of-type(even) .ambient-mark:nth-child(1){top:24%;height:105px}
.section:nth-of-type(even) .ambient-mark:nth-child(2){top:calc(24% + 130px)}
.scene-active>.ambient-marks .ambient-mark{animation-play-state:running}
@keyframes ambient-drift{0%,100%{transform:translate3d(0,0,0) skew(-28deg)}50%{transform:translate3d(-7px,18px,0) skew(-28deg)}}
.header nav .nav-contact{background:var(--pink);color:var(--ink);border-radius:26px;padding:7px 17px;min-height:38px;transition:background .2s,transform .2s;line-height:1.2}
.header nav .nav-contact:after{display:none}.header nav .nav-contact:hover{background:#ff85b6;transform:translateY(-2px)}
.header nav .nav-contact[aria-current]{box-shadow:inset 0 0 0 2px var(--ink)}
@media(min-width:951px){.header{grid-template-columns:minmax(110px,1fr) auto minmax(110px,1fr)}.header>nav{width:clamp(430px,38vw,620px);max-width:none;gap:clamp(18px,2.2vw,34px);padding:6px 18px}.header-actions{justify-self:end}}
@media(max-width:950px){.about-brand-logo{width:280px}.about-person{font-size:28px}.header nav .nav-contact{min-height:34px;padding:6px 16px}}
@media(max-width:700px){
 #works{padding-inline:24px}
 .about-brand{margin-top:26px;max-width:340px}.about-brand-kicker{font-size:12px;margin-bottom:20px}.about-brand-logo{width:184px;max-width:60vw}.about-person{font-size:26px;margin-top:24px}.about-person>span{font-size:13px}.about-roles{font-size:12px;margin-top:16px}
 .header nav .nav-contact{font-size:15px;min-height:32px;padding:6px 11px}.header>nav{padding:4px 8px}
 .ambient-mark:nth-child(1){right:10px;width:6px;height:47px;opacity:.24}.ambient-mark:nth-child(2){right:24px;top:calc(12% + 64px);width:3px;height:27px;opacity:.14}.ambient-mark:nth-child(3){left:7px;width:4px;height:40px;opacity:.15}.ambient-mark:nth-child(4){display:none}
 .section:nth-of-type(even) .ambient-mark:nth-child(1){height:60px}.section:nth-of-type(even) .ambient-mark:nth-child(2){top:calc(24% + 78px)}
}
@media(max-width:380px){#works{padding-inline:20px}.header nav .nav-contact{font-size:14px;padding-inline:9px}.about-person{font-size:26px}}
@media(prefers-reduced-motion:reduce){.ambient-mark{animation:none!important}}

/* Typographic motion: quiet background loops and one-time heading entrances. */
.ambient-type{position:absolute;inset:auto 0 6px;overflow:hidden;z-index:-1;pointer-events:none;user-select:none;opacity:.12}
.ambient-type-track{display:flex;width:max-content;animation:ambient-type-scroll 48s linear infinite;animation-play-state:paused}
.ambient-type-track>span{flex-shrink:0;padding-right:.3em;font-family:var(--display);font-size:clamp(70px,9vw,150px);font-weight:700;line-height:1.1;letter-spacing:.045em;color:transparent;-webkit-text-stroke:1px var(--pink)}
.type-reverse .ambient-type-track{animation-direction:reverse;animation-duration:58s}
.scene-active>.ambient-type .ambient-type-track{animation-play-state:running}
.kinetic-word{display:inline-block;white-space:nowrap}
.kinetic-glyph{display:inline-block}
.motion-ready .kinetic-title .kinetic-glyph{opacity:0;transform:translateY(.6em) rotate(5deg);transition:transform .65s cubic-bezier(.16,1,.3,1) var(--glyph-delay),opacity .45s var(--glyph-delay)}
.motion-ready .kinetic-title.is-in-view .kinetic-glyph{opacity:1;transform:none}
.motion-ready .service .index,.motion-ready .step-number{transition:color .45s,transform .6s;transform:translateY(8px);color:var(--pink)}
.motion-ready .service.visible .index,.motion-ready .workflow-step.visible .step-number{transform:none}
@keyframes ambient-type-scroll{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine){
 .header nav a:not(.nav-contact):hover{color:#c92170;transform:translateY(-2px);transition:transform .2s,color .2s}
 .service:hover .kinetic-glyph{color:#c92170;transition-delay:var(--glyph-delay)}
}
@media(max-width:700px){
 .section-head,.about-label,.about-body,.contact-intro{text-align:left}
 .studio-section-title{gap:10px;align-items:center}
 .studio-section-title>.section-word{font-size:clamp(32px,10vw,44px);letter-spacing:.015em;line-height:1.2}
 .studio-section-title>.section-number{font-size:14px;flex-shrink:0}
 .ambient-type{opacity:.08;bottom:2px}
 .ambient-type-track{animation-duration:62s}
 .ambient-type-track>span{font-size:66px}
 .type-reverse .ambient-type-track{animation-duration:70s}
 .about-body>p:not(.profile-name),.bio-prose p,.workflow-step p,.service>p{font-size:16px;line-height:1.9}
 .service h3{font-size:clamp(23px,6.4vw,29px);overflow-wrap:normal}
 .hero-immersive .mv-console{font-size:14px}
 .header nav a{min-height:40px;display:flex;align-items:center;justify-content:center}
 .header nav .nav-contact{min-height:40px}
 .group-controls button,.role-controls button,.bio-tabs button,.yxre-view-controls button{min-height:44px}
 .motion-ready .kinetic-title .kinetic-glyph{transform:translateY(.35em);transition-duration:.5s}
 .motion-ready .kinetic-title.is-in-view .kinetic-glyph{transform:none}
}
@media(max-width:380px){
 .hero-immersive .mv-console{grid-template-columns:1fr 1fr;gap:8px}
 .hero-immersive .mv-console a{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
 .ambient-type-track{animation:none!important}
 .kinetic-title .kinetic-glyph,.motion-ready .kinetic-title .kinetic-glyph{opacity:1;transform:none;transition:none}
}
.effects-paused .kinetic-glyph{opacity:1!important;transform:none!important;transition:none!important}

/* Accessible reading copies must never appear beside the animated heading. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.bio-panel-id .bio-person-name{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.6;letter-spacing:.12em}
.bio-panel-id .bio-roman{font-family:Georgia,var(--serif);font-size:15px;font-weight:400;letter-spacing:.14em;line-height:1.8;margin-top:9px}
.bio-panel-id .bio-person-roles{font-family:var(--font);font-size:12px;font-weight:400;line-height:1.9;letter-spacing:.065em;margin:18px 0 26px}
.work-listen .listening-players{max-width:960px;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.work-listen .platform-player h3{font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:.04em;margin-bottom:8px}
.work-listen .platform-player>a{font-size:13px;line-height:1.6}
.work-listen .platform-player iframe{display:block}
.work-listen>h2{font-size:34px;margin-bottom:8px}
.release-summary{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:22px}
.release-tracklist{margin-top:14px;font-size:13px;line-height:1.8}
.release-tracklist summary{cursor:pointer;min-height:44px;display:list-item;padding-block:10px}
.release-tracklist ol{padding-left:1.5em;margin:0}
@media(max-width:700px){
 .bio-panel-id .bio-person-name{font-size:26px}
 .bio-panel-id .bio-roman{font-size:13px}
 .bio-panel-id .bio-person-roles{margin-top:16px}
 .work-listen .listening-players{grid-template-columns:minmax(0,1fr);gap:20px}
 .work-listen>h2{font-size:30px}
 .release-panel>.artist-platforms{font-size:14px;gap:10px 18px}
}

/* Tighter vertical rhythm; reading line-height and touch targets stay generous. */
.section:not(.release-browser):not(.work-listen):not(.yxre-hero){padding-top:64px;padding-bottom:64px}
.section-head{margin-bottom:24px}
.about-body>p:not(.profile-name),.bio-prose p{margin-bottom:16px}
.about-actions,.bio-project-links{margin-top:24px}
.about-brand{margin-top:30px}
.about-person{margin-top:22px}
.bio-project-cover.souzoucity-character{height:640px;max-width:100%;object-fit:cover;margin-top:16px}
.work-listen{padding-top:32px;padding-bottom:32px}
.release-grid{align-items:start;row-gap:36px}
.release-platforms{margin-top:12px;gap:6px}
.release-platforms a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;font-size:13px;padding:7px 11px}
.release-tracklist{margin-top:6px;border-top:1px solid var(--line)}
.release-tracklist summary{font-size:13px;line-height:1.6;padding:12px 0;min-height:44px}
.release-tracklist li{line-height:1.8;margin-bottom:5px;padding-left:2px;overflow-wrap:anywhere}
.release-tracklist[open]{padding-bottom:6px}
.release-format-note{font-size:13px;color:var(--muted);line-height:1.7;margin-top:12px}
@media(max-width:950px){
 .section:not(.release-browser):not(.work-listen):not(.yxre-hero){padding-top:44px;padding-bottom:44px}
}
@media(max-width:700px){
 .section:not(.release-browser):not(.work-listen):not(.yxre-hero){padding-top:30px;padding-bottom:30px}
 .section.bio-hero,.section.disco-intro{padding-top:28px;padding-bottom:26px}
 .section-head{margin-bottom:16px}
 .about{gap:20px}.about-brand{margin-top:20px}
 .about-body>p:not(.profile-name),.bio-prose p{margin-bottom:14px}
 .bio-project-cover.souzoucity-character{height:max(500px,100vw);max-height:none;width:100%;margin-top:16px}
 .work-listen{padding-top:18px;padding-bottom:18px}
 .release-grid{row-gap:24px}
 .release-platforms a{min-height:44px;font-size:12px;padding:7px 9px}
 .release-tracklist summary{font-size:12px}
 .release-tracklist li{font-size:13px;line-height:1.85}
}
.release-platforms{align-items:center;gap:10px;margin-top:8px}
.release-panel>.artist-platforms{align-items:center;gap:10px}
.release-platforms a.streaming-link,.artist-platforms a.streaming-link,.platform-player a.streaming-link{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:8px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);line-height:1;text-decoration:none;vertical-align:middle}
.streaming-link svg{display:block;width:18px;height:18px;fill:currentColor;pointer-events:none}
.streaming-link:before{content:'';position:absolute;inset:-4px;border-radius:50%}
.release-platforms a.streaming-link:hover,.artist-platforms a.streaming-link:hover,.platform-player a.streaming-link:hover{background:var(--pink-light);border-color:var(--pink)}
.streaming-link:focus-visible{outline:2px solid var(--pink);outline-offset:4px}

/* The supplied film replaces the homepage's embedded playlist. */
.hero-immersive .mv-backdrop{z-index:0;background:#000}
.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#000}

/* Two equal-width groups keep the ribbon filled throughout every loop. */
.studio-ticker .ticker-track{gap:0;animation-duration:60s}
.ticker-group{display:flex;flex:none;align-items:center;justify-content:space-around;min-width:100vw;gap:60px;padding-right:60px}

/* Put profile navigation beside its introduction and bring the profile up. */
.bio-worlds-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,1.15fr);align-items:center;gap:32px;margin-bottom:28px}
.bio-worlds-toolbar .bio-worlds-heading{margin:0}
.bio-worlds-toolbar .bio-worlds-heading .eyebrow{margin-bottom:12px}
.bio-worlds-toolbar .bio-worlds-heading h2{font-size:22px;line-height:1.6}
.bio-worlds-toolbar .bio-worlds-heading>p:last-child{margin-top:8px}
.bio-worlds-toolbar .bio-tabs{width:100%;max-width:none;margin:0;padding:5px;gap:4px}
.bio-worlds-toolbar .bio-tabs button{min-width:0;min-height:56px;padding:10px 12px;font-size:16px}
.bio-worlds-toolbar .bio-tabs button>span{font-size:12px;line-height:1.4}
@media(max-width:1100px){.bio-worlds-toolbar{grid-template-columns:minmax(0,1fr);gap:18px}}
@media(max-width:700px){
 .hero-video{object-fit:contain}
 .ticker-group{gap:24px;padding-right:24px}
 .bio-worlds-toolbar{gap:16px;margin-bottom:22px}
 .bio-worlds-toolbar .bio-worlds-heading h2{font-size:20px}
 .bio-worlds-toolbar .bio-tabs button{min-height:44px;padding:10px 4px;font-size:14px}
}

/* Preserve the original film composition and compact catalogue controls. */
.studio-hero.hero-immersive{display:block;width:100%;height:auto;min-height:0;aspect-ratio:16/9;padding:0}
.hero-immersive .mv-backdrop{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;container-type:normal}
.hero-immersive .hero-video{object-fit:contain}
.role-controls-row{display:contents}
.bio-streaming-links{gap:10px;margin-top:14px}
#release-yourness>.disco-collection{padding-top:20px}
@media(max-width:700px){.role-controls{flex-direction:column;align-items:flex-start}.role-controls-row{display:flex;flex-wrap:wrap;gap:6px}#release-yourness>.disco-collection{padding-top:16px}}

/* Catalogue gutters belong to the outer section, never the nested grid. */
.release-grid{padding-inline:0;width:100%;min-width:0}
.release-meta{display:flex;flex-wrap:wrap;column-gap:.5em;row-gap:.15em}
.release-meta time{white-space:nowrap}

/* Align portfolio tools with the standard section edge; keep the gallery wide. */
#works .portfolio-tools{width:min(88vw,1400px);max-width:100%;margin-inline:auto}
#works .catalog-filter-panel{width:min(820px,100%);margin-left:auto}
#works .catalog-filter-panel .group-controls{width:100%;max-width:none}
#works .catalog-filter-panel button{min-height:44px;touch-action:manipulation}
#works .artist-filter{flex-wrap:wrap}
#works .artist-filter select{min-width:0;min-height:44px;flex:1}
@media(max-width:950px){#works .portfolio-tools{width:90vw}}
@media(max-width:700px){#works .portfolio-tools{width:100%}#works .catalog-filter-panel{width:100%}}

/* Put the desktop filters beside the title, aligned to the gallery's right edge. */
#works .catalog-caption{justify-content:flex-end}
@media(min-width:1400px){
 #works .portfolio-tools{width:100%;padding-left:max(0px,calc((min(91vw,1760px) - min(88vw,1400px))/2));display:grid;grid-template-columns:minmax(480px,1fr) minmax(620px,820px);column-gap:48px;align-items:start}
 #works .portfolio-tools>.section-head{margin-bottom:0;min-width:0}
 #works .catalog-controls{min-width:0}
 #works .catalog-filter-panel{width:100%}
}

/* Align the controls below the category buttons to their right edge. */
#works .catalog-filter-panel .artist-filter{justify-content:flex-end;text-align:right}
#works .catalog-filter-panel .filter-label{text-align:right}
#works .catalog-filter-panel .role-controls{justify-content:flex-end}
@media(max-width:700px){
 #works .catalog-filter-panel .role-controls{align-items:flex-end}
 #works .catalog-filter-panel .role-controls-row{justify-content:flex-end}
}

/* Equal space on both sides of every pink divider. */
.studio-ticker .ticker-group{gap:0;padding-right:0;justify-content:flex-start}
.studio-ticker .ticker-group>span{display:flex;align-items:center;justify-content:center;flex:none;position:relative;box-sizing:border-box;width:clamp(180px,20vw,320px);padding:0 24px;text-align:center;text-transform:none}
.studio-ticker .ticker-group>span:after{content:'/';position:absolute;right:0;top:50%;transform:translate(50%,-50%);margin:0}

/* Readable outline lettering and phrase-aware Japanese wrapping. */
.ambient-type{opacity:.3}
.ambient-type-track>span{-webkit-text-stroke:1.2px var(--pink)}
html:lang(ja) p,html:lang(ja) h2,html:lang(ja) h3{line-break:strict;text-wrap:pretty;overflow-wrap:break-word}
.text-unit{display:inline-block;max-width:100%;vertical-align:baseline;overflow-wrap:break-word;word-break:normal;text-indent:0}
@media(max-width:700px){.ambient-type{opacity:.24}}

/* Compact section introductions. */
.section-head.section-head-inline{align-items:center;gap:24px 48px}
.section-head-inline>.studio-section-title{flex:none;margin:0}
.section-head-inline>p{flex:1;min-width:0;margin:0}
@media(max-width:700px){
 .section-head.section-head-inline{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
}

/* Keep artist streaming links beside the project name. */
:is(#profile-yourness,#profile-souzoucity) .bio-panel-id{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:10px;align-items:center}
:is(#profile-yourness,#profile-souzoucity) .bio-panel-id>.eyebrow,:is(#profile-yourness,#profile-souzoucity) .bio-panel-id>.bio-project-cover{flex-basis:100%;min-width:0}
:is(#profile-yourness,#profile-souzoucity) .bio-panel-id>h2{min-width:0;max-width:100%}
:is(#profile-yourness,#profile-souzoucity) .bio-streaming-links{flex-wrap:nowrap;justify-content:flex-start;margin:0}
@media(max-width:700px){:is(#profile-yourness,#profile-souzoucity) .bio-panel-id{column-gap:12px}}

/* Retain the numbered contact heading after removing the introductory copy. */
.contact-intro>h2.studio-section-title{font-family:var(--display);font-size:inherit;font-weight:600;line-height:1.5;margin:0}

/* Start the brand kicker and ABOUT prose on the same desktop grid row. */
.about{row-gap:30px}
.about>.studio-section-title{grid-column:1 / -1;margin:0}
.about .about-brand{margin-top:0}
.about-body{padding-top:0}
@media(max-width:700px){.about{row-gap:20px}.about-body{padding-top:16px}}

/* A soft lavender field separates the portfolio from the film and ABOUT. */
#works{background-color:#f2eef7}

/* Keep required-field badges consistent with the multiple-selection note. */
#request-form .required-mark{color:#9e325e}
/* Place the contribution label beside its buttons, preserving the mobile rows. */
#works .role-filter-row{display:flex;align-items:flex-start;justify-content:flex-end;gap:14px}
#works .role-filter-row>.filter-label{display:flex;align-items:center;flex:none;min-height:44px;margin:0;white-space:nowrap}
#works .role-filter-row>.role-controls{min-width:0}
#works .catalog-filter-panel .artist-filter{margin-bottom:12px}
@media(max-width:700px){#works .role-filter-row{gap:10px}}
@media(max-width:380px){#works .role-filter-row{gap:8px}#works .role-filter-row .role-controls-row{gap:5px}#works .role-filter-row button{font-size:12px;padding:8px 7px}}

/* Align the workflow inquiry button with the section’s right edge. */
.workflow-cta{display:flex;width:fit-content;max-width:100%;margin-left:auto}

/* HOME profiles retain the existing ABOUT identity and copy. */
.about.about-profiles{display:block}
.about-profile-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;column-gap:10%;margin-bottom:30px}
.about-profile-toolbar .studio-section-title{margin:0;flex-shrink:0}
.about-profile-toolbar .bio-tabs{width:min(100%,620px);margin:0;min-width:0;padding:5px;gap:4px;justify-self:start}
.about-profile-toolbar .bio-tabs button{min-width:0;min-height:52px;padding:10px 14px;font-size:16px}
.about-profiles .about-shohei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10%;align-items:start}
.about-profiles>.bio-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10%}
.about-profiles .bio-panel-id,.about-profiles .about-label{min-width:0}
.about-profiles .bio-prose,.about-profiles .about-body{min-width:0}
@media(max-width:1100px){
 .about-profile-toolbar{column-gap:6%}
 .about-profile-toolbar .bio-tabs{width:100%;max-width:620px;margin-left:0}
 .about-profile-toolbar .bio-tabs button{padding-inline:4px;font-size:14px}
 .about-profiles .about-shohei,.about-profiles>.bio-panel{column-gap:6%}
}
@media(max-width:700px){
 .about-profile-toolbar{display:block;margin-bottom:24px}
 .about-profile-toolbar .bio-tabs{margin-top:22px;max-width:none}
 .about-profile-toolbar .bio-tabs button{min-height:44px;padding:10px 4px;font-size:14px}
 .about-profiles .about-shohei,.about-profiles>.bio-panel{grid-template-columns:minmax(0,1fr);gap:24px}
 .about-profiles .bio-panel-id{position:static}
}

/* Keep the full Discography label readable within the mobile navigation. */
.header>nav a{white-space:nowrap}
@media(max-width:700px){
 .header>nav{gap:8px;justify-content:space-between}
 .header>nav a{font-size:clamp(14px,4.1vw,20px)}
 .header>nav .nav-contact{font-size:clamp(13px,3.7vw,17px);padding-inline:9px}
}
/* Avoid a full-screen backdrop blur pass on touch devices during scrolling. */
@media(max-width:700px){.header,.page-yxre .header{backdrop-filter:none;background:#fcfcfc}.yxre-sheet-dialog::backdrop{backdrop-filter:none}}

/* Keep prose readable between phone, tablet and desktop column widths. */
.service>div,.service>p,.workflow-step,.workflow-notes>article,.yxre-dossier>div{min-width:0}
.about-body p,.bio-prose p,.service>p,.workflow-step p,.workflow-notes p{word-break:normal;line-break:strict;text-wrap:pretty}
html:lang(en) .text-unit{overflow-wrap:normal}
html:lang(en) :is(.about-body,.bio-prose,.service,.workflow-step,.workflow-notes,.release-card) p{hyphens:manual;word-break:normal}
.release-tracklist li{overflow-wrap:break-word;word-break:normal;line-break:strict}
.contact-notice a,.form-fallback a,.discord-user{overflow-wrap:anywhere}
@media(min-width:701px) and (max-width:1100px){
 .workflow-steps,.workflow-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .workflow-notes>article:last-child{grid-column:1 / -1}
 .about-profiles .bio-panel-id>h2{font-size:36px}
 .about-profiles .bio-panel-id{position:static}
}
@media(max-width:700px){
 .about-profiles .bio-panel-id>h2{font-size:clamp(32px,8.5vw,42px)}
 html:lang(en) #works .role-filter-row>.role-controls{flex:1;max-width:380px}
 html:lang(en) #works .role-controls-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 html:lang(en) #works .role-controls-row button{min-width:0;padding-inline:8px}
}
@media(max-width:480px){
 .workflow-step{padding:22px 20px}
 .workflow-step h3{min-height:40px;padding-left:44px;display:flex;align-items:center}
 .workflow-step .step-number{left:20px;top:20px}
}

/* Compact spacing without reducing reading sizes or touch targets. */
.catalog-controls{margin-bottom:22px}
.catalog-grid{padding-bottom:14px;row-gap:24px}
.gallery-footer{margin-top:12px}
.workflow-steps{margin-block:28px}
.workflow-notes{margin-block:26px}
footer{padding-top:44px;row-gap:30px}
@media(max-width:700px){
 .header>nav{display:flex;width:fit-content;max-width:100%;justify-content:center;gap:clamp(4px,1.5vw,8px);padding:4px}
 .header>nav a,.header>nav .nav-contact{flex:0 0 auto;justify-content:center;align-items:center;min-width:44px;height:40px;min-height:40px;padding:0 8px;margin:0;line-height:1;font-size:clamp(14px,4.1vw,20px)}
 .header>nav .nav-contact{padding-inline:12px}
 .header nav a:after{left:50%;right:auto;width:28px;bottom:1px;transform:translateX(-50%) scaleX(0);transform-origin:center}
 .header nav a:hover:after,.header nav a[aria-current]:after{transform:translateX(-50%) scaleX(1)}
 .catalog-controls{margin-bottom:16px}
 .group-controls{margin-bottom:16px}
 .catalog-caption{margin-top:12px}
 .catalog-grid{grid-template-rows:max-content;align-items:start;overflow-y:hidden;padding-bottom:8px}
 .catalog-card-meta{margin-top:10px}
 .catalog-card h3{margin-block:4px 6px}
 .gallery-footer{margin-top:8px}
 .gallery-nav button{width:44px;height:44px}
 .about-profile-toolbar{margin-bottom:18px}
 .about-profile-toolbar .bio-tabs{margin-top:16px}
 .workflow-steps,.workflow-notes{margin-block:22px}
 footer{padding-top:28px;padding-bottom:22px;row-gap:22px}
 .footer-bottom{padding-top:18px}
}

/* Phone typography: a little quieter, with comfortable controls and form fields. */
@media(max-width:700px){
 .about-body>p:not(.profile-name),.bio-prose p,.workflow-step p,.service>p{font-size:15px;line-height:1.85}
 .bio-prose .bio-lead{font-size:clamp(18px,5vw,20px);line-height:1.8}
 .section-head>p,.contact-intro>p:last-child,.yxre-next>p:not(.eyebrow){font-size:14px;line-height:1.85}
 .section-head h2:not(.studio-section-title){font-size:19px;line-height:1.65}
 .studio-section-title>.section-word{font-size:clamp(30px,9.4vw,42px)}
 .disco-intro h1,.yxre-intro .yxre-page-title{font-size:clamp(54px,13.5vw,80px)}
 .header>nav a,.header>nav .nav-contact{font-size:clamp(14px,3.8vw,18px)}
 .group-controls button{font-size:18px}
 .release-switch button{font-size:15px}
 .release-meta{font-size:13px;line-height:1.6}
 .release-card h2{font-size:14px;line-height:1.65}
 .yxre-tagline{font-size:18px}
 .yxre-next h2{font-size:22px;line-height:1.6}
 /* Keep the filter at 16px to avoid automatic zoom in iOS form controls. */
 .artist-filter select{font-size:16px}
 .release-card,.yxre-record,.contact-form-wrap{min-width:0}
}